/*
 * /v12 "Holographic Control Deck" — MOTION layer.
 *
 * Byte-split per the web.dev pattern: this sheet ships with
 * media="(prefers-reduced-motion: no-preference)", so OS-level
 * reduced-motion users never download these bytes. The site's manual
 * toggle is covered by html[data-motion="off"] guards at the bottom —
 * the media attribute alone cannot see it.
 *
 * Everything here is compositor-only (transform/opacity). The glitch is
 * a re-expression of cyberpunk-css's graded model: layered chromatic
 * copies moved with transform steps(), NEVER the library's raw
 * text-shadow/filter keyframes (paint-heavy, photosensitivity risk).
 * Trigger-only, capped at level-2 intensity, per the anti-pattern list.
 */

/* ─── Deck boot-up: staggered reveal cascade ─────────────────────────────────
   Rides the existing .reveal → .in IntersectionObserver system; adds
   instrument-by-instrument sequencing so sections come online like a
   startup diagnostic instead of one uniform fade. */
.svc-rows .svc-row:nth-child(2) { transition-delay: 0.08s; }
.svc-rows .svc-row:nth-child(3) { transition-delay: 0.16s; }
.svc-rows .svc-row:nth-child(4) { transition-delay: 0.24s; }
.svc-rows .svc-row:nth-child(5) { transition-delay: 0.32s; }

.timeline .tl-item:nth-child(3) { transition-delay: 0.1s; }
.timeline .tl-item:nth-child(4) { transition-delay: 0.2s; }
.timeline .tl-item:nth-child(5) { transition-delay: 0.3s; }

.contact-grid .chan:nth-child(2) { transition-delay: 0.08s; }
.contact-grid .chan:nth-child(3) { transition-delay: 0.16s; }
.contact-grid .chan:nth-child(4) { transition-delay: 0.24s; }

/* ─── Corner brackets snap in when their panel comes online ───────────────── */
.reveal .v12-brkt {
  opacity: 0;
  transform: scale(0.4);
}

.reveal .v12-brkt[data-c='tl'] { transform-origin: 0 0; }
.reveal .v12-brkt[data-c='tr'] { transform-origin: 100% 0; }
.reveal .v12-brkt[data-c='bl'] { transform-origin: 0 100%; }
.reveal .v12-brkt[data-c='br'] { transform-origin: 100% 100%; }

.reveal.in .v12-brkt {
  opacity: 0.85;
  transform: scale(1);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.2),
    opacity 0.25s ease;
}

.reveal.in .v12-brkt[data-c='tr'] { transition-delay: 0.07s; }
.reveal.in .v12-brkt[data-c='bl'] { transition-delay: 0.12s; }
.reveal.in .v12-brkt[data-c='br'] { transition-delay: 0.18s; }

/* Brackets on non-reveal hosts render complete (no transition) — covered by
   the base-layer defaults. */

/* ─── Terminal boots itself (termynal pattern, line-grained) ─────────────────
   home-deck.js wraps prerendered lines in .v12-tline and locks the
   container's min-height first — no reflow, exact static fallback. */
.term-body.v12-armed .v12-tline {
  opacity: 0;
  transform: translateY(3px);
}

.term-body.v12-armed .v12-tline.on {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.16s ease-out,
    transform 0.16s ease-out;
}

@keyframes v12-caret-blink {
  0%, 55% { opacity: 0.9; }
  56%, 100% { opacity: 0; }
}

.v12-caret {
  animation: v12-caret-blink 0.9s steps(1) infinite;
}

/* (CTA glitch graduated to production — components.css provides it.) */

/* ─── PREVIEW: 3D card tilt (from v6) ────────────────────────────────────────
   Cards tilt toward the cursor while hovered. home-deck.js writes per-card
   --cx/--cy ∈ [-1,1]; without JS the calc()s collapse to production's plain
   translateY lift. Hover-only, so it never fights the reveal system. */
.case:hover {
  transform: perspective(1100px)
    rotateX(calc(var(--cy, 0) * -4deg))
    rotateY(calc(var(--cx, 0) * 5deg))
    translateY(-5px);
}

.chan:hover {
  transform: perspective(1100px)
    rotateX(calc(var(--cy, 0) * -3.5deg))
    rotateY(calc(var(--cx, 0) * 4.5deg))
    translateY(-4px);
}

/* Case dossier tag: one micro-jitter when the card is hovered. */
@keyframes v12-jitter {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(1px, -1px); }
  66%  { transform: translate(-1px, 1px); }
  100% { transform: translate(0, 0); }
}

.case:hover .case-id-tag {
  animation: v12-jitter 0.24s steps(3) 1;
}

/* (Hero → deck scroll docking graduated to production — components.css.) */

/* ─── Boot sequence: line reveals, progress, fade-out ──────────────────────── */
.v12-boot-lines span {
  opacity: 0;
  transform: translateY(3px);
}

.v12-boot-lines span.on {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.14s ease-out,
    transform 0.14s ease-out;
}

#v12BootFill {
  transition: transform 0.22s ease;
}

.v12-boot.done {
  display: grid; /* keep it in the tree for the fade… */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease 0.1s; /* …then JS removes the node */
}

/* ─── Fixed HUD frame: fade as it anti-phases the headroom header ──────────── */
.v12-hud {
  transition: opacity 0.45s ease;
}

/* ─── Manual toggle parity: html[data-motion="off"] kills everything ──────── */
html[data-motion='off'] .svc-rows .svc-row,
html[data-motion='off'] .timeline .tl-item,
html[data-motion='off'] .contact-grid .chan,
html[data-motion='off'] .reveal.in .v12-brkt,
html[data-motion='off'] .v12-hud {
  transition-delay: 0s;
  transition: none;
}

html[data-motion='off'] .reveal .v12-brkt {
  opacity: 0.85;
  transform: none;
}

html[data-motion='off'] .v12-caret,
html[data-motion='off'] .case:hover .case-id-tag {
  animation: none;
}

html[data-motion='off'] .case:hover {
  transform: translateY(-5px);
}

html[data-motion='off'] .chan:hover {
  transform: translateY(-4px);
}