/*
 * /v12 "Holographic Control Deck" — STATIC layer (no keyframes here).
 *
 * Loaded only on the /v12 concept demo, layered over tokens.css +
 * components.css. All animation lives in home-deck-motion.css, which is
 * byte-split behind media="(prefers-reduced-motion: no-preference)".
 *
 * Research: docs/superpowers/specs/2026-06-10-cyberpunk-wow-research.md
 * Governing rule (CP2077 UI Art Bible): one sub-style — Neo-Militarism
 * instrument chrome. Every effect must read as deck instrumentation.
 *
 * Ported techniques (no dependencies added):
 *   - corner-cut panel silhouettes ............ augmented-ui (clip-path, 100% CSS)
 *   - scanlines / static noise overlays ....... CYBERCORE CSS patterns
 *   - curved HUD chrome (static perspective) .. CP2077's shader-curved HUD
 *   - Oxanium readout typeface ................ cyberpunk-css CP2077 type stack
 */

/* ─── CP2077 readout typeface — instrument chrome only, brand type untouched ─ */
.readout,
.term-body,
.lbl-idx,
.case-id,
.chan-id,
.tl-id,
.vlab-bar-sig,
.faq-idx,
.tcard-rx span {
  font-family: 'Oxanium', var(--f-mono);
  letter-spacing: 0.06em;
}

/* ─── Angular corner-cut silhouettes (augmented-ui technique) ────────────────
   Two opposing 45° cuts kill the rounded web-card softness. Applied only to
   panels whose existing chrome doesn't paint exact-corner pseudo decorations,
   so nothing of the production Control Deck pass is clipped away. */
.term-block .term,
.vlab-panel,
.startup-callout,
.faq-acc-item,
.hero-glass {
  --cut: 16px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );
  border-radius: 0;
}

.hero-glass { --cut: 22px; }
.faq-acc-item { --cut: 10px; }

/* Cases + founder portrait: square the corners but do NOT clip — their
   straight chrome (case-id titlebar, home-deck.js corner brackets) fought
   the radius, while their outward hover/portrait glows must survive
   (clip-path would crop them). Home-scoped here on purpose: about.ts and
   the case pages reuse these classes without the deck's angular context. */
.case,
.portrait {
  border-radius: 0;
}

/* The portrait's overflow:hidden (components.css) clips at the padding box,
   shaving the -1px-offset corner brackets down to a half line. Square-
   cornered on home nothing inside the portrait overflows anyway, so let
   the brackets straddle the 1px border as designed. */
.portrait {
  overflow: visible;
}

/* Slimmer founder column — ~294px at --maxw renders the 299px-native
   portrait at 1:1 instead of upscaled. Desktop only: below 881px
   components.css collapses .founder to a single column. */
@media (min-width: 881px) {
  .founder {
    grid-template-columns: 0.55fr 1.45fr;
  }
}

/* Cut-edge hairlines — the clip slices the 1px border off each 45° cut;
   these corner-anchored gradient strips repaint it, measured off the same
   --cut the polygon uses (same primitive as the tcard/toolkit family in
   components.css). */
.term-block .term,
.vlab-panel,
.startup-callout,
.faq-acc-item,
.hero-glass {
  background-origin: border-box;
  background-image:
    linear-gradient(225deg,
      var(--cut-line-tr, var(--cut-line, var(--bg-border))) calc(var(--cut) * .708 + 1px),
      transparent calc(var(--cut) * .708 + 1px)),
    linear-gradient(45deg,
      var(--cut-line-bl, var(--cut-line, var(--bg-border))) calc(var(--cut) * .708 + 1px),
      transparent calc(var(--cut) * .708 + 1px));
}

/* Bright gradient-hairline panels: tint each diagonal toward the frame's
   local colour — aqua end at top-right, magenta end at bottom-left. */
.term-block .term,
.vlab-panel {
  --cut-line-tr: var(--aqua-dim);
  --cut-line-bl: var(--magenta-dim);
}

/* FAQ items retint their straight border on hover/open — diagonals follow. */
.faq-acc-item:hover,
.faq-acc-item[open] {
  --cut-line: var(--aqua-dim);
}

/* The hero's edge is its aqua hairline ring, but the clip eats outward
   shadows (ring, bloom and depth all painted outside the border box) — so
   the ring moves inset, and the diagonals match it. */
.hero-glass {
  --cut-line: var(--aqua-glow);
  box-shadow: inset 0 0 0 1px var(--aqua-glow);
}

/* ─── Screens read as screens: CRT scanlines + static grain ──────────────────
   CYBERCORE cyber-scanlines / cyber-noise, re-expressed as fully static
   background layers (zero JS, zero animation — nothing to gate). */
.term-block .term-body,
#reelMedia {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      rgba(0, 0, 0, 0.16) 2px 3px
    );
}

/* The terminal body is mutated by JS (line wrapping). Opt it out of scroll
   anchoring so Chrome never "compensates" those mutations with a viewport
   jump. */
.term-block .term-body {
  overflow-anchor: none;
}

/* ─── Key visual = the art direction's anchor: hologram-treat it ─────────────
   webmakkers-contact.jpg (founder + floating wireframe browser) gets a
   projected-display frame: aqua edge bloom + scanline film. Pseudos verified
   free on .contact-photo. Corner brackets are injected by home-deck.js. */
.contact-photo {
  position: relative;
  border-radius: 0;
  overflow: hidden;
}

.contact-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px var(--aqua-glow),
    inset 0 0 42px rgba(69, 205, 236, 0.14);
}

.contact-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(7, 10, 28, 0.18) 3px 4px
  );
}

/* ─── Curved HUD chrome (CP2077: the HUD is shader-curved, never flat) ───────
   Static perspective tilts ≤2°: not motion, inherently reduced-motion safe.
   Angles stay tiny so text remains crisp. home-deck-motion.css upgrades these
   to pointer-reactive curvature via --rx/--ry (JS-gated); the calc() default
   of 0 makes this rest pose identical without JS. */
.term-block .term {
  transform: perspective(1400px)
    rotateX(calc(1.2deg + var(--ry, 0) * 0.8deg))
    rotateY(calc(var(--rx, 0) * 1.2deg));
  transform-origin: 50% 60%;
}

.stats-band .wrap.stats {
  transform: perspective(1600px) rotateX(calc(1deg + var(--ry, 0) * 0.6deg));
}

.tcard-rx {
  transform: perspective(900px) rotateX(2deg);
  transform-origin: 50% 100%;
}

/* Zigzag service motifs bow toward the page axis like instruments on a deck. */
.svc-row:nth-child(odd) .svc-motif {
  transform: perspective(1400px) rotateY(calc(-1.5deg + var(--rx, 0) * 1deg));
}
.svc-row:nth-child(even) .svc-motif {
  transform: perspective(1400px) rotateY(calc(1.5deg + var(--rx, 0) * 1deg));
}

/* ─── JS-injected corner brackets (Arwes frames idea, markup-safe) ───────────
   <i class="v12-brkt" data-c="tl|tr|bl|br"> — four per framed element.
   Rendered complete by default; the motion sheet adds the snap-in. */
.v12-brkt {
  position: absolute;
  width: 18px;
  height: 18px;
  z-index: 2;
  pointer-events: none;
  border: 0 solid var(--aqua);
  opacity: 0.85;
}

.v12-brkt[data-c='tl'] { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.v12-brkt[data-c='tr'] { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.v12-brkt[data-c='bl'] { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.v12-brkt[data-c='br'] { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

.portrait {
  position: relative;
}

/* ─── Terminal sequencer chrome (termynal HTML-first pattern) ────────────────
   Lines are wrapped by home-deck.js at runtime; without JS the prerendered
   block is untouched. Static layer only positions the caret. */
.v12-tline {
  display: inline;
}

.v12-caret {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--aqua);
  opacity: 0.9;
}

/* (Hero hologram canvas + CTA glitch layers graduated to production —
   components.css .holo-canvas/.holo-live/.glitch-copy apply here too.) */

/* ─── Boot-sequence overlay (JS-only: ships hidden; PRM users never see it) ── */
.v12-boot {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  background: var(--glass-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.v12-boot-card {
  width: min(430px, 86vw);
  padding: 24px 28px;
  background: var(--glass);
  border: 1px solid var(--bg-border);
  --cut: 14px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );
  font-family: 'Oxanium', var(--f-mono);
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    rgba(0, 0, 0, 0.12) 2px 3px
  );
}

.v12-boot-sig {
  color: var(--aqua);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.v12-boot-lines {
  display: block;
  margin: 14px 0 12px;
  min-height: 102px;
  font-size: 12.5px;
  line-height: 1.6;
}

.v12-boot-lines span {
  display: block;
  color: var(--text-dim, currentColor);
}

.v12-boot-lines b {
  color: var(--success, var(--aqua));
  font-weight: 600;
}

.v12-boot-bar {
  display: block;
  height: 3px;
  background: var(--aqua-glow);
  overflow: hidden;
}

#v12BootFill {
  display: block;
  height: 100%;
  background: var(--aqua);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}

.v12-boot-skip {
  display: block;
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-dim, currentColor);
  text-transform: uppercase;
}

.v12-boot.done {
  display: none; /* motion sheet upgrades this to a fade-out */
}

/* (Headroom header, hero hologram, hero docking + CTA glitch graduated to
   production — components.css + main.ts/holo-hero.ts provide them here too.) */

/* ─── Fixed viewport HUD frame (desktop only, purely decorative) ─────────────
   Anti-phased with the headroom header: main.ts mirrors the header state to
   html.hdr-away, and the frame engages only while the header is hidden
   (scrolling down) — the two never overlap. PRM / data-motion=off / no-JS
   never set the class, so the frame stays off there. */
.v12-hud {
  display: none;
}

@media (min-width: 1100px) {
  .v12-hud {
    display: block;
    position: fixed;
    inset: 10px 14px;
    z-index: 70;
    pointer-events: none;
    opacity: 0;
  }

  :root.hdr-away .v12-hud {
    opacity: 1;
  }
}

.v12-hud-c {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 0 solid var(--aqua-dim);
  opacity: 0.55;
}

.v12-hud-c[data-c='tl'] { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.v12-hud-c[data-c='tr'] { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.v12-hud-c[data-c='bl'] { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.v12-hud-c[data-c='br'] { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.v12-hud-ro {
  position: absolute;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-dim, currentColor);
  opacity: 0.85;
}

.v12-hud-ro b {
  color: var(--aqua);
  font-weight: 600;
}

.v12-hud-ro--br { bottom: 4px; right: 38px; }

/* ─── PREVIEW: gems adopted from the v2–v10 demo review ──────────────────────
   1. Scroll progress bar (from v2/v4): thin instrument line under the
      viewport top edge; JS injects it and writes --prog (motionOk-gated),
      so no-JS/PRM pages simply never show it (scaleX(0) + never injected). */
.v12-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 130;
  background: linear-gradient(90deg, var(--aqua), var(--magenta));
  box-shadow: 0 0 12px var(--aqua-glow);
  transform-origin: 0 50%;
  transform: scaleX(var(--prog, 0));
  opacity: 0.9;
  pointer-events: none;
}

/* 2. Scanner-lens cursor (from v8): the existing custom cursor ring becomes
      a scan lens with 4 crosshair ticks. Ticks hide in the .big interactive
      state so links/buttons keep the clean enlarged ring. */
.cur {
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-color: var(--aqua-dim);
}

.cur::before,
.cur::after {
  content: '';
  position: absolute;
  background: var(--aqua);
  transition: opacity 0.2s;
}

.cur::before {
  left: 50%;
  top: -7px;
  width: 1.5px;
  height: 6px;
  transform: translateX(-50%);
  box-shadow: 0 50px 0 var(--aqua);
}

.cur::after {
  top: 50%;
  left: -7px;
  width: 6px;
  height: 1.5px;
  transform: translateY(-50%);
  box-shadow: 50px 0 0 var(--aqua);
}

.cur.big::before,
.cur.big::after {
  opacity: 0;
}

/* ─── Runtime motion-off parity ──────────────────────────────────────────────
   Zero the pointer vars at the root so the curvature calc()s collapse to
   their static rest pose even if a listener fires once more mid-toggle. */
html[data-motion='off'] {
  --rx: 0;
  --ry: 0;
}

html[data-motion='off'] .v12-progress {
  display: none;
}