:root{
  --gold:#FED100;
  --green:#009B3A;
  --ink:#f5f1e6;
  --dim:rgba(245,241,230,.55);
  --bg:#030303;
  --card:rgba(8,8,8,.72);
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  /* Give every piece room to hold, orbit and breathe before the next one enters. */
  height:980vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:#000}

/* ---------- 3D canvas & atmosphere ---------- */
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab;transition:filter .25s ease}
#scene:active{cursor:grabbing}
#scene:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
body.is-focused{overflow:hidden;overscroll-behavior:none}
body.is-focused #scene{filter:none}
body.is-focused #hero,body.is-focused #scroll-hint{opacity:0!important}
/* In focus mode this element becomes the selected gallery panel itself. The
   frame and video share one stable compositor layer, so mobile playback cannot
   detach from or erase its container. */
#player-shell{position:fixed;z-index:7;overflow:hidden;background:#050505;border:6px solid var(--gold);border-radius:18px;
  box-shadow:inset 0 0 0 3px var(--green),0 0 34px rgba(254,209,0,.16);padding:4px;
  transform:none;transform-origin:0 0;contain:layout paint;isolation:isolate;pointer-events:none;
  opacity:1;visibility:visible}
/* Keep the single native video mounted and renderable between activations.
   Android WebViews can refuse playback when a media element begins display:none. */
#player-shell.is-inactive{left:-200vw!important;top:0!important;width:2px!important;height:2px!important;opacity:0;visibility:hidden}
#video-player{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px;background:#000;pointer-events:none}
#player-progress{position:absolute;left:10px;right:10px;bottom:7px;height:3px;background:rgba(255,255,255,.2);pointer-events:none}
#player-progress span{display:block;width:0;height:100%;background:var(--gold)}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.55) 100%);}
.grain{position:fixed;inset:-40px;pointer-events:none;z-index:4;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:50;background:#030303;display:flex;align-items:center;justify-content:center;
  transition:opacity .8s ease,visibility .8s}
#loader.done{opacity:0;visibility:hidden}
.loader-inner{text-align:center}
.loader-crown{font-size:44px;color:var(--gold);text-shadow:0 0 30px rgba(254,209,0,.6);animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.loader-title{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(28px,6vw,54px);letter-spacing:.35em;margin:14px 0 18px;text-indent:.35em}
.loader-bar{width:min(320px,60vw);height:2px;background:rgba(255,255,255,.12);margin:0 auto;overflow:hidden;border-radius:2px}
.loader-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--gold));transition:width .3s}
.loader-sub{margin-top:12px;font-size:12px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}

/* ---------- hero ---------- */
#hero{position:fixed;top:max(28px,env(safe-area-inset-top));left:clamp(20px,4vw,56px);z-index:10;pointer-events:none;
  transition:opacity .4s}
.eyebrow{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.eyebrow span{color:var(--dim);letter-spacing:.42em}
#hero h1{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(52px,11vw,150px);line-height:.92;margin:0;
  letter-spacing:.02em;text-shadow:0 6px 40px rgba(0,0,0,.7)}
#hero h1 .scorp,#outro .scorp{color:var(--gold)}
.hero-sub{margin:12px 0 0;max-width:44ch;font-size:clamp(13px,1.6vw,16px);color:var(--dim);line-height:1.5}
#scroll-hint{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:10;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .4s}
#scroll-hint span{font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:var(--dim);text-indent:.5em}
#scroll-hint i{width:1px;height:44px;background:linear-gradient(var(--gold),transparent);display:block;animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- caption card ---------- */
#caption{position:fixed;left:clamp(16px,3.5vw,48px);bottom:calc(24px + env(safe-area-inset-bottom));z-index:10;
  max-width:min(400px,calc(100vw - 32px));background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(254,209,0,.22);border-left:3px solid var(--gold);border-radius:10px;padding:16px 18px;
  transition:opacity .35s,transform .35s}
#caption.hidden{opacity:0;transform:translateY(12px);pointer-events:none}
.cap-index{margin:0 0 6px;font-size:11px;letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
.cap-text{margin:0 0 10px;font-size:15px;line-height:1.55}
.cap-meta{font-size:12px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.dot-sep{margin:0 8px;color:var(--gold)}
.cap-actions{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;margin-top:12px}
.cap-actions a{color:var(--ink);font-size:13px;letter-spacing:.06em;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}
.cap-actions a:hover{color:var(--gold)}
#play-btn,#sound-btn{border:1px solid rgba(245,241,230,.35);color:var(--ink);border-radius:999px;
  font-size:12px;letter-spacing:.1em;padding:7px 14px;cursor:pointer;text-transform:uppercase}
#play-btn{background:var(--gold);border-color:var(--gold);color:#050505;font-weight:700}
#sound-btn{background:transparent}
#play-btn:hover{background:#ffe052;border-color:#ffe052}
#sound-btn:hover{border-color:var(--gold);color:var(--gold)}
#play-btn[hidden],#sound-btn[hidden]{display:none}
#play-status{min-height:0;margin:8px 0 0;color:#ffd96a;font-size:12px;line-height:1.4}
#play-status:empty{display:none}

/* ---------- dots ---------- */
#dots{position:fixed;right:clamp(14px,3vw,34px);top:50%;transform:translateY(-50%);z-index:10;
  display:flex;flex-direction:column;gap:14px}
#dots button{width:9px;height:9px;border-radius:50%;border:1px solid rgba(245,241,230,.4);background:transparent;
  padding:0;cursor:pointer;transition:all .3s}
#dots button.active{background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(254,209,0,.8);transform:scale(1.35)}

/* ---------- focus mode ---------- */
#focus-close{position:fixed;top:max(24px,env(safe-area-inset-top));right:clamp(16px,3.5vw,48px);z-index:20;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(245,241,230,.4);background:rgba(0,0,0,.55);
  color:var(--ink);font-size:16px;cursor:pointer;backdrop-filter:blur(8px)}
#focus-close:hover{border-color:var(--gold);color:var(--gold)}
#focus-hint{position:fixed;top:max(84px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:10;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);pointer-events:none;white-space:nowrap}

/* ---------- outro ---------- */
#outro{position:fixed;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;pointer-events:none;opacity:0;transition:opacity .6s;text-align:center;padding:0 20px}
#outro.show{opacity:1;pointer-events:auto}
#outro .outro-big{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(44px,9vw,120px);line-height:.95;margin:0}
#outro a{color:var(--gold);font-size:14px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--gold);border-radius:999px;padding:12px 28px}
#outro a:hover{background:var(--gold);color:#000}

#credit{position:fixed;right:clamp(14px,3vw,34px);bottom:calc(20px + env(safe-area-inset-bottom));z-index:10;
  margin:0;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(245,241,230,.35);pointer-events:none}

@media (max-width:640px){
  #dots{display:none}
  #caption{left:12px;right:12px;max-width:none;padding:14px}
  #focus-hint{display:none}
  #credit{display:none}
  .hero-sub{max-width:30ch}
}
@media (prefers-reduced-motion:reduce){
  #scroll-hint i,.loader-crown{animation:none}
}