/* ============================================================
   stamm.fit — cinematic scroll-scrub intro
   Namespaced under #intro so nothing collides with marketing.css.
   Palette pulled from the live site: --accent #d0fd3e, bg #0c0b0b.
   ============================================================ */

#intro{
  --i-bg:#0c0b0b;
  --i-ink:#ffffff;
  --i-muted:#a6a6a6;
  --i-accent:#d0fd3e;
  --i-accent-deep:#a3d110;
  position:relative;
  height:560vh;                 /* scroll distance to scrub across */
  background:var(--i-bg);
  font-family:"Manrope","Space Grotesk",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
}

/* sticky stage pins the video while we scroll the track */
#intro .is-stage{
  position:sticky; top:0;
  height:100vh; width:100%;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #16181c 0%, var(--i-bg) 60%);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,3.5vh,44px) clamp(16px,3.5vw,54px);
}
/* ---- animated texture that fills the dark dissolve area ---- */
#intro .is-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
/* perspective-grid tunnel — sits above the glows, behind the circular video,
   so it fills the dark dissolve ring around the footage. Canvas is a replaced
   element, so it needs explicit width/height (inset:0 alone won't stretch it). */
#intro .is-energy{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
}
/* two drifting ambient glows — lime + soft blue (brand accents) */
#intro .is-bg::before,
#intro .is-bg::after{
  content:""; position:absolute; border-radius:50%;
  filter:blur(60px);
  opacity:calc(.22 + var(--pw, 0) * .6);   /* glows brighten as it powers up */
  will-change:transform, opacity;
}
#intro .is-bg::before{
  width:60vw; height:60vw; left:-10vw; top:-8vw;
  background:radial-gradient(circle at 50% 50%, rgba(208,253,62,.28), rgba(208,253,62,0) 68%);
  animation:is-drift1 22s ease-in-out infinite;
}
#intro .is-bg::after{
  width:66vw; height:66vw; right:-14vw; bottom:-12vw;
  background:radial-gradient(circle at 50% 50%, rgba(64,132,255,.22), rgba(64,132,255,0) 68%);
  animation:is-drift2 28s ease-in-out infinite;
}
@keyframes is-drift1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(14vw,10vh) scale(1.15); }
}
@keyframes is-drift2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-12vw,-8vh) scale(1.2); }
}
@keyframes is-lines{
  0%{ background-position:0 0; }
  100%{ background-position:200px 200px; }
}
@media (prefers-reduced-motion: reduce){
  #intro .is-bg::before,#intro .is-bg::after,#intro .is-grain{ animation:none; }
}

/* centered circular video whose edge DISSOLVES into the background
   (soft feathered radial mask instead of a hard circular rim) */
#intro .is-frame{
  position:relative; z-index:1;
  width:min(104vh, 102vw);
  height:min(104vh, 102vw);
  aspect-ratio:1 / 1;
  background:#000;
  /* opaque in the middle, fading smoothly to transparent at the edge */
  -webkit-mask-image:radial-gradient(circle at 50% 50%,
    #000 0%, #000 42%, rgba(0,0,0,.5) 62%, rgba(0,0,0,0) 78%);
  mask-image:radial-gradient(circle at 50% 50%,
    #000 0%, #000 42%, rgba(0,0,0,.5) 62%, rgba(0,0,0,0) 78%);
}
#intro .is-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:translateZ(0);
  will-change:transform;
  background:#000;
}

/* dark vignette — clear centre, dissolves to black at the edges */
#intro .is-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 64% 60% at 50% 50%,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 46%,
    rgba(0,0,0,.55) 66%,
    rgba(0,0,0,.9) 82%,
    rgba(0,0,0,1) 100%);
}
/* soft top/bottom bias for text legibility */
#intro .is-textscrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 70%, rgba(0,0,0,.5) 100%);
}

/* overlay */
#intro .is-overlay{ position:absolute; inset:0; z-index:2; pointer-events:none; }

#intro .is-topbar{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,3vw,30px) clamp(20px,4vw,54px);
}
#intro .is-brand{ display:flex; align-items:center; gap:12px; }
#intro .is-brand img{ height:clamp(22px,3vw,30px); width:auto; display:block; }
#intro .is-navcta{
  pointer-events:auto;
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--i-ink); text-decoration:none;
  border:1px solid rgba(255,255,255,.28); padding:9px 15px; border-radius:999px;
  backdrop-filter:blur(6px); transition:background .2s,color .2s,border-color .2s;
}
#intro .is-navcta:hover{ background:var(--i-accent); color:#0c0b0b; border-color:var(--i-accent); }

/* hero copy (start of scroll) */
#intro .is-hero{
  position:absolute; left:0; right:0; bottom:clamp(58px,12vh,140px);
  padding:0 clamp(20px,4vw,54px);
}
#intro .is-kicker{
  font-size:12px; font-weight:700; letter-spacing:.36em; text-transform:uppercase;
  color:var(--i-accent); margin-bottom:16px;
}
#intro .is-title{
  font-weight:800; font-size:clamp(40px,8.5vw,116px); line-height:.92;
  letter-spacing:-.02em; text-transform:uppercase; max-width:15ch; color:var(--i-ink);
}
#intro .is-sub{
  margin-top:20px; max-width:46ch; color:var(--i-muted);
  font-size:clamp(15px,1.7vw,19px); line-height:1.5;
}
#intro .is-actions{ margin-top:28px; display:flex; gap:13px; flex-wrap:wrap; }
#intro .is-btn{
  pointer-events:auto; display:inline-flex; align-items:center; gap:9px;
  font-weight:800; letter-spacing:.05em; text-transform:uppercase; font-size:13px;
  text-decoration:none; padding:15px 25px; border-radius:999px;
  transition:transform .15s ease, box-shadow .2s ease, background .2s;
}
#intro .is-btn--primary{ background:var(--i-accent); color:#0c0b0b; box-shadow:0 10px 40px -12px var(--i-accent); }
#intro .is-btn--primary:hover{ transform:translateY(-2px); }
#intro .is-btn--ghost{ color:var(--i-ink); border:1px solid rgba(255,255,255,.3); }
#intro .is-btn--ghost:hover{ background:rgba(255,255,255,.08); }

/* mid captions that cross-fade while scrubbing */
#intro .is-caption{
  position:absolute; left:0; right:0; bottom:clamp(58px,12vh,140px);
  padding:0 clamp(20px,4vw,54px);
  opacity:0; transform:translateY(24px); will-change:opacity,transform;
}
#intro .is-caption h2{
  font-weight:800; text-transform:uppercase; color:var(--i-ink);
  font-size:clamp(30px,6vw,80px); line-height:.95; letter-spacing:-.02em; max-width:16ch;
}
#intro .is-caption p{
  margin-top:14px; color:var(--i-muted); max-width:42ch;
  font-size:clamp(15px,1.6vw,18px); line-height:1.5;
}

/* closing brand card (end of scroll) */
#intro .is-endcard{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; text-align:center; padding:0 24px;
  opacity:0; transform:translateY(20px); will-change:opacity,transform;
}
#intro .is-endcard img{ height:clamp(26px,3.4vw,38px); width:auto; }
#intro .is-endtag{
  font-weight:800; text-transform:uppercase; line-height:.98; color:var(--i-ink);
  font-size:clamp(34px,7vw,84px); letter-spacing:-.02em;
}
#intro .is-endtag span{ color:var(--i-accent); }
#intro .is-endhint{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--i-muted);
  display:flex; align-items:center; gap:8px; margin-top:4px;
}

/* progress bar */
#intro .is-progress{
  position:absolute; left:0; bottom:0; height:3px; width:0%;
  background:var(--i-accent); box-shadow:0 0 18px var(--i-accent);
}

/* scroll hint */
#intro .is-hint{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--i-muted);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
#intro .is-mouse{ width:22px; height:36px; border:2px solid rgba(255,255,255,.4); border-radius:14px; position:relative; }
#intro .is-mouse::after{
  content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:2px;
  background:var(--i-accent); transform:translateX(-50%); animation:is-wheel 1.6s infinite;
}
@keyframes is-wheel{ 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} }

/* loader */
#intro-loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:#0c0b0b; transition:opacity .6s ease, visibility .6s;
}
#intro-loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
#intro-loader img{ height:34px; width:auto; }
#intro-loader .is-bar{ width:min(240px,60vw); height:3px; background:rgba(255,255,255,.12); border-radius:2px; overflow:hidden; }
#intro-loader .is-bar > span{ display:block; height:100%; width:0%; background:#d0fd3e; transition:width .15s ease; }
#intro-loader .is-pct{ font-size:11px; letter-spacing:.25em; color:#a6a6a6; }

@media (prefers-reduced-motion: reduce){
  #intro .is-mouse::after{ animation:none; }
}