/* Norton-Gauss · Cinematic opening sequence
   ─────────────────────────────────────────────────────────────
   In-place ignition: the page loads dark, the hero neural mesh
   ignites in its own spot, then the nav, headline and marquee
   reveal around it. Driven by src/opening.js (GSAP). All hidden
   states are scoped to body.ng-opening so a repeat-session visit
   (no class added) renders normally with zero side effects. */

/* ── Hidden start states (only while the opening is staged) ──── */
body.ng-opening .nav {
  opacity: 0;
  transform: translateY(-110%);
  will-change: transform, opacity;
}
body.ng-opening .hero-l {
  opacity: 0;
  will-change: opacity, transform;
}
body.ng-opening .hero-marquee {
  opacity: 0;
}
/* Keep the page from scrolling mid-boot */
body.ng-opening {
  overflow: clip;
}

/* ── Chrome overlay ───────────────────────────────────────────
   A fixed HUD over the first screen: a faint vignette that lifts,
   a calibration ring framing the scene, a mono boot readout, and
   the skip control. Everything but the skip button is inert. */
.ng-open-chrome {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* Vignette — darkens the frame, then retracts */
.ng-open-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 90% at 62% 46%, transparent 30%, rgba(4, 10, 9, 0.55) 78%, rgba(4, 10, 9, 0.92) 100%);
  opacity: 1;
}

/* Calibration ring — HUD framing centered on the first screen */
.ng-open-ring {
  position: absolute;
  left: 62%;
  top: 46%;
  width: min(64vmin, 720px);
  height: min(64vmin, 720px);
  transform: translate(-50%, -50%);
  opacity: 0.85;
}
.ng-open-ring svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.ng-open-ring .ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}
.ng-open-ring .ring-draw {
  fill: none;
  stroke: var(--ng-lime, #D9FF35);
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0.55;
  transform-origin: center;
}
.ng-open-ring .ring-ticks {
  stroke: rgba(217, 255, 53, 0.45);
  stroke-width: 1;
}
.ng-open-ring .ring-crosshair {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
}

/* Boot readout — bottom-left, brand mono labels */
.ng-open-readout {
  position: absolute;
  left: var(--gutter, 48px);
  bottom: 56px;
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ng-ink-mute, #9aa6a2);
}
.ng-open-readout .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ng-lime, #D9FF35);
  box-shadow: 0 0 10px 1px rgba(217, 255, 53, 0.7);
  align-self: center;
  animation: ngOpenBlink 1s steps(2, end) infinite;
}
@keyframes ngOpenBlink { 50% { opacity: 0.25; } }
.ng-open-readout .status {
  color: var(--ng-ink, #eef2f0);
}
.ng-open-readout .pct {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--ng-lime, #D9FF35);
}

/* Skip control — bottom-right, subtle until hover */
.ng-open-skip {
  position: absolute;
  right: var(--gutter, 48px);
  bottom: 52px;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(8, 17, 15, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ng-ink-mute, #9aa6a2);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.ng-open-skip:hover {
  color: var(--ng-ink, #eef2f0);
  border-color: rgba(217, 255, 53, 0.5);
  background: rgba(8, 17, 15, 0.7);
}
.ng-open-skip .arrow { transition: transform 0.18s; }
.ng-open-skip:hover .arrow { transform: translateX(3px); }

@media (max-width: 720px) {
  .ng-open-ring { left: 50%; top: 42%; width: 78vmin; height: 78vmin; }
  .ng-open-readout { left: 24px; bottom: 40px; gap: 12px; }
  .ng-open-skip { right: 24px; bottom: 38px; }
}