/* ============================================================
   BeavrDam — cinematic scroll-scrub landing
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --bg:#05080c;
  --orange:#FF8C00;
  --orange-deep:#E65C00;
  --lime:#C8FF00;
  --text:#E2E8F0;
  --muted:#94A3B8;
  --accent:#FF8C00;          /* driven per-section by JS */
  --accent-soft:#FF8C00;
  --ambient:1;               /* ambient motion multiplier (JS) */
  --intensity:1;             /* accent glow multiplier (JS) */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block}
button{font-family:inherit;cursor:pointer}

/* ---------- fixed cinematic stage ---------- */
#stage{
  position:fixed; inset:0; z-index:1;
  background:#000;
  overflow:hidden;
}
.clip{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0;
  will-change:opacity;
  transition:opacity .14s linear;
  transform:translateZ(0);
}
.clip.show{opacity:1}
.clip-final{object-fit:contain}

/* faint accent wash behind clips so seeks never flash pure black */
#stage::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 50% 120%, color-mix(in oklab, var(--accent) 35%, #000) 0%, #04060a 60%);
  opacity:.9;
}

/* ---------- ambient-alive layers ---------- */
.fx{position:fixed; inset:0; z-index:2; pointer-events:none}
.fx-glow{
  background:
    radial-gradient(75% 55% at 50% 112%, color-mix(in oklab, var(--accent) 70%, transparent) 0%, transparent 60%),
    radial-gradient(60% 40% at 8% 18%, color-mix(in oklab, var(--accent) 26%, transparent) 0%, transparent 70%);
  opacity:calc(var(--intensity) * 0.55);
  mix-blend-mode:screen;
  transition:opacity .5s ease;
}
.fx-haze{
  background:radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(8,11,18,.55) 100%);
  opacity:var(--ambient);
}
.fx-vignette{
  box-shadow:inset 0 0 220px 60px rgba(0,0,0,.75), inset 0 0 60px 0 rgba(0,0,0,.5);
}
#dust{position:fixed; inset:0; z-index:3; pointer-events:none; opacity:calc(var(--ambient)*0.9)}

/* film grain */
.fx-grain{
  z-index:3;
  opacity:calc(var(--ambient)*0.06);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 33%{transform:translate(-4px,3px)} 66%{transform:translate(3px,-2px)} 100%{transform:translate(0,0)}
}

/* ---------- UI overlays ---------- */
.ui{position:fixed; z-index:6; pointer-events:none}

.brand{
  top:28px; left:34px;
  display:flex; align-items:center; gap:12px;
}
.brand img{width:38px; height:38px; filter:drop-shadow(0 2px 10px rgba(255,140,0,.4))}
.brand b{
  font-weight:900; font-size:19px; letter-spacing:.2px;
  color:#fff;
}
.brand b span{color:var(--orange)}

/* progress rail */
.progress{
  bottom:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, color-mix(in oklab, var(--accent) 80%, #fff) , var(--accent));
  box-shadow:0 0 14px color-mix(in oklab, var(--accent) 80%, transparent);
  z-index:7;
  transition:background .5s ease;
}

/* hero copy */
.hero{
  inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:0 6vw;
  text-align:center;
}
.hero .kicker{
  font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.42em;
  text-transform:uppercase; color:var(--orange); margin-bottom:8px;
  opacity:.92;
}
.hero h1{
  font-weight:900; font-size:clamp(38px,6.4vw,104px); line-height:.98;
  letter-spacing:-.02em; max-width:16ch;
  text-shadow:0 4px 40px rgba(0,0,0,.75);
}
.hero h1 em{font-style:normal; color:var(--orange)}
/* particle headline canvas — occupies the headline slot */
.hero-canvas-wrap{
  width:min(860px, 90vw); height:clamp(66px, 9vw, 124px);
  margin:2px 0 6px;
}
.hero-canvas-wrap canvas{display:block; width:100%; height:100%}
.hero p{
  margin-top:10px; max-width:42ch; font-size:clamp(18px,2.1vw,28px);
  line-height:1.5; color:var(--text); text-shadow:0 2px 20px rgba(0,0,0,.8);
}
.hero p b{color:var(--orange); font-weight:900}

/* scroll cue */
.cue{
  left:50%; bottom:34px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.36em;
  text-transform:uppercase; color:var(--muted);
}
.cue .mouse{
  width:24px; height:38px; border:2px solid color-mix(in oklab, var(--orange) 70%, #888);
  border-radius:14px; position:relative;
}
.cue .mouse::after{
  content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:4px; height:7px; border-radius:3px; background:var(--orange);
  animation:wheel 1.7s ease-in-out infinite;
}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* CTA */
.cta{
  inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 6vw; gap:0;
}
.cta h2{
  font-weight:900; font-size:clamp(40px,7vw,118px); line-height:.95; letter-spacing:-.025em;
  text-shadow:0 6px 50px rgba(0,0,0,.8);
}
.cta h2 em{font-style:normal;color:var(--orange)}
.cta p{
  margin-top:26px; font-size:clamp(16px,1.6vw,23px); line-height:1.5; color:var(--text);
  max-width:40ch; text-shadow:0 2px 20px rgba(0,0,0,.85);
}
.cta .actions{
  margin-top:42px; display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
  pointer-events:auto;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:17px 34px; border-radius:999px; font-weight:800; font-size:17px;
  border:none; letter-spacing:.01em; text-decoration:none; transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .2s;
}
.btn-primary{
  background:linear-gradient(180deg,var(--orange),var(--orange-deep)); color:#1a0f02;
  box-shadow:0 10px 34px rgba(255,140,0,.42), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 16px 46px rgba(255,140,0,.6)}
.btn-ghost{
  background:rgba(13,20,32,.55); color:var(--text);
  border:1.5px solid rgba(226,232,240,.35); backdrop-filter:blur(8px);
}
.btn-ghost:hover{transform:translateY(-3px); border-color:var(--orange); color:#fff}

/* ---------- clickable hotspots over baked CTA buttons ---------- */
#hotspots{
  position:fixed; z-index:6; opacity:0; pointer-events:none;
  transition:opacity .45s ease;
}
#hotspots.live{opacity:1}
.hotspot{
  position:absolute; pointer-events:none; cursor:pointer;
  display:block;
}
#hotspots.live .hotspot{pointer-events:auto}
.hotspot span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.hotspot.app{ left:25%;   width:25.2%; top:85%; height:9.6%; }
.hotspot.demo{ left:51.4%; width:25.4%; top:85%; height:9.6%; }

/* ---------- scroll track (creates scroll height; invisible) ---------- */
#track{position:relative; z-index:0; width:1px; pointer-events:none}

/* ---------- footer ---------- */
footer{
  position:relative; z-index:8;
  background:linear-gradient(180deg,#05080c 0%, #03050a 100%);
  border-top:1px solid rgba(255,140,0,.18);
  padding:46px 7vw 40px;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
footer .f-brand{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px}
footer .f-brand img{width:30px;height:30px;opacity:.9}
footer nav{display:flex; gap:30px; flex-wrap:wrap}
footer a{
  color:var(--muted); text-decoration:none; font-size:14px; font-weight:600;
  transition:color .18s;
}
footer a:hover{color:var(--orange)}
footer .copy{color:#54607a; font-size:12.5px; width:100%; margin-top:8px}

/* ---------- loader ---------- */
#loader{
  position:fixed; inset:0; z-index:50; background:#04060a;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:opacity .8s ease;
}
#loader.gone{opacity:0; pointer-events:none}
#loader img{width:76px; height:76px; animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,140,0,0))}50%{transform:scale(1.06);filter:drop-shadow(0 0 26px rgba(255,140,0,.7))}}
#loader .lbar{width:190px; height:3px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden}
#loader .lbar i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--orange),var(--lime)); transition:width .3s ease}
#loader .ltxt{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--muted)}

/* reduced-motion safety */
@media (prefers-reduced-motion: reduce){
  .fx-grain{animation:none}
  .cue .mouse::after{animation:none}
}