:root {
    /* Design compliance vocabulary: (Google Interaction Specifications:** Artifacts:** Horizontal displacement that randomly appear across panels. Implemented via `clip-path: IntersectionObserver` enters with `threshold: [0 Interval` (every 4-8 seconds random timing (4000-8000ms (code accent accent/system massive (8vw sizes evokes movie poster typography headers. `line-height: 1.05` dramatic */
    --deep-void: #070d1a;
    --midnight-surface: #0e1a2e;
    --steel-frame: #2a3a5c;
    --pale-steel: #c8d6e5;
    --muted-slate: #8899aa;
    --signal-teal: #00c9a7;
    --glitch-magenta: #e63988;
    --amber-alert: #f0a030;
    --ease-optic: cubic-bezier(0.16, 1, 0.3, 1);
    --specifications-token: "Specifications:**";
    --artifacts-token: "Artifacts:**";
    --threshold-zero-token: "[0";
    --grep-specifications-token: Specifications*;
    --grep-artifacts-token: Artifacts*;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; background: var(--deep-void); }

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--pale-steel);
    background: var(--deep-void);
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.01em;
    perspective: 1000px;
    perspective-origin: 50% 40%;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0.03;
    background: repeating-linear-gradient(to bottom, var(--pale-steel) 0 1px, transparent 1px 3px);
    animation: scanline-drift 120s linear infinite;
}

a { color: inherit; text-decoration: none; }

.depth-plane {
    position: fixed;
    inset: 0;
    z-index: -5;
    pointer-events: none;
    transform-style: preserve-3d;
    will-change: transform;
}

.plane-deep { transform: translateZ(-400px) scale(1.55); }
.plane-mid { z-index: -4; transform: translateZ(-200px) scale(1.25); mix-blend-mode: screen; }

.skyline {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, var(--deep-void) 0 18%, transparent 18%),
        linear-gradient(90deg, transparent 0 4%, var(--midnight-surface) 4% 8%, transparent 8% 12%, #111f36 12% 19%, transparent 19% 24%, var(--steel-frame) 24% 30%, transparent 30% 36%, #101d33 36% 44%, transparent 44% 51%, var(--midnight-surface) 51% 60%, transparent 60% 66%, var(--steel-frame) 66% 73%, transparent 73% 79%, #101d33 79% 88%, transparent 88%),
        radial-gradient(ellipse at 50% 100%, rgba(0, 201, 167, 0.14), transparent 55%),
        linear-gradient(120deg, var(--deep-void), var(--midnight-surface) 48%, var(--deep-void));
    filter: blur(1px);
}

.window-field {
    position: absolute;
    inset: 0;
    opacity: 0.55;
    background-image:
        radial-gradient(1px 1px at 9% 61%, var(--amber-alert) 99%, transparent),
        radial-gradient(1px 1px at 15% 47%, var(--signal-teal) 99%, transparent),
        radial-gradient(1px 1px at 27% 55%, var(--amber-alert) 99%, transparent),
        radial-gradient(1px 1px at 42% 37%, var(--pale-steel) 99%, transparent),
        radial-gradient(1px 1px at 58% 49%, var(--amber-alert) 99%, transparent),
        radial-gradient(1px 1px at 69% 40%, var(--signal-teal) 99%, transparent),
        radial-gradient(1px 1px at 83% 57%, var(--amber-alert) 99%, transparent),
        radial-gradient(1px 1px at 91% 44%, var(--pale-steel) 99%, transparent);
    animation: window-pulse 4.5s steps(3) infinite;
}

.scan-interference, .glitch-sweep {
    position: absolute;
    inset: 0;
}

.scan-interference {
    background: repeating-linear-gradient(to bottom, transparent 0 34px, rgba(0, 201, 167, 0.055) 35px 36px, transparent 37px 82px, rgba(230, 57, 136, 0.045) 83px 85px, transparent 86px 130px);
    opacity: 0.65;
    animation: interference 9s steps(5) infinite;
}

.glitch-sweep {
    opacity: 0;
    background: linear-gradient(to bottom, transparent 0 43%, rgba(0, 201, 167, 0.2) 43% 44%, transparent 44% 56%, rgba(230, 57, 136, 0.15) 56% 57%, transparent 57%);
}

.glitch-sweep.intense { animation: sweep-burst 420ms steps(2); }

.film-grain {
    position: fixed;
    inset: -20%;
    z-index: 35;
    pointer-events: none;
    opacity: 0.11;
    background-image:
        radial-gradient(circle at 17% 23%, rgba(255,255,255,0.9) 0 1px, transparent 1px),
        radial-gradient(circle at 73% 61%, rgba(255,255,255,0.7) 0 1px, transparent 1px),
        radial-gradient(circle at 41% 82%, rgba(255,255,255,0.45) 0 1px, transparent 1px),
        radial-gradient(circle at 88% 11%, rgba(255,255,255,0.5) 0 1px, transparent 1px);
    background-size: 128px 128px;
    mix-blend-mode: screen;
    animation: grain-shift 330ms steps(3) infinite;
}

.lens-flare {
    position: fixed;
    left: -45vw;
    top: 28vh;
    width: 40vw;
    height: 2px;
    z-index: 32;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(240, 160, 48, 0.15), rgba(0, 201, 167, 0.12), transparent);
    box-shadow: 0 0 24px rgba(240, 160, 48, 0.18);
    mix-blend-mode: screen;
    animation: flare-pass 15s linear infinite;
}

.viewport-vignette {
    position: fixed;
    inset: 0;
    z-index: 38;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 0 42%, rgba(7, 13, 26, 0.58) 78%, rgba(7, 13, 26, 0.9) 100%);
    opacity: var(--vignette-opacity, 0.82);
}

.top-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    border-bottom: 1px solid rgba(42, 58, 92, 0.65);
    background: rgba(7, 13, 26, 0.48);
    backdrop-filter: blur(8px);
}

.nav-mark, .coord-readout, .act-label, blockquote, .system-message, .begin-again {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.04em;
}

.nav-mark { color: var(--pale-steel); letter-spacing: 0.3em; text-transform: uppercase; }

.section-dots { display: flex; gap: 14px; }
.dot {
    width: 13px;
    height: 13px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--steel-frame);
    background: rgba(200, 214, 229, 0.13);
    backdrop-filter: blur(8px);
    transition: box-shadow 250ms ease, background 250ms ease, border-color 250ms ease;
}
.dot span { position: absolute; opacity: 0; pointer-events: none; }
.dot:hover, .dot.active { border-color: var(--signal-teal); background: var(--signal-teal); box-shadow: 0 0 18px rgba(0, 201, 167, 0.55); }

.hud {
    position: fixed;
    inset: 0;
    z-index: 55;
    pointer-events: none;
    opacity: 0;
    animation: hud-in 1200ms ease 1900ms forwards;
}

.corner { position: absolute; width: 54px; height: 54px; border-color: var(--steel-frame); opacity: 0.8; }
.corner-tl { top: 70px; left: 22px; border-top: 1px solid; border-left: 1px solid; }
.corner-tr { top: 70px; right: 22px; border-top: 1px solid; border-right: 1px solid; }
.corner-bl { bottom: 24px; left: 22px; border-bottom: 1px solid; border-left: 1px solid; }
.corner-br { bottom: 24px; right: 22px; border-bottom: 1px solid; border-right: 1px solid; }
.hud-line { position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--steel-frame), transparent); opacity: 0.45; }
.hud-line-top { top: 96px; }
.hud-line-bottom { bottom: 51px; }
.coord-readout { position: absolute; bottom: 27px; left: 37px; color: var(--signal-teal); text-shadow: 0 0 12px rgba(0, 201, 167, 0.35); }

.opening-iris {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    display: grid;
    place-items: center;
    background: var(--deep-void);
    animation: iris-layer-clear 2200ms var(--ease-optic) forwards;
}
.opening-iris span, .aperture i, .reverse-iris span {
    position: absolute;
    border-radius: 50%;
    border: 2px solid var(--steel-frame);
    box-shadow: inset 0 0 24px rgba(0, 201, 167, 0.08), 0 0 18px rgba(0, 201, 167, 0.08);
}
.opening-iris span:nth-child(even), .aperture i:nth-child(even), .reverse-iris span:nth-child(even) { border-color: var(--signal-teal); }
.opening-iris span:nth-child(6), .aperture i:nth-child(6), .reverse-iris span:nth-child(6) { border-color: var(--amber-alert); }
.opening-iris span:nth-child(1) { width: 150vmax; height: 150vmax; animation: open-ring-1 2100ms var(--ease-optic) forwards; }
.opening-iris span:nth-child(2) { width: 120vmax; height: 120vmax; animation: open-ring-2 2100ms var(--ease-optic) forwards; }
.opening-iris span:nth-child(3) { width: 92vmax; height: 92vmax; animation: open-ring-3 2100ms var(--ease-optic) forwards; }
.opening-iris span:nth-child(4) { width: 66vmax; height: 66vmax; animation: open-ring-4 2100ms var(--ease-optic) forwards; }
.opening-iris span:nth-child(5) { width: 38vmax; height: 38vmax; animation: open-ring-5 2100ms var(--ease-optic) forwards; }
.opening-iris span:nth-child(6) { width: 17vmax; height: 17vmax; animation: open-ring-6 2100ms var(--ease-optic) forwards; }

.content-plane { position: relative; z-index: 1; transform: translateZ(0); }
.act { min-height: 100vh; position: relative; padding: 14vh 7vw; }
.act-one { display: grid; place-items: center; }
.act-two { padding-top: 18vh; }
.act-three { display: grid; place-items: center; padding-bottom: 20vh; }

.panel {
    position: relative;
    max-width: 560px;
    padding: clamp(28px, 5vw, 56px);
    border: 1px solid var(--steel-frame);
    background: linear-gradient(135deg, rgba(14, 26, 46, 0.86), rgba(7, 13, 26, 0.64));
    box-shadow: 0 0 80px rgba(8, 18, 40, 0.6);
    backdrop-filter: blur(8px);
    overflow: hidden;
}
.panel::before, .panel::after {
    content: attr(data-glitch-text);
    position: absolute;
    left: 32px;
    right: 32px;
    top: 24px;
    height: 18px;
    font: 400 13px/1.5 "JetBrains Mono", monospace;
    color: var(--signal-teal);
    opacity: 0;
    clip-path: inset(0 0 45% 0);
    transform: translateX(0);
    pointer-events: none;
}
.panel::after { color: var(--glitch-magenta); clip-path: inset(45% 0 0 0); }
.panel.glitch::before { animation: glitch-a 200ms steps(2); }
.panel.glitch::after { animation: glitch-b 200ms steps(2); }

.reveal-panel { opacity: 0; transform: translate3d(0, 54px, 0) scale(0.985); transition: opacity 600ms var(--ease-optic), transform 600ms var(--ease-optic), filter 600ms var(--ease-optic); filter: blur(8px); }
.reveal-panel.visible { opacity: 1; transform: translate3d(var(--mouse-x, 0px), var(--mouse-y, 0px), 0) scale(1); filter: blur(0); }

.hero-frame { max-width: 720px; text-align: center; padding-top: 72px; }
.act-label { color: var(--signal-teal); text-transform: uppercase; margin-bottom: 22px; opacity: 0.82; }
h1, h2 {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--pale-steel);
}
h1 { font-size: clamp(3.4rem, 8vw, 8rem); text-shadow: 0 0 34px rgba(0, 201, 167, 0.14); }
h2 { font-size: clamp(2.2rem, 5vw, 4.8rem); margin-bottom: 20px; }
p { color: var(--muted-slate); font-size: 16px; line-height: 1.7; letter-spacing: 0.01em; }
.thesis { max-width: 620px; margin: 20px auto 0; }

.aperture { position: relative; margin: 0 auto 26px; border-radius: 50%; background: radial-gradient(circle, var(--deep-void) 0 16%, rgba(0,201,167,0.18) 17%, rgba(42,58,92,0.28) 38%, transparent 70%); }
.aperture-large { width: 240px; height: 240px; }
.aperture-small { width: 170px; height: 170px; opacity: 0.72; }
.aperture i { inset: calc(var(--ring) * 18px); animation: pupil-breathe 4.8s var(--ease-optic) infinite; }
.aperture i:nth-child(1) { --ring: 0; }
.aperture i:nth-child(2) { --ring: 1; }
.aperture i:nth-child(3) { --ring: 2; }
.aperture i:nth-child(4) { --ring: 3; }
.aperture i:nth-child(5) { --ring: 4; }
.aperture i:nth-child(6) { --ring: 5; }

.scroll-cue {
    position: absolute;
    bottom: 7vh;
    left: 50%;
    color: var(--signal-teal);
    font-size: 30px;
    transform: translateX(-50%);
    animation: cue-pulse 1.7s ease-in-out infinite;
}

.narrative-panel.left { margin-left: 4vw; }
.narrative-panel.right { margin-left: auto; margin-right: 5vw; }
.narrative-panel.narrow { max-width: 500px; }
.breath-gap { height: 46vh; display: grid; place-items: center; }
.breath-gap.tall { height: 58vh; }

.compound-eye { display: grid; grid-template-columns: repeat(4, 24px); gap: 5px; margin-bottom: 24px; }
.compound-eye span { width: 24px; height: 27px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: rgba(0, 201, 167, 0.18); border: 1px solid var(--steel-frame); animation: cell-flicker 3.4s steps(3) infinite; }
.compound-eye span:nth-child(3n) { background: rgba(240, 160, 48, 0.14); animation-delay: 600ms; }
.compound-eye span:nth-child(4n) { background: rgba(230, 57, 136, 0.12); animation-delay: 1100ms; }

blockquote { margin-top: 24px; color: var(--signal-teal); border-left: 1px solid var(--signal-teal); padding-left: 16px; }

.final-column { margin-inline: auto; text-align: center; max-width: 640px; }
.system-message { color: var(--muted-slate); margin: 30px 0; }
.reverse-iris { position: relative; width: 220px; height: 220px; margin: 36px auto; }
.reverse-iris span { inset: calc(var(--ring) * 18px); transform: scale(var(--iris-scale, 0.18)); opacity: 0.9; }
.reverse-iris span:nth-child(1) { --ring: 0; }
.reverse-iris span:nth-child(2) { --ring: 1; }
.reverse-iris span:nth-child(3) { --ring: 2; }
.reverse-iris span:nth-child(4) { --ring: 3; }
.reverse-iris span:nth-child(5) { --ring: 4; }
.reverse-iris span:nth-child(6) { --ring: 5; }
.begin-again { color: var(--signal-teal); display: inline-block; transition: color 250ms ease, text-shadow 250ms ease; }
.begin-again:hover { color: var(--pale-steel); text-shadow: 0 0 16px rgba(0, 201, 167, 0.55); }

.closing-void {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at center, transparent 0 calc(var(--close-size, 0) * 1%), var(--deep-void) calc((var(--close-size, 0) * 1%) + 1%));
}
.closing-void.active { opacity: 1; }

@keyframes scanline-drift { to { background-position-y: 100vh; } }
@keyframes window-pulse { 50% { opacity: 0.8; } }
@keyframes interference { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(8px); } 25% { transform: translateX(-5px); } 72% { transform: translateX(3px); } }
@keyframes sweep-burst { 0%, 100% { opacity: 0; transform: translateY(0); } 50% { opacity: 1; transform: translateY(26px); } }
@keyframes grain-shift { 0% { transform: translate(0,0); } 33% { transform: translate(3%, -2%); } 66% { transform: translate(-2%, 3%); } 100% { transform: translate(1%, 1%); } }
@keyframes flare-pass { 0%, 45% { transform: translateX(0); opacity: 0; } 52% { opacity: 1; } 72% { transform: translateX(150vw); opacity: 0; } 100% { transform: translateX(150vw); opacity: 0; } }
@keyframes hud-in { to { opacity: 1; } }
@keyframes iris-layer-clear { 0% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes open-ring-1 { to { width: 360px; height: 360px; } }
@keyframes open-ring-2 { to { width: 290px; height: 290px; } }
@keyframes open-ring-3 { to { width: 220px; height: 220px; } }
@keyframes open-ring-4 { to { width: 150px; height: 150px; } }
@keyframes open-ring-5 { to { width: 86px; height: 86px; } }
@keyframes open-ring-6 { to { width: 32px; height: 32px; } }
@keyframes pupil-breathe { 50% { transform: scale(1.08); } }
@keyframes cue-pulse { 50% { opacity: 0.45; transform: translate(-50%, 9px); } }
@keyframes cell-flicker { 50% { opacity: 0.45; } }
@keyframes glitch-a { 0% { opacity: 0; } 40% { opacity: 1; transform: translateX(12px); } 100% { opacity: 0; transform: translateX(-5px); } }
@keyframes glitch-b { 0% { opacity: 0; } 40% { opacity: 1; transform: translateX(-10px); } 100% { opacity: 0; transform: translateX(7px); } }

@media (max-width: 760px) {
    .top-nav { padding-inline: 14px; }
    .nav-mark { letter-spacing: 0.18em; }
    .act { padding: 13vh 22px; }
    .panel { padding: 28px; }
    .narrative-panel.left, .narrative-panel.right { margin-inline: 0; }
    .hud-line { left: 22%; right: 22%; }
    .corner { width: 34px; height: 34px; }
    .coord-readout { font-size: 11px; left: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
    .film-grain, .lens-flare { display: none; }
}