:root { --blue:#1959e2; --red:#ef3038; --paper:#f6f7f9; --muted:#9ba4b3; --ink:#080a0f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; color:var(--paper); font-family:"DM Sans",sans-serif; background:var(--ink); }
.entry { position:relative; z-index:10; height:100vh; display:grid; place-items:center; background:#000; }
.entry__prompt { display:flex; flex-direction:column; align-items:center; gap:22px; padding:18px; border:0; color:rgba(255,255,255,.78); background:transparent; font:500 10px/1 "DM Sans",sans-serif; letter-spacing:.38em; text-transform:uppercase; cursor:pointer; }
.entry__prompt:focus-visible { outline:1px solid var(--blue); outline-offset:10px; }
.entry__prompt i { position:relative; width:1px; height:68px; overflow:hidden; background:rgba(255,255,255,.2); }
.entry__prompt i::after { content:""; position:absolute; inset:0; background:var(--blue); animation:drop 1.8s ease-in-out infinite; transform:translateY(-100%); }
.entry__replay { display:none; border:0; padding:8px; color:rgba(255,255,255,.52); background:transparent; font:700 9px/1 "DM Sans",sans-serif; letter-spacing:.18em; text-decoration:underline; text-underline-offset:5px; text-transform:uppercase; cursor:pointer; }
.entry__replay:hover,.entry__replay:focus-visible { color:#fff; outline:none; }
body.intro-viewed .entry { display:flex; flex-direction:column; justify-content:center; gap:8px; }
body.intro-viewed .entry__replay { display:block; }
@keyframes drop { 60%,100% { transform:translateY(100%); } }
.experience { position:relative; height:100vh; overflow:hidden; }
.film { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; z-index:0; background:#050609; }
.film video { width:100%; height:100%; object-fit:cover; transform:scale(1.06); filter:saturate(.88) contrast(1.04) brightness(1.12); will-change:transform; }
.film__wash,.film__grain { position:absolute; inset:0; pointer-events:none; }
.film__wash { background:linear-gradient(90deg,rgba(3,5,12,.2),transparent 28%,transparent 72%,rgba(3,5,12,.2)),linear-gradient(180deg,rgba(0,0,0,.12),transparent 30%,transparent 78%,rgba(0,0,0,.28)); }
.film__grain { opacity:.14; 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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.masthead { position:fixed; z-index:5; top:0; left:0; width:100%; display:flex; justify-content:space-between; align-items:center; padding:28px 38px; mix-blend-mode:screen; }
.mark { display:block; text-decoration:none; }
.mark img { display:block; width:clamp(150px,16vw,220px); height:auto; }
.masthead p { margin:0; color:rgba(255,255,255,.65); font-size:10px; text-transform:uppercase; letter-spacing:.28em; }
.masthead__right { display:flex; align-items:center; gap:28px; }
.skip-link { color:#fff; font-size:10px; font-weight:700; letter-spacing:.2em; text-decoration:none; text-transform:uppercase; }
.skip-link:hover,.skip-link:focus-visible { color:var(--blue); outline:none; }
.story { position:absolute; z-index:2; inset:0; pointer-events:none; }
.beat { position:absolute; inset:0; display:flex; align-items:center; padding:0 clamp(28px,8vw,140px); opacity:0; visibility:hidden; transition:opacity .35s ease; }
.beat.is-active { opacity:1; visibility:visible; }
.beat p { margin:0; max-width:13ch; font:clamp(44px,7.2vw,112px)/.9 "Archivo Black",sans-serif; letter-spacing:-.055em; text-transform:uppercase; text-shadow:0 4px 35px rgba(0,0,0,.48); will-change:transform,opacity; }
.beat--red p { color:var(--red); }
.beat--blue { justify-content:flex-end; text-align:right; }
.beat--blue p { color:var(--blue); }
.beat--small p { font-size:clamp(38px,5.6vw,84px); }
.beat--wide p { max-width:18ch; font-size:clamp(34px,5vw,76px); }
.beat--final { flex-direction:column; justify-content:center; text-align:center; background:rgba(5,6,9,.84); }
.beat--final .eyebrow { color:var(--paper); max-width:none; font:500 11px/1 "DM Sans",sans-serif; letter-spacing:.55em; text-transform:uppercase; margin-bottom:24px; }
.beat--final h1 { margin:0; font:clamp(48px,8vw,126px)/.86 "Archivo Black",sans-serif; letter-spacing:-.06em; text-transform:uppercase; }
.beat--final h1 span { color:var(--blue); }
.rule { width:80px; height:5px; margin-top:42px; background:var(--blue); }
.enter-site { pointer-events:auto; margin-top:32px; padding:16px 22px; border:1px solid rgba(255,255,255,.7); color:#fff; font:700 12px/1 "DM Sans",sans-serif; letter-spacing:.2em; text-decoration:none; text-transform:uppercase; transition:background .2s,color .2s,border-color .2s; }
.enter-site span { margin-left:12px; color:var(--blue); }
.enter-site:hover,.enter-site:focus-visible { background:#fff; border-color:#fff; color:#08090c; outline:none; }
.film-progress { position:absolute; z-index:6; right:0; bottom:0; left:0; height:3px; background:rgba(255,255,255,.12); }
.film-progress i { display:block; width:100%; height:100%; background:var(--blue); transform:scaleX(0); transform-origin:left center; }
body.threshold-active { overflow:hidden; }
body.threshold-active .entry { pointer-events:none; }
@media (max-width:700px) { .masthead{padding:22px 20px}.masthead p{display:none}.masthead__right{gap:0}.beat{padding:0 22px}.beat p{font-size:clamp(40px,13vw,70px)}.beat--small p,.beat--wide p{font-size:clamp(34px,10vw,56px)} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.entry__prompt i::after{animation:none}.film video{transform:none!important}.beat p{transform:none!important} }