: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); }
.sound-gate { position:fixed; z-index:100; inset:0; display:grid; place-items:center; overflow:hidden; padding:24px; background:rgba(2,4,9,.82); backdrop-filter:blur(14px) saturate(.72); }
.sound-gate[hidden] { display:none; }
.sound-gate::before { content:""; position:absolute; inset:-40%; opacity:.18; pointer-events:none; background:linear-gradient(rgba(25,89,226,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(25,89,226,.12) 1px,transparent 1px); background-size:44px 44px; transform:rotate(45deg); mask-image:radial-gradient(circle,#000 22%,transparent 67%); }
.sound-gate__panel { position:relative; width:min(940px,100%); padding:clamp(28px,4vw,52px); border:1px solid rgba(255,255,255,.25); background:linear-gradient(145deg,rgba(15,20,31,.98),rgba(5,7,12,.98)); box-shadow:0 30px 90px rgba(0,0,0,.62),inset 4px 0 0 var(--blue); }
.sound-gate__eyebrow { margin:0 0 20px; color:var(--blue); font:700 16px/1 "DM Sans",sans-serif; letter-spacing:.28em; text-transform:uppercase; }
.sound-gate__layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr); border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); }
.sound-gate__advisory,.sound-gate__preferences { padding:clamp(26px,3.5vw,42px) 0; }
.sound-gate__advisory { padding-right:clamp(28px,4vw,58px); }
.sound-gate__preferences { padding-left:clamp(28px,4vw,58px); border-left:1px solid rgba(255,255,255,.18); }
.sound-gate__section-label { margin:0 0 17px; color:var(--red); font:700 16px/1 "DM Sans",sans-serif; letter-spacing:.24em; text-transform:uppercase; }
.sound-gate__preferences .sound-gate__section-label { color:var(--blue); }
.sound-gate h1 { max-width:11ch; margin:0; color:#fff; font:clamp(34px,4.6vw,58px)/.92 "Archivo Black",sans-serif; letter-spacing:-.045em; text-transform:uppercase; }
.sound-gate h2 { max-width:13ch; margin:0; color:#fff; font:clamp(25px,3vw,38px)/.96 "Archivo Black",sans-serif; letter-spacing:-.035em; text-transform:uppercase; }
.sound-gate__advisory h1 + p,.sound-gate__preferences h2 + p { max-width:52ch; margin:22px 0 26px; color:rgba(255,255,255,.68); font-size:16px; line-height:1.65; }
.sound-gate__advisory h1 + p { margin-bottom:0; }
.entry__sound-options { display:grid; grid-template-columns:1fr 1fr; border:1px solid rgba(255,255,255,.32); }
.entry__sound-options button { min-height:50px; padding:10px 18px; border:0; color:rgba(255,255,255,.6); background:transparent; font:700 16px/1.2 "DM Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
.entry__sound-options button + button { border-left:1px solid rgba(255,255,255,.32); }
.entry__sound-options button[aria-pressed="true"] { color:#fff; background:var(--blue); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
.entry__sound-options button:hover,.entry__sound-options button:focus-visible { color:#fff; outline:2px solid #fff; outline-offset:-4px; }
.sound-gate__status { min-height:16px; margin:14px 0 22px; color:rgba(255,255,255,.48); font-size:16px; letter-spacing:.08em; }
.sound-gate__confirm { width:100%; min-height:54px; border:1px solid var(--blue); color:#fff; background:var(--blue); font:700 16px/1 "DM Sans",sans-serif; letter-spacing:.24em; text-transform:uppercase; cursor:pointer; }
.sound-gate__confirm span { margin-left:10px; }
.sound-gate__confirm:disabled { border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.26); background:rgba(255,255,255,.04); cursor:not-allowed; }
.sound-gate__confirm:not(:disabled):hover,.sound-gate__confirm:not(:disabled):focus-visible { color:var(--ink); background:#fff; border-color:#fff; outline:none; }
.sound-gate small { display:block; margin-top:14px; color:rgba(255,255,255,.38); font-size:16px; letter-spacing:.12em; text-transform:uppercase; }
body.sound-gate-open { overflow:hidden; }
body.sound-gate-open #threshold-content { filter:blur(5px); }
.entry { position:relative; z-index:10; height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(34px,6vh,68px); padding:32px 20px; 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 16px/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 16px/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 { gap:22px; }
body.intro-viewed .entry__replay { display:block; }
@keyframes drop { 60%,100% { transform:translateY(100%); } }
.experience { --camera-drift-x:0vw; --camera-drift-y:0vh; --camera-drift-rotate:0deg; --score-wobble-x:0px; --score-wobble-y:0px; --score-wobble-rotate:0deg; --film-brightness:1.12; position:relative; height:100vh; overflow:hidden; }
.film { position:absolute; inset:-1.5%; width:103%; height:103%; overflow:hidden; z-index:0; background:#050609; transform:translate3d(var(--camera-drift-x),var(--camera-drift-y),0) rotate(var(--camera-drift-rotate)); transform-origin:center; transition:transform 1.05s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.film video { width:100%; height:100%; object-fit:cover; transform:scale(1.075); filter:saturate(.88) contrast(1.04) brightness(var(--film-brightness)); transition:filter 55ms linear; will-change:transform,filter; }
.experience.is-score-peak .film video { transform:translate3d(var(--score-wobble-x),var(--score-wobble-y),0) rotate(var(--score-wobble-rotate)) scale(1.075); }
.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:16px; text-transform:uppercase; letter-spacing:.28em; }
.masthead__right { display:flex; align-items:center; gap:28px; }
.skip-link { color:#fff; font-size:16px; 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; }
.experience.is-score-peak .beat.is-active p { filter:brightness(1.36); text-shadow:-4px 0 rgba(239,48,56,.72),4px 0 rgba(25,89,226,.78),0 4px 35px rgba(0,0,0,.55); }
.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--splay p { max-width:22ch; line-height:1.04; letter-spacing:0; }
.beat__line { display:block; width:max-content; max-width:100%; letter-spacing:calc(-.035em + var(--splay-phase,0) * .09em); will-change:transform,letter-spacing; }
.beat:not(.beat--right) .beat__line:nth-child(1) { transform:translateX(calc(var(--splay-phase,0) * 1.2vw)); }
.beat:not(.beat--right) .beat__line:nth-child(2) { transform:translateX(calc(var(--splay-phase,0) * 5vw)); }
.beat:not(.beat--right) .beat__line:nth-child(3) { transform:translateX(calc(var(--splay-phase,0) * -2vw)); }
.beat:not(.beat--right) .beat__line:nth-child(4) { transform:translateX(calc(var(--splay-phase,0) * 7vw)); }
.beat--right .beat__line:nth-child(1) { margin-left:auto; transform:translateX(calc(var(--splay-phase,0) * -1.2vw)); }
.beat--right .beat__line:nth-child(2) { margin-left:auto; transform:translateX(calc(var(--splay-phase,0) * -5vw)); }
.beat--right .beat__line:nth-child(3) { margin-left:auto; transform:translateX(calc(var(--splay-phase,0) * 2vw)); }
.beat--right .beat__line:nth-child(4) { margin-left:auto; transform:translateX(calc(var(--splay-phase,0) * -7vw)); }
.beat--splay .beat__line:nth-child(2) { letter-spacing:calc(-.03em + var(--splay-phase,0) * .12em); }
.beat--splay .beat__line:nth-child(3) { letter-spacing:calc(-.03em + var(--splay-phase,0) * .105em); }
.beat--splay .beat__line:nth-child(4) { letter-spacing:calc(-.03em + var(--splay-phase,0) * .135em); }
.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 16px/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; }
.final__line { display:block; transform:none; letter-spacing:-.06em; }
.final__line--paper { color:var(--paper); }
.final__line--blue { 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 16px/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; }
.entry__loading { min-height:1.5em; margin:0; color:#aeb9cc; font:500 16px/1.5 "DM Sans",sans-serif; text-align:center; max-width:40ch; }
.entry__skip { color:#d9e2f3; font:700 16px/1.5 "DM Sans",sans-serif; text-underline-offset:5px; }
.entry__skip:hover,.entry__skip:focus-visible { color:#fff; outline:2px solid var(--blue); outline-offset:8px; }
.entry__prompt:disabled { cursor:progress; }
.threshold-loading .entry__prompt i::after { animation-duration:.7s; }
.film-buffering { position:absolute; z-index:8; bottom:24px; left:50%; transform:translateX(-50%); margin:0; padding:12px 20px; color:#fff; background:#080a0fe8; border-left:3px solid var(--blue); font:500 16px/1.5 "DM Sans",sans-serif; }
.film-buffering[hidden] { display:none; }
@media (max-width:700px) { .sound-gate{place-items:start center;overflow-y:auto;padding:14px}.sound-gate__panel{margin:auto 0;padding:28px 22px}.sound-gate__layout{grid-template-columns:1fr}.sound-gate__advisory,.sound-gate__preferences{padding:24px 0}.sound-gate__preferences{border-top:1px solid rgba(255,255,255,.18);border-left:0}.sound-gate h1{max-width:13ch;font-size:clamp(30px,9.6vw,44px)}.sound-gate h2{font-size:clamp(25px,8vw,34px)}.entry{gap:34px}.entry__sound-options button{min-height:54px;padding:9px 10px;font-size:16px}.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(30px,8.8vw,48px)}.beat--splay p{max-width:21ch}.beat:not(.beat--right) .beat__line:nth-child(2){transform:translateX(calc(var(--splay-phase,0) * 3vw))}.beat--right .beat__line:nth-child(2){transform:translateX(calc(var(--splay-phase,0) * -3vw))}.beat:not(.beat--right) .beat__line:nth-child(4){transform:translateX(calc(var(--splay-phase,0) * 4vw))}.beat--right .beat__line:nth-child(4){transform:translateX(calc(var(--splay-phase,0) * -4vw))} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.entry__prompt i::after{animation:none}.film,.film video{transform:none!important;transition:none!important}.experience.is-score-peak .beat.is-active p{filter:none;text-shadow:0 4px 35px rgba(0,0,0,.48)}.beat p,.beat__line,.final__line{transform:none!important;transition:none!important}.beat--final .eyebrow{letter-spacing:.55em;transition:none!important} }
