:root{
  --bg:#0a110d; --bg2:#0f1a14; --ink:#eef3ee; --mute:#9db0a3;
  --green:#17b56e; --green-d:#073722; --gold:#c9a24a; --red:#e2483a;
  --brush:'Permanent Marker',cursive; --sans:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--bg);overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
body.locked{overflow:hidden;height:100svh}
img,video{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

.brush{font-family:var(--brush);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--green);margin-bottom:1rem}
h2{font-size:clamp(2rem,5vw,3.8rem);font-weight:800;line-height:1.02;letter-spacing:-.02em}
.lead{color:var(--mute);font-size:clamp(1rem,1.4vw,1.2rem);max-width:34ch;margin-top:1.2rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.95rem 1.8rem;border-radius:999px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.9rem;transition:background .2s,color .2s,box-shadow .2s}
.btn-primary{background:var(--green);color:#04150c;box-shadow:0 0 0 0 rgba(23,181,110,.5)}
.btn-primary:hover{background:#2bd486;box-shadow:0 0 40px rgba(23,181,110,.45)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.3)}
.btn-ghost:hover{border-color:#fff}
.btn-xl{font-family:var(--brush);font-weight:400;font-size:1.6rem;letter-spacing:.06em;padding:1rem 3rem}
.link{color:var(--mute);text-decoration:underline;text-underline-offset:4px;margin-top:.4rem;font-size:.9rem;padding:.7rem 1rem}
.link:hover{color:#fff}

/* age gate */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(5,9,7,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.gate.gone{opacity:0;pointer-events:none;transition:opacity .6s}
.gate-card{max-width:440px;width:100%;text-align:center;background:linear-gradient(160deg,#122319,#0a110d);border:1px solid rgba(201,162,74,.35);border-radius:28px;padding:2.4rem 1.6rem}
.gate-logo{width:150px;margin:0 auto 1rem;filter:invert(1)}
.gate-title{font-family:var(--brush);font-weight:400;font-size:2.6rem;margin-bottom:.6rem}
.gate-card p{color:var(--mute)} .gate-card strong{color:var(--ink)}
.gate-btns{display:flex;gap:.8rem;justify-content:center;margin-top:1.6rem;flex-wrap:wrap}
.gate-no-msg{margin-top:1.2rem;color:var(--gold)!important}

/* hunt */
.hunt{position:relative;height:100svh;overflow:hidden;overflow:clip;background:#05080a;cursor:default}
.hunt.playing{cursor:crosshair}
.hunt-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:var(--ox,50%) var(--oy,50%);animation:drift 30s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.08)}}
/* no drift on the clips: the tap target is mapped to untransformed video pixels */
.hunt-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fog{position:absolute;inset:-20% -50%;pointer-events:none;opacity:.35;background:radial-gradient(ellipse 40% 18% at 30% 70%,rgba(190,210,230,.35),transparent 70%),radial-gradient(ellipse 35% 14% at 75% 60%,rgba(190,210,230,.3),transparent 70%);animation:fog 40s linear infinite}
.fog-2{opacity:.25;animation-duration:65s;animation-direction:reverse;top:-10%}
@keyframes fog{to{transform:translateX(25%)}}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.75))}
.hunt-title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;z-index:5;background:radial-gradient(ellipse at center,rgba(0,0,0,.35),transparent 70%)}
.hunt-title .big{font-size:clamp(3.2rem,11vw,9rem);margin-bottom:2rem;text-shadow:0 6px 40px rgba(0,0,0,.8)}
.hud{position:absolute;top:16px;left:16px;right:16px;z-index:6;display:flex;gap:1.2rem;align-items:center;font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 6px #000;pointer-events:none}
.rec{color:var(--red);animation:blink 1.2s steps(2) infinite}
#hud-tip{margin-left:auto;color:var(--mute)}
@keyframes blink{50%{opacity:0}}
.hotspot{position:absolute;z-index:7;width:var(--r);height:var(--r);transform:translate(-50%,-50%);border-radius:50%}
.ring{position:absolute;z-index:6;width:var(--r);height:var(--r);transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(23,181,110,.9);box-shadow:0 0 30px rgba(23,181,110,.6);animation:pulse 1.4s ease-out infinite;pointer-events:none}
@keyframes pulse{from{transform:translate(-50%,-50%) scale(.6);opacity:1}to{transform:translate(-50%,-50%) scale(1.25);opacity:0}}
.flash{position:absolute;inset:0;z-index:8;background:#fff;opacity:0;pointer-events:none}
.toast{position:absolute;left:50%;bottom:8%;z-index:9;transform:translateX(-50%);padding:.7rem 1.3rem;border-radius:999px;background:rgba(0,0,0,.7);font-weight:700;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1}
.found{position:absolute;inset:auto 0 0 0;z-index:5;padding:16px 16px 9svh;text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.85) 55%)}
.found h2{font-size:clamp(2.6rem,7vw,5.5rem);margin-bottom:.4rem}
.found p:not(.eyebrow){color:var(--mute);margin-bottom:1.4rem}

/* pinned product stages */
.stage{position:relative}
.stage-pin{height:100svh;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4vw;padding:0 max(16px,6vw)}
.stage-copy{position:relative;align-self:stretch;display:grid;align-items:center}
.step{grid-area:1/1;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s;pointer-events:none}
.step.on{opacity:1;transform:none}
.progress{position:absolute;left:0;bottom:12svh;width:120px;height:2px;background:rgba(255,255,255,.12)}
.progress i{display:block;height:100%;width:100%;background:var(--gold);transform-origin:left;transform:scaleX(var(--p,0))}
.sub{font-size:clamp(1.6rem,3vw,2.6rem);color:var(--green);margin-top:.8rem}
.device{position:relative;height:88svh;aspect-ratio:9/16}
.device video{width:100%;height:100%;object-fit:contain}
#prod{width:100%;height:100%;object-fit:contain}
.part{position:absolute;left:calc(var(--x)/1080*100%);top:calc(var(--y)/1920*100%);display:flex;flex-direction:column;padding-left:calc((722 - var(--x))/1080*100% + 20px);opacity:0;transform:translateY(-50%);pointer-events:none;white-space:nowrap}
.part::before{content:"";position:absolute;left:-6px;top:50%;width:11px;height:11px;margin-top:-6px;border-radius:50%;background:var(--bg);border:2px solid var(--gold)}
.part::after{content:"";position:absolute;left:6px;top:50%;width:calc((722 - var(--x))/1080*100% + 8px);height:1.5px;background:var(--gold)}
#beast .device{margin-right:clamp(170px,19vw,280px)}
/* bg lives on ::before at 100lvh: the pin is 100svh, and when iOS Safari collapses its toolbar the screen grows past
   svh, which left a bare strip under the background */
#beast .stage-pin{position:relative;isolation:isolate}
#beast .stage-pin::before{content:"";position:absolute;left:0;right:0;top:0;height:100lvh;z-index:-1}
/* sighting-2 frame (him mid-stride on the path) behind the (transparent) product: dark on the copy side, lifted in the
   middle where he walks, faint green glow behind the device */
#beast .stage-pin::before{background:
  radial-gradient(ellipse 22% 38% at 72% 55%,rgba(23,181,110,.16),transparent 70%),
  linear-gradient(90deg,rgba(10,17,13,.94) 0%,rgba(10,17,13,.8) 30%,rgba(10,17,13,.3) 48%,rgba(10,17,13,.45) 100%),
  linear-gradient(0deg,var(--bg) 0%,transparent 22%,transparent 78%,var(--bg) 100%),
  url(assets/beast-bg.jpg) 55% 50%/cover var(--bg)}
.part b{font-size:.95rem}
.part span{font-size:.78rem;color:var(--mute)}

.marquee{position:relative;z-index:1;overflow:hidden;border-block:1px solid rgba(201,162,74,.3);padding:1.1rem 0;background:var(--bg2)}
.marquee div{display:inline-block;white-space:nowrap;font-family:var(--brush);font-size:clamp(1.4rem,3vw,2.4rem);color:var(--green);animation:marq 28s linear infinite}
.marquee.alt div{color:var(--gold);animation-direction:reverse}
@keyframes marq{to{transform:translateX(-50%)}}

/* control */
.control{padding:18vh max(16px,6vw);max-width:1300px;margin:0 auto;position:relative;isolation:isolate}
/* full-bleed sighting-1 still (him peeking, right of the headline) behind the max-width box */
.control::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:
  linear-gradient(90deg,rgba(10,17,13,.92) 0%,rgba(10,17,13,.75) 40%,rgba(10,17,13,.12) 75%,rgba(10,17,13,.45) 100%),
  linear-gradient(180deg,var(--bg) 0%,transparent 18%,transparent 55%,var(--bg) 90%),
  url(assets/control-bg.jpg) 50% -60px/100% auto no-repeat var(--bg)}
.control h2{max-width:22ch}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3.5rem}
.card{background:linear-gradient(160deg,#13241a,#0b130e);border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:1.8rem;transition:border-color .3s;transform-style:preserve-3d}
.card:hover{border-color:rgba(201,162,74,.5)}
.card h3{font-size:1.4rem;margin:1.4rem 0 .4rem}
.card p{color:var(--mute)}
.screen{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;background:#050806;border-radius:16px;padding:1.2rem .8rem 1.6rem;border:1px solid #1d2a22}
.screen em{font-style:normal;font-family:'Courier New',monospace;font-weight:700;font-size:2.4rem;color:#f2f2f2;letter-spacing:.05em}
.screen .fl{font-style:normal;font-size:1.6rem;filter:grayscale(1) brightness(.35);transition:filter .4s}
.screen small{position:absolute;bottom:.35rem;font-size:.7rem;font-weight:800;color:#555}
.screen small:first-of-type{left:22%} .screen small:last-of-type{right:22%}
.card[data-side=a] .fl.a,.card[data-side=b] .fl.b,.card[data-side=ab] .fl{filter:none;animation:flick 1.6s ease-in-out infinite alternate}
.card[data-side=b] .fl.b,.card[data-side=ab] .fl.b{filter:hue-rotate(95deg)}
@keyframes flick{to{transform:scale(1.12)}}

.specs{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(201,162,74,.25);border-block:1px solid rgba(201,162,74,.25)}
.specs div{background:var(--bg);padding:2.4rem 1rem;text-align:center;display:flex;flex-direction:column;gap:.3rem}
.specs strong{font-size:clamp(1.3rem,2.4vw,2rem);font-weight:800}
.specs span:not(.count){color:var(--mute);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}

.closing{position:relative;min-height:90svh;display:grid;place-items:center;text-align:center;overflow:hidden}
.closing-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:66% 60%;opacity:.55}
.closing::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--bg),transparent 30%,transparent 70%,var(--bg))}
.closing-copy{position:relative;z-index:1;padding:16px;max-width:640px}
.big2{font-size:clamp(2.8rem,8vw,6rem);margin-bottom:1rem}
.closing-copy p{color:var(--mute);margin-bottom:1.8rem}

.footer{text-align:center;padding:4rem 16px 3rem;color:var(--mute);font-size:.85rem;display:grid;gap:.4rem;justify-items:center}
.footer-logo{width:120px;filter:invert(1);opacity:.85;margin-bottom:.8rem}
.fine{font-style:italic;opacity:.7}
.footer a{color:var(--green);text-decoration:none}
.footer a:hover{text-decoration:underline}

/* word reveal */
.reveal .w{display:inline-block;opacity:0;transform:translateY(.4em)}

@media (max-width:820px){
  .stage-pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;padding-top:9svh;gap:2svh}
  .stage-copy h2{font-size:2rem} .lead{font-size:.95rem;margin-top:.6rem}
  .device{height:auto;width:min(56vw,31svh);justify-self:center}
  .progress{display:none}
  .part span{display:none} .part b{font-size:.7rem}
  #beast .device{margin-right:0;justify-self:center}
  #beast .stage-pin::before{background:
    radial-gradient(ellipse 45% 30% at 50% 65%,rgba(23,181,110,.16),transparent 70%),
    linear-gradient(180deg,rgba(10,17,13,.92) 0%,rgba(10,17,13,.7) 35%,rgba(10,17,13,.4) 100%),
    url(assets/beast-bg.jpg) 61% 50%/cover var(--bg)}  /* 61%: he walks beside the centred device, not behind it */
  .control::before{background:
    linear-gradient(180deg,var(--bg) 0%,rgba(10,17,13,.55) 12%,rgba(10,17,13,.55) 30%,var(--bg) 52%),
    url(assets/control-bg.jpg) 55% -40px/auto 60svh no-repeat var(--bg)}
  .cards{grid-template-columns:1fr}
  .specs{grid-template-columns:repeat(2,1fr)}
  .specs div:last-child{grid-column:span 2}
  .hud{font-size:.7rem;gap:.7rem} #hud-tip{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal .w{opacity:1;transform:none}
}