/* ============================================================
   POLISH PASS — logo integrity, token identity, depth,
   the chain-events network, and micro-interactions.
   Loaded last: it corrects, it does not replace.
   ============================================================ */

/* ── 1 · LOGO INTEGRITY ─────────────────────────────────────
   The mark is 617×640, not square. Never give it both a width
   and a height. One axis + object-fit: contain, always.
   ---------------------------------------------------------- */

.mark, img[src*="psc-mark"] {
  height: auto;
  object-fit: contain;
  object-position: center;
  flex: none;
}
.nav__mark { width: 30px; height: auto; }
.signal__mark, .gate__mark, .finale__mark, .journey__dot, .net__core { height: auto; }

/* ── 2 · TOKEN IDENTITY ─────────────────────────────────────
   [coin] $PSC  ·  [coin] $PSAI — small, consistent, never loud.
   ---------------------------------------------------------- */

.tk { display: inline-flex; align-items: center; gap: 0.5em; vertical-align: baseline; }
.tk__coin {
  position: relative;
  width: 1.15em; height: 1.15em;
  flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: transform 0.55s var(--e-out), box-shadow 0.55s var(--e-out);
}
.tk__coin img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.tk__coin--psc { box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 0 22px -6px var(--neon-glow); }
.tk__coin--psai {
  background: radial-gradient(closest-side, rgba(34,240,90,0.10), transparent 72%);
  box-shadow: 0 0 0 1px var(--line);
}
.tk__coin--psai img { width: 74%; height: 74%; }
.tk:hover .tk__coin { transform: translateY(-2px) scale(1.08); box-shadow: 0 0 0 1px var(--line-neon), 0 0 30px -4px var(--neon-glow); }
/* the mark never spins. It arrives, it settles, it stays. */

/* inline chips inside body copy and lists */
.tk--sm { font-size: 0.92em; }
.tk--lg .tk__coin { width: 0.86em; height: 0.86em; }

.psc__label h2 .tk__coin { width: 0.72em; height: 0.72em; }

/* ── 3 · DEPTH ──────────────────────────────────────────────
   Opt-in parallax. Only elements carrying data-depth move.
   ---------------------------------------------------------- */

[data-depth] { transform: translate3d(0, var(--dy, 0px), 0); will-change: transform; }
/* a revealing element owns its transform until it has landed */
[data-reveal][data-depth]:not(.is-in) { transform: translate3d(0, 26px, 0); }
[data-reveal][data-depth].is-in { transition: opacity 0.9s var(--e-out); }

.gate__token { margin-top: 20px; font-family: var(--f-mono); font-size: clamp(0.8rem, 1.4vw, 1rem);
  letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--smoke);
  opacity: calc(max(0, (var(--p, 0) - 0.54) * 3.2)); }
.gate__token .tk { justify-content: center; }
[data-depth-scale] { transform: translate3d(0, var(--dy, 0px), 0) scale(var(--ds, 1)); }

/* ── 4 · CHAIN EVENTS NETWORK ───────────────────────────────
   Fictional demo visualisation. Labelled as such on screen.
   ---------------------------------------------------------- */

.net { position: relative; }
.net svg { width: 100%; height: auto; overflow: visible; display: block; }

.net .n-link {
  fill: none; stroke: var(--line); stroke-width: 1;
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  transition: stroke-dashoffset 1.1s var(--e-out), stroke 0.6s var(--e-out);
}
.net .n-link.is-on { stroke-dashoffset: 0; }
.net .n-link.is-out.is-on { stroke: var(--line-neon); }

.net .n-node { fill: rgba(255,255,255,0.10); stroke: var(--line); stroke-width: 1; transition: fill 0.5s var(--e-out), stroke 0.5s var(--e-out); }
.net .n-node.is-on { fill: rgba(255,255,255,0.5); stroke: var(--line-strong); }
.net .n-node.is-hit { fill: var(--neon); stroke: var(--neon); }

.net .n-ring { fill: none; stroke: var(--neon); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.net .n-ring.is-hit { animation: node-pulse 0.9s var(--e-out); }
@keyframes node-pulse {
  0%   { opacity: 0.9; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(2.6); }
}

.net .n-label {
  fill: rgba(255,255,255,0.30);
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  transition: fill 0.5s var(--e-out);
}
.net .n-label.is-on { fill: rgba(255,255,255,0.62); }

.net .n-dot { fill: var(--neon); }

.net__core {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(52px, 11%, 96px);
  transform: translate(-50%, -50%) scale(var(--core, 1));
  filter: drop-shadow(0 0 34px var(--neon-glow));
  transition: transform 0.42s var(--e-out);
  pointer-events: none;
}
.net__halo {
  position: absolute; left: 50%; top: 50%;
  width: clamp(120px, 26%, 230px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(34,240,90,0.14), transparent 70%);
  opacity: calc(0.3 + var(--p, 0) * 0.7);
  pointer-events: none;
}

.net__log {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  min-height: 108px;
}
.net__log li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--ash);
  animation: row-in 0.5s var(--e-out) both;
}
.net__log li b { color: var(--white); font-weight: 500; }
.net__log li span { color: var(--faint); font-variant-numeric: tabular-nums; }
.net__foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .net__log li:nth-child(n+3) { display: none; }
  .net__log { min-height: 76px; }
}

/* ── 5 · TOKEN → AI HANDOFF (the gate) ──────────────────────
   $PSC arrives, the environment turns, $PSAI takes the frame.
   ---------------------------------------------------------- */

.gate__coin {
  position: absolute;
  width: clamp(74px, 15vw, 190px);
  border-radius: 50%;
  transform:
    translate3d(0, calc(46vh - var(--p, 0) * 46vh), 0)
    scale(calc(1.1 - var(--p, 0) * 0.55))
    rotate(calc(var(--p, 0) * 140deg));
  opacity: calc(min(1, var(--p, 0) * 3.2) * max(0, 1 - (var(--p, 0) - 0.34) * 3.6));
  box-shadow: 0 0 60px -10px var(--neon-glow);
  will-change: transform, opacity;
}
.gate__mark {
  opacity: calc(max(0, (var(--p, 0) - 0.30) * 3.4) * max(0, 1 - (var(--p, 0) - 0.74) * 4));
  transform: scale(calc(0.55 + var(--p, 0) * 0.62)) rotate(calc(-90deg + var(--p, 0) * 90deg));
}
.gate__chain {
  position: absolute; left: 50%; top: 0; width: 1px; height: 46vh;
  background: linear-gradient(180deg, transparent, var(--line-neon));
  transform: translateX(-50%) scaleY(calc(min(1, var(--p, 0) * 2.4)));
  transform-origin: 50% 0;
  opacity: calc(max(0, 1 - (var(--p, 0) - 0.34) * 3.6));
}
.gate__title .tk { justify-content: center; }

/* ── 6 · MICRO-INTERACTIONS ─────────────────────────────────*/

[data-magnetic] { will-change: transform; }
[data-tilt] {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--e-out);
}
[data-tilt].is-tilting { transition: transform 0.12s linear; }
.hub__grid a[data-tilt] { transform-style: preserve-3d; }

.screen { transition: box-shadow 0.6s var(--e-out); }
.rack__stage:hover .screen { box-shadow: 0 40px 90px -50px rgba(34,240,90,0.35); }

/* numbers react on hover in the specs */
.allocnote dd, .back__caps dd { transition: color 0.4s var(--e-out), transform 0.5s var(--e-out); }
.allocnote div:hover dd, .back__caps > div:hover dd { color: var(--neon); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .gate__coin, .gate__mark, .gate__chain { transform: none !important; opacity: 1 !important; }
  [data-depth], [data-depth-scale], [data-tilt] { transform: none !important; }
  .tk__coin--spin img { animation: none; }
  .net .n-link { stroke-dashoffset: 0; }
}