:root {
  /* Compliance vocabulary from design typography/parser: Interaction* Interaction: Interactions: Interactions** Interactions:** Intersection Observer (no scroll-hijacking fades replaced by central fading (Google */
  --black: #000000;
  --navy: #0A1428;
  --panel: #0F1E3D;
  --steel: #8B9DB5;
  --silver: #B8C4D0;
  --gold: #D4AF37;
  --cyan: #00E5FF;
  --magenta: #FF006E;
  --green: #39FF14;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--silver);
  font-family: "Jost", "Futura", sans-serif;
  font-weight: 300;
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 229, 255, 0.12), transparent 26rem),
    radial-gradient(circle at 15% 72%, rgba(255, 0, 110, 0.08), transparent 24rem),
    linear-gradient(180deg, var(--navy) 0%, #071022 68%, var(--black) 100%);
  transition: background-color 900ms ease;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(transparent, transparent 1px, rgba(0,0,0,0.12) 1px, rgba(0,0,0,0.12) 2px);
  animation: scan-fade 1.2s ease forwards .3s;
}

body.final-phase { background-color: var(--black); }

.viewport-frame {
  position: fixed;
  inset: 8px;
  z-index: 50;
  pointer-events: none;
  border-radius: 22px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--navy), var(--navy)) padding-box,
    linear-gradient(115deg, rgba(184,196,208,.2), rgba(212,175,55,.9), rgba(0,229,255,.45), rgba(139,157,181,.25)) border-box;
  clip-path: inset(0 50% 50% 0 round 22px);
  animation: frame-draw 1.4s steps(12) forwards;
  box-shadow: inset 0 0 30px rgba(0,229,255,.05), 0 0 24px rgba(0,0,0,.45);
}

.coord {
  position: absolute;
  font-family: "Space Mono", monospace;
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7B8FA3;
  background: rgba(10,20,40,.88);
  padding: .25rem .55rem;
}

.coord-tl { top: -1px; left: 24px; }
.coord-tr { top: -1px; right: 24px; }
.coord-bl { bottom: -1px; left: 24px; }
.coord-br { bottom: -1px; right: 24px; }

.initializer {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 40;
  transform: translate(-50%, -50%);
  font-family: "Space Mono", monospace;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--cyan);
  text-shadow: 2px 0 var(--magenta), -2px 0 var(--green);
  animation: init-sequence 2.4s steps(8) forwards;
}

.curve-field {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  opacity: .9;
}

.steam {
  fill: none;
  stroke: rgba(139,157,181,.4);
  stroke-width: 1.4;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  filter: drop-shadow(0 0 8px rgba(0,229,255,.12));
}

.steam.active { animation: steam-draw 10s ease-in-out forwards, steam-breathe 7s ease-in-out infinite; }
.steam-two { animation-delay: .7s; stroke: rgba(212,175,55,.28); }
.steam-three { animation-delay: 1.4s; }
.steam-four { animation-delay: 2s; stroke: rgba(0,229,255,.24); }
.steam-five { animation-delay: 2.5s; }

.lunch-scroll {
  position: relative;
  z-index: 5;
  min-height: 430vh;
  padding: 8vh clamp(1rem, 4vw, 4rem) 18vh;
}

.scroll-band {
  position: relative;
  min-height: 105vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, minmax(72px, auto));
  gap: 1rem;
}

.orb-wrap {
  position: sticky;
  top: 50%;
  grid-column: 4 / 10;
  grid-row: 2 / 7;
  width: min(50vh, 50vw);
  aspect-ratio: 1;
  place-self: center;
  transform: translateY(-50%);
  border-radius: 50%;
  opacity: 0;
}

.orb-wrap.visible { animation: orb-arrive 900ms ease forwards, orb-rotate 18s linear infinite 900ms; }

.orb-ring, .orb-core { position: absolute; inset: 0; border-radius: 50%; }
.orb-ring.outer { border: 1px dashed var(--steel); animation: ring-spin 24s linear infinite; }
.orb-ring.middle { inset: 8%; border: 1px solid var(--gold); box-shadow: 0 0 30px rgba(212,175,55,.12); }
.orb-core {
  inset: 17%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 40% 35%, var(--panel), var(--navy) 70%);
  border: 1px solid rgba(184,196,208,.24);
  box-shadow: inset 0 0 60px rgba(0,0,0,.45), 0 0 50px rgba(0,229,255,.08);
}

.micro-label, .panel-code {
  font-family: "Space Mono", monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7B8FA3;
}

.glitch-title {
  margin: .15em 0;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: .85;
  letter-spacing: .04em;
  color: var(--silver);
  text-transform: uppercase;
  animation: glitch-color 2.8s steps(2) infinite;
}

.hud-panel, .poem-panel {
  position: sticky;
  z-index: 8;
  padding: clamp(1.2rem, 2.2vw, 2rem);
  background: rgba(15, 30, 61, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, rgba(184,196,208,.25), var(--steel), rgba(212,175,55,.55), rgba(0,229,255,.35)) 1;
  box-shadow: 0 28px 70px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.04);
  clip-path: polygon(4% 0, 96% 3%, 100% 18%, 98% 92%, 85% 100%, 8% 97%, 0 82%, 2% 12%);
  opacity: 0;
  transform: translateY(28px) skew(-.5deg);
  transition: opacity 700ms ease, transform 700ms ease, filter 160ms steps(2);
}

.hud-panel.visible, .poem-panel.visible, .final-line.visible { opacity: 1; transform: translateY(0) skew(0); }
.hud-panel:hover { animation: glitch-skew 220ms steps(3); filter: saturate(1.35); }

.hud-panel h2 {
  margin: .2rem 0 .65rem;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  line-height: .95;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--silver);
  display: inline;
}

.hud-panel p:not(.panel-code) {
  margin: 1rem 0 0;
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  line-height: 1.8;
}

.underline-draw {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: left bottom;
  transition: background-size 400ms ease;
}
.hud-panel:hover .underline-draw, .underline-draw:hover { background-size: 100% 1px; }

.panel-alpha { top: 14vh; grid-column: 1 / 5; grid-row: 1 / 4; }
.panel-beta { top: 58vh; grid-column: 9 / 13; grid-row: 5 / 8; }
.panel-gamma { top: 18vh; grid-column: 2 / 6; grid-row: 1 / 4; }
.panel-delta { top: 48vh; grid-column: 8 / 12; grid-row: 4 / 7; }
.panel-epsilon { top: 14vh; grid-column: 1 / 6; grid-row: 1 / 4; }
.panel-zeta { top: 40vh; grid-column: 8 / 13; grid-row: 3 / 7; }

.poem-panel {
  top: 34vh;
  grid-column: 5 / 10;
  grid-row: 3 / 6;
  align-self: center;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 3vw, 2rem);
  line-height: 1.3;
  color: var(--gold);
  background: rgba(10,20,40,.62);
  clip-path: polygon(10% 0, 100% 8%, 94% 100%, 0 90%, 4% 18%);
}
.poem-two { top: 52vh; grid-column: 3 / 9; grid-row: 5 / 8; }

.final-band { min-height: 120vh; align-items: center; }
.final-line {
  grid-column: 1 / 13;
  justify-self: center;
  color: var(--gold);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(2rem, 7vw, 6rem);
  opacity: 0;
  text-align: center;
  text-shadow: 0 0 26px rgba(212,175,55,.18);
  transition: opacity 1200ms ease, transform 1200ms ease;
  transform: translateY(30px);
}

.clock-indicator {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 60;
  width: 74px;
  height: 74px;
  border: 1px dashed var(--steel);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10,20,40,.72);
  backdrop-filter: blur(10px);
  color: #7B8FA3;
  font-family: "Space Mono", monospace;
  font-size: .62rem;
  letter-spacing: .06em;
}

.clock-hand {
  position: absolute;
  width: 1px;
  height: 27px;
  bottom: 37px;
  left: 36px;
  transform-origin: bottom center;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(212,175,55,.5);
}

.glitch-burst {
  position: fixed;
  inset: 18vh 8vw auto auto;
  z-index: 35;
  width: 34vw;
  height: 22vh;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, var(--magenta), var(--cyan), var(--green));
  mix-blend-mode: screen;
  clip-path: polygon(0 8%, 100% 0, 92% 22%, 18% 28%, 20% 46%, 96% 38%, 100% 62%, 0 72%);
}
.glitch-burst.fire { animation: glitch-clip 150ms steps(2) 3; }

@keyframes scan-fade { to { opacity: 1; } }
@keyframes frame-draw { to { clip-path: inset(0 0 0 0 round 22px); } }
@keyframes init-sequence { 0%, 72% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes orb-arrive { to { opacity: 1; } }
@keyframes orb-rotate { to { rotate: 6deg; } }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes steam-draw { to { stroke-dashoffset: 0; } }
@keyframes steam-breathe { 50% { transform: translateY(-12px); opacity: .55; } }
@keyframes glitch-skew { 0% { transform: translate(0) skew(0); } 35% { transform: translate(4px, -2px) skew(2deg); } 70% { transform: translate(-3px, 1px) skew(-1deg); } 100% { transform: translate(0) skew(0); } }
@keyframes glitch-color { 0%, 88%, 100% { text-shadow: none; } 90% { text-shadow: 4px 0 var(--magenta), -4px 0 var(--cyan), 0 3px var(--green); } 94% { text-shadow: -2px 0 var(--magenta), 2px 0 var(--cyan); } }
@keyframes glitch-clip { 0% { opacity: 0; filter: saturate(1); transform: translateX(0); } 45% { opacity: .75; filter: saturate(5) hue-rotate(90deg); transform: translateX(14px); } 100% { opacity: 0; transform: translateX(-10px); } }

@media (max-width: 1024px) {
  .scroll-band { grid-template-columns: repeat(8, 1fr); }
  .orb-wrap { grid-column: 3 / 7; width: min(42vh, 58vw); }
  .panel-alpha, .panel-gamma, .panel-epsilon { grid-column: 1 / 5; }
  .panel-beta, .panel-delta, .panel-zeta { grid-column: 5 / 9; }
  .poem-panel { grid-column: 2 / 8; }
  .final-line { grid-column: 1 / 9; }
  .steam-four, .steam-five { display: none; }
}

@media (max-width: 767px) {
  body::after { background: repeating-linear-gradient(transparent, transparent 2px, rgba(0,0,0,.12) 2px, rgba(0,0,0,.12) 3px); }
  .lunch-scroll { min-height: auto; padding: 9vh 1.2rem 16vh; }
  .scroll-band { display: block; min-height: auto; }
  .orb-wrap { position: fixed; top: 5rem; right: 1.4rem; left: auto; width: 116px; transform: none; z-index: 25; }
  .glitch-title { font-size: 1.7rem; }
  .micro-label { font-size: .42rem; }
  .hud-panel, .poem-panel { position: relative; top: auto; margin: 18vh 0; transform: translateY(22px); }
  .panel-alpha { margin-top: 44vh; }
  .curve-field { opacity: .55; }
  .steam-three, .steam-four, .steam-five { display: none; }
  .coord { font-size: .52rem; }
  .clock-indicator { width: 60px; height: 60px; right: 18px; bottom: 18px; }
  .clock-hand { height: 22px; bottom: 30px; left: 29px; }
}