/* Macher — shared finish & motion layer.
   Additive on top of each page's inline styles: film grain, scroll progress,
   ghost type bands, reveal variants, CTA shine, card pointer-glow, hero
   stagger, related-links row. Everything decorative collapses under
   prefers-reduced-motion. */

/* Never let decorative width leak into the mobile layout viewport. */
html { overflow-x: clip; }

/* ---- film grain + scroll progress (injected by motion.js) ---- */
.grain {
  position: fixed; inset: -50%; z-index: 80; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70;
  background: linear-gradient(90deg, #6C95FF, #B06CFF, #FF2E97);
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* ---- ghost type bands ---- */
.gband {
  position: relative; z-index: 0; overflow: clip; pointer-events: none; user-select: none;
  padding: clamp(34px, 7vh, 70px) 0 0; margin-bottom: clamp(-16px, -2vh, -30px);
}
.gband-track {
  white-space: nowrap; will-change: transform;
  font-size: clamp(72px, 13vw, 170px); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.13);
}
.gband-track .solid { -webkit-text-stroke: 0; color: rgba(108,149,255,.16); }

/* ---- reveal variants (base .reveal lives in each page) ---- */
.reveal.reveal-l { transform: translateX(-34px); }
.reveal.reveal-r { transform: translateX(34px); }
.reveal.reveal-z { transform: scale(.94); }
.reveal.reveal-l.in, .reveal.reveal-r.in, .reveal.reveal-z.in { transform: none; }

/* ---- CTA shine + magnetic base ---- */
.cta, .spin {
  position: relative; overflow: clip; will-change: transform;
}
.cta::after, .spin::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 44%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  left: 0; transform: translateX(-160%) skewX(-18deg); pointer-events: none;
}
.cta:hover::after, .spin:hover::after { transition: transform .7s ease; transform: translateX(340%) skewX(-18deg); }

/* ---- interactive cards: pointer glow + hover accent ---- */
.dcard, .game, .fact, .xlink, .xcard { position: relative; overflow: hidden; }
.dcard::after, .game::after, .fact::after, .xlink::after, .xcard::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(108,149,255,.13), transparent 70%);
  pointer-events: none;
}
.dcard:hover::after, .game:hover::after, .fact:hover::after, .xlink:hover::after, .xcard:hover::after { opacity: 1; }
.dcard:hover, .game:hover, .fact:hover, .xlink:hover, .xcard:hover { border-color: rgba(108,149,255,.4); }

/* ---- hero entrance stagger ---- */
@keyframes mrise {
  from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
.hero > * { animation: mrise .9s cubic-bezier(.16,1,.3,1) both; }
.hero > :nth-child(1) { animation-delay: .05s; }
.hero > :nth-child(2) { animation-delay: .16s; }
.hero > :nth-child(3) { animation-delay: .28s; }
.hero > :nth-child(4) { animation-delay: .38s; }
.hero + .wheel-wrap { animation: mrise 1s cubic-bezier(.16,1,.3,1) .3s both; }

/* ---- word scrub (data-scrub, split by motion.js) ---- */
[data-scrub] .w { color: rgba(255,255,255,.16); transition: color .35s ease; }
[data-scrub] .w.on { color: #fff; }

/* ---- related-links row ---- */
.xrow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px;
  margin-top: clamp(40px, 8vh, 70px);
}
.xcard {
  display: block; text-decoration: none; color: inherit;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px; padding: 20px;
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.xcard:hover { transform: translateY(-3px); }
.xcard .xk { font-size: 11px; font-weight: 800; letter-spacing: 1.8px; color: #6C95FF; }
.xcard h3 { font-size: 16.5px; font-weight: 800; letter-spacing: -.015em; margin: 8px 0 5px; color: #fff; }
.xcard p { font-size: 13.5px; color: rgba(255,255,255,.62); line-height: 1.55; }
.xcard .xa { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 800; color: #6C95FF; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.xcard:hover .xa { transform: translateX(4px); }

/* ---- reduced motion: decoration collapses, content stays ---- */
@media (prefers-reduced-motion: reduce) {
  .progress { display: none; }
  .gband-track { transform: none !important; }
  .hero > *, .hero + .wheel-wrap { animation: none !important; }
  .cta::after, .spin::after { display: none; }
  [data-scrub] .w { color: inherit !important; transition: none; }
  .xcard, .xcard .xa { transition: none; }
}