/* ============================================================
   Cipherverse — effects.css  ·  the motion system
   Techniques (site-wide, reused): Decode Sequence · scroll reveal ·
   keyline hover · one sticky-pin (Process) · pixel-grid hero canvas.
   Restraint by design — no scroll-video, no 3D. Reduced-motion honored.
   ============================================================ */

/* ── The Decode Sequence (signature) ───────────────────── */
/* JS swaps characters scramble→resolve; text is real in the DOM for no-JS. */
.decode { display: inline-block; }
.decode.is-decoding { color: var(--lime); }
.hero-title .decode.is-decoding { color: inherit; }

/* ── Scroll reveal + stagger ───────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--tr-slow), transform var(--tr-slow); }
.reveal.visible { opacity: 1; transform: none; }
.stagger-parent .stagger-child { opacity: 0; transform: translateY(18px); transition: opacity var(--tr-slow), transform var(--tr-slow); }
.stagger-parent.visible .stagger-child { opacity: 1; transform: none; }
.stagger-parent.visible .stagger-child:nth-child(1) { transition-delay: 0.04s; }
.stagger-parent.visible .stagger-child:nth-child(2) { transition-delay: 0.10s; }
.stagger-parent.visible .stagger-child:nth-child(3) { transition-delay: 0.16s; }
.stagger-parent.visible .stagger-child:nth-child(4) { transition-delay: 0.22s; }
.stagger-parent.visible .stagger-child:nth-child(5) { transition-delay: 0.28s; }
.stagger-parent.visible .stagger-child:nth-child(6) { transition-delay: 0.34s; }
.stagger-parent.visible .stagger-child:nth-child(7) { transition-delay: 0.40s; }

/* ── Keyline hover (terminal-focus feel) ───────────────── */
.keyline-hover { position: relative; }
.keyline-hover::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: var(--lime); transform: scaleX(0); transform-origin: left;
  transition: transform var(--tr);
}
.keyline-hover:hover::after, .keyline-hover:focus-visible::after { transform: scaleX(1); }

/* Card keyline: a lime corner-bracket that draws in on hover */
.kl-card { position: relative; transition: border-color var(--tr), background var(--tr); }
.kl-card::before, .kl-card::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  opacity: 0; transition: opacity var(--tr);
}
.kl-card::before { top: -1px; left: -1px; border-top: 2px solid var(--lime); border-left: 2px solid var(--lime); }
.kl-card::after  { bottom: -1px; right: -1px; border-bottom: 2px solid var(--lime); border-right: 2px solid var(--lime); }
.kl-card:hover::before, .kl-card:hover::after, .kl-card:focus-within::before, .kl-card:focus-within::after { opacity: 1; }

/* ── Pixel-grid hero canvas ────────────────────────────── */
.hero-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.55; }
.hero-canvas[hidden] { display: none; }

/* ── Sticky-pin (Process page only) ────────────────────── */
.pin { position: relative; }
.pin-stage { position: sticky; top: 12vh; }
.pin-steps { display: grid; gap: 40vh; }
.pin-step { min-height: 20vh; opacity: 0.32; transition: opacity var(--tr); }
.pin-step.is-current { opacity: 1; }

/* ── Counter (numbers animate up) ──────────────────────── */
.count { font-variant-numeric: tabular-nums; }

/* ── Reduced motion — flatten everything ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger-parent .stagger-child { opacity: 1 !important; transform: none !important; transition: none !important; }
  .decode.is-decoding { color: inherit; }
  .keyline-hover::after { transition: none; }
  .hero-canvas { display: none !important; }
  .pin-step { opacity: 1; }
}

/* No-JS fallback: never hide content behind a class that JS would reveal. */
.no-js .reveal, .no-js .stagger-parent .stagger-child { opacity: 1; transform: none; }