/* Studios of Las Vegas — scroll-driven landing
   Dark-committed by design: the canvas footage is night Vegas, so the page
   holds one visual world rather than flipping with the viewer's theme. */


/* ---------- 1. loader ---------- */
#loader{
  position:fixed; inset:0; z-index:200; background:var(--bg-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .7s ease, visibility .7s ease;
}
#loader.done{opacity:0; visibility:hidden}
.loader-brand{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.42em;
  color:var(--amber); text-indent:.42em;
}
.loader-track{width:min(280px,54vw); height:2px; background:rgba(244,241,234,.13); overflow:hidden}
#loader-bar{width:0%; height:100%; background:var(--amber); transition:width .25s ease}
#loader-percent{font-family:var(--font-mono); font-size:11px; color:var(--text-dim);
  font-variant-numeric:tabular-nums}

/* ---------- 2. header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; gap:16px; padding:20px 5vw;
  mix-blend-mode:difference;
}
.site-header .logo{display:flex; align-items:center; gap:11px; text-decoration:none}
.site-header .logo img{width:26px; height:26px; object-fit:contain}
.site-header .logo span{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.26em; color:#FFF;
}
.site-header nav{margin-left:auto; display:flex; gap:24px}
.site-header nav a{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:#FFF; text-decoration:none;
  padding-bottom:3px; border-bottom:1px solid transparent;
}
.site-header nav a:hover,.site-header nav a:focus-visible{border-bottom-color:#FFF}

/* ---------- 3. hero ---------- */
.hero-standalone{
  position:relative; z-index:40; height:100vh; background:var(--bg-dark);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 5vw;
}
.hero-inner{max-width:1400px}
.section-label{
  display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--amber); margin-bottom:26px;
}
.hero-heading{
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(3.4rem,12.5vw,13rem); line-height:.86; letter-spacing:-.035em;
  color:var(--text-on-dark);
}
.hero-heading span{display:block; overflow:hidden}
.hero-tagline{
  margin:34px 0 0; max-width:34ch; font-size:clamp(15px,1.5vw,19px);
  color:var(--text-dim); font-weight:300;
}
.scroll-indicator{
  position:absolute; left:5vw; bottom:38px; display:flex; align-items:center; gap:13px;
  color:var(--text-dim);
}
.scroll-indicator span{font-family:var(--font-mono); font-size:10px; letter-spacing:.3em}
.scroll-indicator svg{animation:nudge 2.1s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

/* ---------- 4. canvas ---------- */
.canvas-wrap{
  position:fixed; inset:0; z-index:1; background:var(--bg-deep);
  clip-path:circle(0% at 50% 50%);
}
#canvas{display:block; width:100%; height:100%}

/* ---------- 5. dark overlay ---------- */
#dark-overlay{
  position:fixed; inset:0; z-index:2; background:var(--bg-deep);
  opacity:0; pointer-events:none;
}

/* ---------- 6. marquee ---------- */
.marquee-wrap{
  position:fixed; top:50%; left:0; width:100%; z-index:3;
  transform:translateY(-50%); opacity:0; pointer-events:none; overflow:hidden;
}
.marquee-text{
  display:inline-block; white-space:nowrap;
  font-family:var(--font-display); font-size:13vw; line-height:1;
  letter-spacing:-.02em; color:rgba(244,241,234,.07);
}

/* ---------- 7. scroll sections ---------- */
#scroll-container{position:relative; z-index:10; height:900vh}
.scroll-section{
  position:absolute; left:0; width:100%;
  transform:translateY(-50%); opacity:0;
}
.section-inner{max-width:40vw}
.align-left{padding-left:5vw; padding-right:55vw}
.align-right{padding-left:55vw; padding-right:5vw}
.align-right .section-inner{margin-left:auto}

.section-heading{
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(2rem,4.6vw,4.6rem); line-height:1.02; letter-spacing:-.028em;
  color:var(--text-on-dark); text-wrap:balance;
}
.section-body{
  margin:20px 0 0; font-size:clamp(15px,1.15vw,17px); color:#D6D1C6;
  font-weight:300; max-width:38ch;
}
.section-note{
  margin:18px 0 0; font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.05em; color:var(--text-dim); line-height:1.9;
}
.section-note a{color:var(--amber)}

/* stats — the one place centred text is allowed, over the dark overlay */
.section-stats{padding:0 5vw}
.stats-grid{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center;
}
.stat{display:flex; flex-direction:column; align-items:center; gap:6px}
.stat-number{
  font-family:var(--font-display); font-size:clamp(2.4rem,6vw,5.6rem); line-height:.94;
  color:var(--amber); font-variant-numeric:tabular-nums;
}
.stat-suffix{font-family:var(--font-mono); font-size:12px; color:var(--amber-deep); letter-spacing:.1em}
.stat-label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-dim); margin-top:8px;
}

/* cta */
.cta-button{
  display:inline-block; margin-top:28px; padding:15px 30px;
  background:var(--amber); color:#0E1014; text-decoration:none;
  font-weight:600; font-size:14px; letter-spacing:.02em; border-radius:2px;
  border:1px solid var(--amber);
}
.cta-button:hover,.cta-button:focus-visible{filter:brightness(1.09)}

a:focus-visible,.cta-button:focus-visible{outline:2px solid var(--amber); outline-offset:3px}

/* ---------- mobile ---------- */
@media (max-width:768px){
  #scroll-container{height:560vh}
  .align-left,.align-right{padding:0 7vw}
  .section-inner{max-width:100%; margin-left:0}
  .scroll-section .section-inner{
    background:rgba(8,9,12,.82); padding:26px 22px; border-radius:3px;
  }
  .stats-grid{grid-template-columns:repeat(2,1fr); gap:34px 18px}
  .marquee-text{font-size:22vw}
  .site-header{padding:16px 6vw}
  .site-header .logo span{display:none}
}

@media (prefers-reduced-motion:reduce){
  .scroll-indicator svg{animation:none}
}