:root {
  color-scheme: dark;
  --ink: #05080b;
  --paper: #edf6fb;
  --muted: #90a1ad;
  --line: rgba(200, 228, 244, 0.16);
  --blue: #3ba9e8;
  --blue-bright: #8edaff;
  --scroll: 0;
  --pointer-x: 50vw;
  --pointer-y: 50vh;
  --breach-progress: 0;
  --formats-progress: 0;
  --closing-progress: 0;
  --max-width: 1240px;
  --display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 30%, rgba(17, 70, 101, 0.16), transparent 26rem),
    var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-synthesis: none;
}

body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 28%, rgba(32, 143, 205, 0.12), transparent 22%),
    radial-gradient(ellipse at 78% 65%, rgba(57, 125, 164, 0.09), transparent 25%);
  filter: blur(60px);
  transform: translate3d(0, calc(var(--scroll) * -7vh), 0) rotate(calc(var(--scroll) * 5deg));
}

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
::selection { background: var(--blue); color: #031018; }

.pointer-light {
  position:fixed;
  inset:0;
  z-index:80;
  pointer-events:none;
  opacity:.7;
  background:radial-gradient(340px circle at var(--pointer-x) var(--pointer-y),rgba(99,198,250,.07),transparent 70%);
  mix-blend-mode:screen;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 1rem;
  left: 1rem;
  padding: .8rem 1rem;
  background: white;
  color: black;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 99;
  background: rgba(255,255,255,.05);
}
.reading-progress span {
  display: block;
  width: calc(var(--scroll) * 100%);
  height: 100%;
  background: linear-gradient(90deg, #316e98, var(--blue-bright));
  box-shadow: 0 0 16px var(--blue);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.1rem clamp(1.1rem, 4vw, 4rem);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
.site-header.is-scrolled {
  background: rgba(5, 8, 11, .76);
  border-color: var(--line);
  backdrop-filter: blur(18px);
}
.wordmark { display: inline-flex; align-items: center; gap: .65rem; font: 800 .76rem/1 var(--body); letter-spacing: .25em; }
.mark { width: 1.2rem; aspect-ratio: 1; background: var(--blue); clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: 0 0 20px var(--blue); }
.site-header nav { display: flex; gap: clamp(1rem, 3vw, 2.8rem); }
.site-header nav a { color: #b7c3ca; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; transition: color .2s; }
.site-header nav a:hover { color: white; }
.header-cta { justify-self: end; border: 1px solid var(--line); border-radius: 999px; padding: .72rem 1rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

.hero {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 7rem 1.5rem 4rem;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(2,5,7,.54) 0%, rgba(2,5,7,.18) 40%, var(--ink) 100%),
    radial-gradient(ellipse at 50% 48%, transparent 12%, rgba(0,0,0,.72) 72%);
}
.hero-corridor, .finale-corridor {
  position: absolute;
  inset: -5%;
  z-index: -2;
  background: url('/assets/bathroom-217.webp') 64% center/cover no-repeat;
  filter: saturate(.7) contrast(1.12) brightness(.72);
  transform: scale(calc(1.05 + var(--scroll) * .12));
  transform-origin: 50% 53%;
  will-change: transform;
}
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.triangle {
  position: absolute;
  width: clamp(16rem, 32vw, 38rem);
  aspect-ratio: 1.3;
  background: rgba(0,0,0,.88);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 24px rgba(83,185,240,.2));
  pointer-events: none;
}
.hero-copy { min-width:0; text-align: center; width: min(980px, 100%); position: relative; z-index: 2; }
.eyebrow { margin: 0 0 1.2rem; color: var(--blue-bright); font-size: clamp(.65rem, 1vw, .78rem); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.hero-availability { display:flex; align-items:center; justify-content:center; gap:.65rem; }
.hero-availability span { width:.48rem; aspect-ratio:1; border-radius:50%; background:#6dd5ff; box-shadow:0 0 1rem rgba(109,213,255,.9); animation:availabilityPulse 2.4s ease-in-out infinite; }
@keyframes availabilityPulse { 50% { opacity:.35; transform:scale(.72); } }
.hero h1 { margin: 0; text-transform: uppercase; font-family: var(--display); line-height: .77; letter-spacing: -.055em; }
.hero h1 span { display: block; margin-bottom: .55rem; font: 600 clamp(.75rem, 1.2vw, 1rem)/1 var(--body); letter-spacing: .52em; }
.hero h1 strong { display: block; font-size: clamp(4.5rem, 13vw, 11.2rem); font-stretch: condensed; }
.hero h1 .accent { color: transparent; -webkit-text-stroke: 1px rgba(130, 205, 245, .85); text-shadow: 0 0 60px rgba(34,149,212,.2); }
.hero-hook { margin: 1.8rem auto 0; color: #dce7ed; font: 520 clamp(1rem, 1.55vw, 1.25rem)/1.5 var(--body); letter-spacing: .01em; }
.hero-stakes { margin:.65rem auto 0; color:#8fa0aa; font-size:clamp(.82rem,1.05vw,.96rem); letter-spacing:.01em; }
.hero-stakes strong { color:#f3f8fb; font-weight:700; }
.hero-actions { margin-top: 1.65rem; display: flex; justify-content: center; flex-wrap: wrap; gap: .65rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: .9rem 1.35rem; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: transform .25s, background .25s, border-color .25s; }
.button span { margin-left:.55rem; font-size:1rem; }
.button:hover { transform: translateY(-2px); }
.button--primary { color: #041019; background: var(--paper); box-shadow: 0 0 40px rgba(104,196,246,.14); }
.button--primary:hover { background: var(--blue-bright); }
.button--spotify { border:1px solid rgba(30,215,96,.4); background:rgba(8,37,20,.42); }
.button--spotify:hover { border-color:#1ed760; background:rgba(18,92,44,.48); }
.button--spotify i { width:.52rem; aspect-ratio:1; margin-right:.58rem; border-radius:50%; background:#1ed760; box-shadow:0 0 .9rem rgba(30,215,96,.65); }
.button--ghost { border: 1px solid rgba(255,255,255,.24); background: rgba(0,0,0,.2); backdrop-filter: blur(8px); }
.hero-formats { display:flex; justify-content:center; flex-wrap:wrap; gap:.55rem 1.4rem; margin:1rem 0 0; color:#71808a; font-size:.56rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.hero-formats span { position:relative; }
.hero-formats span:not(:last-child)::after { content:""; position:absolute; right:-.75rem; top:50%; width:2px; aspect-ratio:1; border-radius:50%; background:#53626b; }
.scroll-cue { position: absolute; bottom: 1.35rem; display: flex; flex-direction: column; align-items: center; gap: .65rem; color: #aab8c0; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; }
.scroll-cue i { display: block; width: 1px; height: 2.5rem; overflow: hidden; background: rgba(255,255,255,.2); }
.scroll-cue i::after { content: ""; display: block; width: 1px; height: 45%; background: var(--blue-bright); animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { from { transform: translateY(-110%); } to { transform: translateY(240%); } }

.warning { min-height: 140vh; position: relative; display: grid; place-items: center; isolation: isolate; overflow: hidden; }
.warning::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg, rgba(3,6,9,.96), rgba(3,6,9,.35) 55%, rgba(3,6,9,.88)); }
.warning-image { position: absolute; inset: 8% 4%; z-index: -2; background: url('/assets/warning-phone.webp') center/cover; filter: saturate(.55) brightness(.58); border-radius: 1.5rem; }
.warning-copy { position: sticky; top: 25vh; width: min(1100px, calc(100% - 3rem)); padding: 10vh 0 40vh; }
.warning h2 { margin: 0; font-family: var(--display); font-size: clamp(3.2rem, 9vw, 8.5rem); line-height: .88; letter-spacing: -.045em; text-transform: uppercase; }
.warning-line { display: block; }
.warning-line:nth-child(2) { margin-left: 8vw; }
.warning-line--blue { margin-left: 18vw; color: var(--blue-bright); }
.warning-note { margin: 2rem 0 0 18vw; color: #92a1aa; font: .68rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; }

.section-shell { width: min(var(--max-width), calc(100% - 2rem)); margin-inline: auto; padding: clamp(7rem, 14vw, 12rem) 0; }
.section-label { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(4rem, 8vw, 7rem); color: #8d9ba4; }
.section-label span { display: grid; place-items: center; width: 2.15rem; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; color: var(--blue-bright); font: 700 .62rem/1 var(--body); }
.section-label p { margin: 0; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; }
.story-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(3rem, 9vw, 9rem); }
.story h2, .evidence h2, .characters h2, .formats h2, .about h2 { margin: 0; font: 700 clamp(3rem, 7vw, 6.6rem)/.95 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.story-copy { color: #b9c5cc; font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.8; }
.story-copy p { margin: 0 0 1.5rem; }
.story-copy .story-sting { margin-top: 2.5rem; padding-left: 1.4rem; border-left: 2px solid var(--blue); color: white; font-size: clamp(1.15rem, 1.8vw, 1.55rem); line-height: 1.5; }

.evidence { position: relative; }
.evidence-heading, .characters-heading { max-width: 900px; margin-bottom: 5rem; }
.evidence-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
.evidence-card { position: relative; min-height: 31rem; padding: 1.5rem; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 1.1rem; background: linear-gradient(145deg, rgba(20,29,35,.9), rgba(5,8,11,.92)); box-shadow: 0 1.5rem 5rem rgba(0,0,0,.25); }
.evidence-card::before { content:""; position:absolute; inset:auto -20% -25%; height:55%; background: radial-gradient(ellipse, rgba(42,151,210,.14), transparent 68%); }
.evidence-card--image { background: linear-gradient(180deg, rgba(3,6,8,.35), rgba(3,6,8,.97)), url('/assets/forensic-evidence.webp') center/cover; }
.card-index { color: var(--blue-bright); font: 700 .62rem/1 var(--body); letter-spacing: .18em; }
.evidence-card h3 { margin: auto 0 1.2rem; font: 700 clamp(2.5rem, 4vw, 4.4rem)/.9 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.evidence-card p { margin: 0 0 2rem; max-width: 28ch; color: #aab8c0; line-height: 1.55; }
.status { align-self: flex-start; padding: .45rem .6rem; border: 1px solid rgba(84,185,240,.3); border-radius: .3rem; color: var(--blue-bright); font: 700 .56rem/1 var(--body); letter-spacing: .12em; }

.breach { height:400vh; position:relative; background:#020406; }
.breach-stage { position:sticky; top:0; height:100svh; isolation:isolate; overflow:hidden; }
.breach-media { position:absolute; inset:0; z-index:-2; }
.breach-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(1,3,5,.9),rgba(1,3,5,.2) 58%,rgba(1,3,5,.7)),linear-gradient(0deg,rgba(1,3,5,.88),transparent 45%,rgba(1,3,5,.52)); }
.breach-image { position:absolute; inset:-5%; background-position:center; background-size:cover; filter:saturate(.42) contrast(1.15) brightness(.66); opacity:0; transform:scale(1.08); transition:opacity .7s ease; will-change:opacity,transform; }
.breach-image--room { background-image:url('/assets/room-1107.webp'); opacity:1; transform:scale(calc(1.08 + var(--breach-progress) * .06)); }
.breach-image--forensic { background-image:url('/assets/forensic-evidence.webp'); }
.breach-image--phone { background-image:url('/assets/warning-phone.webp'); }
.breach[data-scene="1"] .breach-image--room { opacity:0; }
.breach[data-scene="1"] .breach-image--forensic { opacity:1; }
.breach[data-scene="2"] .breach-image--forensic { opacity:0; }
.breach[data-scene="2"] .breach-image--phone { opacity:1; }
.breach[data-scene="3"] .breach-image { opacity:0; }
.breach-blackout { position:absolute; inset:0; background:radial-gradient(circle at 50% 46%,rgba(12,37,52,.55),#010203 55%); opacity:0; transition:opacity .7s; }
.breach[data-scene="3"] .breach-blackout { opacity:1; }
.breach-triangle { position:absolute; left:50%; top:50%; width:min(53vw,42rem); aspect-ratio:1.25; background:#000; clip-path:polygon(50% 0,100% 100%,0 100%); opacity:0; transform:translate(-50%,-44%) rotate(180deg) scale(.72); filter:drop-shadow(0 0 2.5rem rgba(68,177,237,.24)); transition:opacity .7s,transform 1.3s cubic-bezier(.15,.75,.15,1); }
.breach[data-scene="3"] .breach-triangle { opacity:1; transform:translate(-50%,-48%) rotate(180deg) scale(1); }
.breach-scan { position:absolute; inset:-20% 0 auto; height:18%; background:linear-gradient(180deg,transparent,rgba(112,207,255,.1),transparent); animation:scan 5s linear infinite; mix-blend-mode:screen; }
@keyframes scan { to { transform:translateY(750%); } }
.breach-interface { position:absolute; inset:1.5rem 2rem auto; display:flex; justify-content:space-between; color:rgba(205,231,244,.56); font:700 .58rem/1 var(--body); letter-spacing:.19em; }
.breach-scenes { position:absolute; inset:0; display:grid; place-items:center; padding:2rem; }
.breach-scene { position:absolute; width:min(1180px,calc(100% - 3rem)); opacity:0; transform:translate3d(0,3rem,0); transition:opacity .6s ease,transform .8s cubic-bezier(.16,.78,.22,1); }
.breach-scene.is-active { opacity:1; transform:translate3d(0,0,0); }
.breach-scene p { margin:0 0 1.2rem; color:var(--blue-bright); font:700 .65rem/1 var(--body); letter-spacing:.22em; }
.breach-scene h2 { margin:0; max-width:10ch; font:700 clamp(4rem,10vw,10rem)/.82 var(--display); letter-spacing:-.055em; text-transform:uppercase; }
.breach-scene h2 em { color:transparent; -webkit-text-stroke:1px rgba(172,223,250,.82); font-style:normal; }
.breach-scene:nth-child(even) { text-align:right; }
.breach-scene:nth-child(even) h2 { margin-left:auto; }
.breach-rail { position:absolute; right:2rem; top:12%; bottom:12%; width:1px; background:rgba(255,255,255,.14); }
.breach-rail span { display:block; width:1px; height:calc(var(--breach-progress) * 100%); background:var(--blue-bright); box-shadow:0 0 14px var(--blue); }

.character-list { border-top: 1px solid var(--line); }
.character { position: relative; display: grid; grid-template-columns: 4rem 1fr auto; gap: 2rem; align-items: center; min-height: 10.5rem; padding: 1.4rem 1rem; border-bottom: 1px solid var(--line); overflow: hidden; }
.character::before { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg, rgba(38,143,201,.13), transparent 55%); transform: translateX(-103%); transition: transform .45s ease; }
.character:hover::before { transform: translateX(0); }
.character-number { color: var(--blue-bright); font: .68rem/1 var(--body); letter-spacing: .15em; }
.character h3 { margin: 0 0 .5rem; font: 700 clamp(2rem, 4vw, 4rem)/1 var(--display); text-transform: uppercase; }
.character p { margin: 0; max-width: 52ch; color: #94a3ac; line-height: 1.5; }
.character-role { color: #71808a; font-size: .58rem; letter-spacing: .17em; }

.formats { min-height: 100vh; display: grid; grid-template-columns: minmax(260px, .8fr) 1.2fr; gap: clamp(4rem, 10vw, 10rem); align-items: center; }
.format-visual { position:sticky; top:10svh; align-self:start; perspective:1200px; isolation:isolate; display:grid; place-items:center; }
.format-visual > img { width:auto; max-width:100%; height:min(68svh,660px); object-fit:contain; margin-inline:auto; border-radius:.25rem; transform:translate3d(0,calc((.5 - var(--formats-progress)) * 3rem),0) rotateY(calc(-7deg + var(--formats-progress) * 12deg)) rotateX(calc(2deg - var(--formats-progress) * 1deg)); transform-origin:50% 70%; box-shadow: -2rem 3rem 6rem rgba(0,0,0,.65), 0 0 5rem rgba(40,149,208,.12); will-change:transform; }
.cover-shadow { position:absolute; inset:12% 2% -8% 20%; z-index:-2; background:rgba(42,160,224,.18); filter:blur(65px); transform:scale(calc(.75 + var(--formats-progress) * .3)); }
.hardcover-orbit { position:absolute; z-index:-1; left:50%; top:50%; width:112%; aspect-ratio:1; border:1px solid rgba(88,190,245,.17); border-radius:50%; transform:translate(-50%,-50%) rotateX(68deg) rotateZ(calc(var(--formats-progress) * 65deg)); box-shadow:inset 0 0 4rem rgba(42,160,224,.05),0 0 3rem rgba(42,160,224,.05); }
.hardcover-orbit::before,.hardcover-orbit::after { content:""; position:absolute; left:50%; top:-.26rem; width:.5rem; aspect-ratio:1; border-radius:50%; background:var(--blue-bright); box-shadow:0 0 1.4rem var(--blue); }
.hardcover-orbit::after { top:auto; bottom:-.2rem; opacity:.35; }
.formats h2 span { color: var(--blue-bright); }
.format-intro { margin: 1.5rem 0 2rem; color: #9cabb4; }
.format-links { border-top: 1px solid var(--line); }
.format-links a { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); transition: padding .25s, color .25s; }
.format-links a[hidden] { display:none; }
.format-links a:hover { padding-left: .7rem; color: var(--blue-bright); }
.format-links small { display:block; margin-bottom:.28rem; color:#74838d; font-size:.55rem; letter-spacing:.15em; }
.format-links strong { font-size:1rem; }
.format-links b { font-size:1.2rem; font-weight:400; }
.store-icon { display:grid; place-items:center; width:2.5rem; aspect-ratio:1; border:1px solid var(--line); border-radius:50%; font-weight:800; font-size:.76rem; }
.store-icon--spotify { color:#1ed760; }
.store-icon--amazon { color:#ffb13b; font-family:Georgia,serif; font-size:1.2rem; }
.store-icon--eleven { color:#fff; border-radius:.35rem; }
.format-links .retailer-card--amazon { grid-template-columns:5.4rem 1fr auto; padding-block:1rem; }
.store-thumbnail { width:4.5rem; height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:.2rem; box-shadow:0 .5rem 1.6rem rgba(0,0,0,.45); }
.link-notice { min-height: 1.5rem; margin: 1rem 0 0; color: var(--blue-bright); font-size: .75rem; }
.spotify-player { margin-top:2.2rem; }
.spotify-player p { margin:0 0:.8rem; color:#92a1aa; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; }
.spotify-player p span { color:#1ed760; }
.spotify-player iframe { display:block; border:0; border-radius:.8rem; background:#121212; }

.finale { min-height: 100svh; position:relative; isolation:isolate; display:grid; place-items:center; overflow:hidden; padding:5rem 1.5rem; }
.finale::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,var(--ink),rgba(0,0,0,.25) 40%,var(--ink)), radial-gradient(circle at 50% 50%,transparent,rgba(0,0,0,.65)); }
.finale-corridor { inset:-8%; filter:saturate(.35) contrast(1.25) brightness(.58); transform:scale(calc(1.08 + var(--scroll) * .04)); }
.triangle--final { z-index:-1; top:16%; transform:rotate(180deg); }
.finale-copy { max-width:1100px; text-align:center; }
.finale h2 { margin:0 0 2.5rem; font:700 clamp(2.8rem,7vw,7rem)/.98 var(--display); letter-spacing:-.045em; text-transform:uppercase; }
.finale h2 span { color:var(--blue-bright); }

.about { padding-bottom:6rem; }
.about-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(3rem,9vw,9rem); align-items:start; }
.about-grid p { max-width:62ch; margin:0 0 1.5rem; color:#b4c0c7; font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.75; }
.about-grid .production-note { color:#7f8e97; font-size:.9rem; }

.closing-cinema { height:330vh; position:relative; background:#010203; }
.closing-stage { position:sticky; top:0; height:100svh; isolation:isolate; overflow:hidden; }
.closing-media { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.closing-image { position:absolute; inset:-5%; background-position:center; background-size:cover; filter:saturate(.75) contrast(1.08); transition:opacity .9s ease; will-change:transform,opacity; }
.closing-image--door { background-image:url('/assets/bathroom-217.webp'); opacity:1; transform:scale(calc(1.04 + var(--closing-progress) * .08)); transform-origin:58% 52%; }
.closing-image--triangle { background-image:url('/assets/triangle-over-hotel.webp'); opacity:0; transform:scale(calc(1.12 - var(--closing-progress) * .06)); }
.closing-cinema[data-scene="1"] .closing-image--door,.closing-cinema[data-scene="2"] .closing-image--door { opacity:0; }
.closing-cinema[data-scene="1"] .closing-image--triangle,.closing-cinema[data-scene="2"] .closing-image--triangle { opacity:1; }
.closing-vignette { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.08) 57%,rgba(0,0,0,.58)),linear-gradient(0deg,rgba(0,0,0,.76),transparent 42%,rgba(0,0,0,.42)); transition:background .7s; }
.closing-cinema[data-scene="2"] .closing-vignette { background:radial-gradient(circle at center,rgba(0,0,0,.15),rgba(0,0,0,.86) 78%); }
.closing-pulse { position:absolute; left:58%; top:55%; width:1px; aspect-ratio:1; border-radius:50%; box-shadow:0 0 10rem 4rem rgba(99,202,255,.11); opacity:calc(.2 + var(--closing-progress)); }
.closing-counter { position:absolute; inset:1.5rem 2rem auto; display:flex; justify-content:space-between; color:rgba(205,231,244,.63); font:700 .58rem/1 var(--body); letter-spacing:.2em; }
.closing-scenes { position:absolute; inset:0; display:grid; place-items:center; padding:clamp(1.25rem,4vw,4rem); }
.closing-scene { position:absolute; width:min(1240px,calc(100% - 3rem)); opacity:0; transform:translate3d(0,3rem,0) scale(.985); transition:opacity .65s ease,transform .95s cubic-bezier(.16,.78,.22,1); pointer-events:none; }
.closing-scene.is-active { opacity:1; transform:translate3d(0,0,0) scale(1); pointer-events:auto; }
.closing-scene > p { margin:0 0 1.2rem; color:var(--blue-bright); font:700 .66rem/1 var(--body); letter-spacing:.23em; }
.closing-scene h2 { margin:0; max-width:9ch; font:700 clamp(5rem,13vw,13rem)/.76 var(--display); letter-spacing:-.06em; text-transform:uppercase; }
.closing-scene h2 em { color:transparent; -webkit-text-stroke:1px rgba(213,239,252,.88); font-style:normal; }
.closing-caption { display:block; margin-top:2rem; max-width:38ch; color:#b5c4cc; font-size:clamp(.9rem,1.35vw,1.08rem); line-height:1.55; }
.closing-scene:nth-child(2) { text-align:right; }
.closing-scene:nth-child(2) h2,.closing-scene:nth-child(2) .closing-caption { margin-left:auto; }
.closing-scene--cta { text-align:center; }
.closing-scene--cta h2 { margin-inline:auto; }
.closing-scene--cta .closing-caption { margin:2rem auto 0; }
.closing-links { display:flex; justify-content:center; flex-wrap:wrap; gap:.7rem; margin-top:2.2rem; }
.closing-links a { min-width:10rem; padding:.9rem 1.1rem; border:1px solid rgba(221,241,252,.25); border-radius:999px; background:rgba(0,0,0,.28); backdrop-filter:blur(12px); text-align:left; transition:background .25s,border-color .25s,transform .25s; }
.closing-links a:hover { background:var(--paper); border-color:var(--paper); color:#031018; transform:translateY(-3px); }
.closing-links span { display:block; margin-bottom:.2rem; color:#81919a; font-size:.52rem; letter-spacing:.14em; text-transform:uppercase; }
.closing-links strong { display:block; font-size:.78rem; }
.closing-progress { position:absolute; left:0; bottom:0; width:100%; height:2px; background:rgba(255,255,255,.1); }
.closing-progress span { display:block; width:calc(var(--closing-progress) * 100%); height:100%; background:var(--blue-bright); box-shadow:0 0 16px var(--blue); }
footer { width:min(var(--max-width),calc(100% - 2rem)); margin:auto; padding:2rem 0 3rem; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); color:#788791; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; }

.not-found { min-height:100svh; position:relative; isolation:isolate; display:grid; place-items:center; overflow:hidden; padding:2rem; text-align:center; }
.not-found::after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at center,rgba(5,8,11,.25),rgba(5,8,11,.96) 75%); }
.not-found__corridor { position:absolute; inset:-4%; z-index:-2; background:url('/assets/room-1107.webp') center/cover; filter:saturate(.35) brightness(.6); }
.not-found h1 { margin:0; font:700 clamp(4rem,12vw,10rem)/.82 var(--display); letter-spacing:-.05em; text-transform:uppercase; }
.not-found p:not(.eyebrow) { margin:2rem 0; color:#a8b5bd; }

.reveal, .reveal-card { opacity:0; transform:translate3d(0,2.2rem,0); transition:opacity .85s ease,transform .85s cubic-bezier(.2,.75,.25,1); }
.reveal-card:nth-child(2) { transition-delay:.12s; }
.reveal-card:nth-child(3) { transition-delay:.24s; }
.is-visible { opacity:1; transform:translate3d(0,0,0); }

@media (max-width: 860px) {
  .site-header { grid-template-columns:1fr auto; }
  .site-header nav { display:none; }
  .hero { padding-top:6rem; }
  .hero h1 strong { font-size:clamp(4rem,19vw,8rem); }
  .hero-hook br { display:none; }
  .hero-actions { max-width:43rem; margin-inline:auto; }
  .warning { min-height:115vh; }
  .warning-copy { top:22vh; }
  .warning-line:nth-child(2), .warning-line--blue, .warning-note { margin-left:0; }
  .warning-line { margin-bottom:.25rem; }
  .story-grid, .formats, .about-grid { grid-template-columns:1fr; }
  .evidence-stack { grid-template-columns:1fr; }
  .evidence-card { min-height:24rem; }
  .breach-interface { inset:5rem 1rem auto; }
  .breach-scene { width:calc(100% - 2rem); }
  .breach-scene h2 { font-size:15vw; }
  .breach-triangle { width:88vw; }
  .breach-rail { right:1rem; }
  .character { grid-template-columns:2rem 1fr; gap:1rem; }
  .character-role { display:none; }
  .format-visual { position:relative; top:auto; max-width:320px; margin:auto; }
  .format-visual > img { height:auto; max-height:72svh; }
  .format-copy { order:-1; }
  .formats { gap:4rem; }
  .closing-counter { inset:5rem 1rem auto; }
  .closing-scene { width:calc(100% - 2rem); }
  .closing-scene h2 { font-size:17vw; }
  .closing-vignette { background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.08) 70%,rgba(0,0,0,.45)); }
}

@media (max-width: 520px) {
  .site-header { padding:1rem; }
  .header-cta { padding:.65rem .85rem; }
  .hero { min-height:max(100svh,52rem); padding:7.25rem max(1rem,env(safe-area-inset-right)) 7.75rem max(1rem,env(safe-area-inset-left)); }
  .hero-corridor { background-position:68% center; filter:saturate(.72) contrast(1.12) brightness(.58); }
  .hero-copy { width:100%; max-width:100%; overflow:visible; }
  .hero-availability { flex-wrap:wrap; gap:.45rem; max-width:22rem; margin-inline:auto; padding-inline:.5rem; font-size:.58rem; line-height:1.55; letter-spacing:.16em; }
  .hero h1 { width:100%; letter-spacing:-.065em; }
  .hero h1 span { letter-spacing:.28em; }
  .hero h1 strong { width:100%; font-size:clamp(2.9rem,15.5vw,5rem); line-height:.82; white-space:nowrap; }
  .hero-hook { max-width:22rem; padding-inline:.35rem; font-size:.96rem; line-height:1.55; }
  .hero-actions { flex-direction:column; align-items:stretch; max-width:20rem; margin-inline:auto; margin-top:2rem; }
  .hero-stakes { max-width:24rem; line-height:1.5; }
  .hero-formats { max-width:19rem; margin-inline:auto; line-height:1.5; }
  .hero-formats span:not(:last-child)::after { display:none; }
  .scroll-cue { bottom:1rem; max-width:calc(100% - 2rem); text-align:center; }
  .warning h2 { font-size:14vw; }
  .section-shell { width:min(100% - 2rem, var(--max-width)); }
  .section-label { margin-bottom:3.5rem; }
  .story h2,.evidence h2,.characters h2,.formats h2,.about h2 { font-size:12vw; }
  .character { padding-inline:0; }
  .character h3 { font-size:2.3rem; }
  footer { align-items:flex-start; gap:1.5rem; flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  body::before,.hero-corridor,.finale-corridor,.breach-image,.breach-triangle,.format-visual > img,.hardcover-orbit,.closing-image { transform:none!important; }
  .reveal,.reveal-card { opacity:1; transform:none; }
  .pointer-light,.breach-scan { display:none; }
}

@media (pointer:coarse) { .pointer-light { display:none; } }