:root{--bg:#050607;--fg:#f2f2f2;--dim:rgba(242,242,242,.66);--accent:#c8551b;--accent2:#ffb27a;--pad:22px}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--fg);scroll-snap-type:y mandatory;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* scanlines + vignette */
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
             radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
.grain::after{content:"";position:absolute;left:0;right:0;height:18%;top:-20%;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.035),transparent);
  animation:sweep 7s linear infinite}
@keyframes sweep{to{transform:translate3d(0,680%,0)}}

.topbar{position:fixed;z-index:40;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top) + 14px) var(--pad) 10px;pointer-events:none}
.topbar a{pointer-events:auto}
.brand{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.18em;text-decoration:none}
.sq{width:9px;height:9px;background:var(--accent);display:inline-block}
.dots{display:flex;gap:8px}
.dots a{width:7px;height:7px;border:1px solid var(--fg);display:block;opacity:.6}
.dots a.on{background:var(--accent);border-color:var(--accent);opacity:1}

.scene{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;scroll-snap-align:start;isolation:isolate}
.stage{position:absolute;inset:0;z-index:0}
.layer{position:absolute;inset:-7%;will-change:transform;transform:translate3d(0,0,0)}
.art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}

.caustics{position:absolute;inset:-20% -20% 30% -20%;background:url(caustics.svg) repeat;background-size:256px 256px;
  opacity:.08;mix-blend-mode:screen;will-change:transform;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 55%,transparent 100%)}
.c1{animation:drift1 18s linear infinite}
.c2{background-size:340px 340px;opacity:.07;animation:drift2 23s linear infinite}
@keyframes drift1{from{transform:translate3d(0,0,0)}to{transform:translate3d(-256px,-128px,0)}}
@keyframes drift2{from{transform:translate3d(-340px,0,0)}to{transform:translate3d(0,-170px,0)}}

/* water drops */
.drop{transform-box:fill-box;animation:fall 2.4s cubic-bezier(.55,0,1,.45) infinite;opacity:0}
.d2{animation-delay:.8s}.d3{animation-delay:1.6s}
@keyframes fall{0%{transform:translate3d(0,0,0) scale(.4);opacity:0}8%{opacity:1;transform:translate3d(0,0,0) scale(1)}92%{opacity:1}100%{transform:translate3d(0,188px,0);opacity:0}}
.ripple{transform-box:fill-box;transform-origin:center;animation:rip 2.4s ease-out infinite;opacity:0}
.r1{animation-delay:-.2s}.r2{animation-delay:.6s}
@keyframes rip{0%{transform:scale(.2);opacity:.95}70%{opacity:0}100%{transform:scale(3.4);opacity:0}}

/* electricity */
#pulses path{stroke-dasharray:4 96;animation:flow 3.2s linear infinite}
.lpulse path{stroke-dasharray:3 97;animation:flow 3.6s linear infinite;filter:drop-shadow(0 0 3px #c8551b)}
@keyframes flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.blink{animation:blink 2.8s steps(1) infinite}
@keyframes blink{0%,70%{opacity:1}72%{opacity:.2}76%{opacity:1}80%{opacity:.3}84%,100%{opacity:1}}

/* copy */
.copy{position:absolute;z-index:5;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top) + 64px) var(--pad) 40px;
  background:linear-gradient(to bottom,rgba(5,6,7,.92) 0,rgba(5,6,7,.7) 62%,transparent 100%);will-change:transform}
.copy.bottom{top:auto;bottom:0;padding:70px var(--pad) calc(env(safe-area-inset-bottom) + 64px);
  background:linear-gradient(to top,rgba(5,6,7,.95) 0,rgba(5,6,7,.75) 60%,transparent 100%)}
.kicker{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.kicker span{color:var(--accent);margin-right:8px}
h2{font-size:clamp(34px,10.4vw,64px);line-height:.98;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;max-width:12ch}
.fact{margin-top:14px;font-size:15px;line-height:1.4;color:var(--dim);max-width:30ch;border-left:2px solid var(--accent);padding-left:10px}

.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0}
.glitch::before{color:var(--accent);animation:g1 5.5s infinite steps(1)}
.glitch::after{color:#7fe3ff;mix-blend-mode:screen;animation:g2 5.5s infinite steps(1)}
@keyframes g1{0%,91%,100%{opacity:0;transform:none;clip-path:none}
  92%{opacity:.9;transform:translate(-3px,1px);clip-path:inset(10% 0 62% 0)}
  94%{opacity:.9;transform:translate(4px,-1px);clip-path:inset(55% 0 20% 0)}
  96%{opacity:.8;transform:translate(-2px,0);clip-path:inset(30% 0 45% 0)}}
@keyframes g2{0%,92%,100%{opacity:0;transform:none;clip-path:none}
  93%{opacity:.5;transform:translate(3px,0);clip-path:inset(62% 0 8% 0)}
  95%{opacity:.5;transform:translate(-4px,1px);clip-path:inset(4% 0 75% 0)}}

/* CTA */
.cta{position:absolute;z-index:6;left:0;right:0;bottom:0;padding:40px var(--pad) calc(env(safe-area-inset-bottom) + 58px);
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  background:linear-gradient(to top,rgba(5,6,7,.9) 0,rgba(5,6,7,.6) 60%,transparent 100%)}
.btn{display:inline-flex;gap:8px;align-items:center;background:var(--fg);color:#050607;text-decoration:none;font-weight:800;
  font-size:14px;letter-spacing:.02em;text-transform:uppercase;padding:14px 16px;border-radius:2px;box-shadow:4px 4px 0 var(--accent);
  transition:transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--accent)}
.sub{font-size:13px;color:var(--dim);text-decoration:none;border-bottom:1px solid rgba(200,85,27,.7);padding-bottom:2px}
.next{position:absolute;z-index:7;bottom:calc(env(safe-area-inset-bottom) + 16px);left:50%;transform:translateX(-50%);
  font-size:18px;text-decoration:none;color:var(--dim);animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,5px)}}

.end{display:flex;align-items:center;background:radial-gradient(ellipse at 30% 40%,#120a06 0,#050607 65%)}
.endwrap{padding:0 var(--pad);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.endwrap .fact{margin-top:0;margin-bottom:10px}
.fine{margin-top:22px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,242,242,.4)}

/* permission gate */
.gate{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:rgba(5,6,7,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.gate[hidden]{display:none}
.gatebtn{display:flex;flex-direction:column;align-items:center;gap:14px;background:none;border:1px solid var(--fg);color:var(--fg);
  font:800 15px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;padding:26px 28px;cursor:pointer;box-shadow:5px 5px 0 var(--accent)}
.phone{width:22px;height:38px;border:2px solid var(--fg);border-radius:5px;position:relative;animation:tilt 1.8s ease-in-out infinite}
.phone::after{content:"";position:absolute;left:50%;bottom:3px;width:6px;height:2px;margin-left:-3px;background:var(--accent)}
@keyframes tilt{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.skip{background:none;border:0;color:var(--dim);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;cursor:pointer;padding:8px}

/* wide screens: copy in a left column, art centered */
@media (min-aspect-ratio:4/5){
  .copy,.copy.bottom{top:50%;bottom:auto;transform:translateY(-50%);left:0;right:auto;width:min(44vw,560px);
    padding:0 0 0 clamp(24px,6vw,96px);background:none}
  .copy h2{font-size:clamp(34px,4.6vw,72px)}
  .cta{left:0;right:auto;width:min(44vw,560px);padding:0 0 clamp(40px,10vh,110px) clamp(24px,6vw,96px);background:none}
  .stage::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(5,6,7,.9) 0,rgba(5,6,7,.55) 36%,transparent 60%);z-index:3}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .drop{opacity:0}.ripple{opacity:0}
  .drop.d2{opacity:1;transform:translate3d(0,90px,0)}
}

/* soundtrack toggle (never autoplays) */
#sndtrk{position:fixed;right:14px;bottom:14px;z-index:50;font:600 11px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#f2f2f2;background:rgba(10,14,20,.72);border:1px solid rgba(242,242,242,.25);border-radius:999px;padding:9px 13px;cursor:pointer;backdrop-filter:blur(6px)}
#sndtrk[aria-pressed="true"]{border-color:rgba(242,242,242,.6)}