.vss{
  --vss-bg:#0B0B10;
  --vss-accent:#F0C25E;
  --vss-text:#fff;
  --vss-transition:500ms;
  background:var(--vss-bg);
  color:var(--vss-text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,sans-serif;
  overflow-x:hidden;
  position:relative;
}
.vss *{box-sizing:border-box;}
.vss h1,.vss h2,.vss h3{font-family:inherit;font-weight:800;margin:0;}

/* ---------------- starfield background (static twinkle layer) ---------------- */
.vss-stars{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(2px 2px at 8% 12%, var(--vss-accent), transparent 60%),
    radial-gradient(2px 2px at 22% 30%, var(--vss-accent), transparent 60%),
    radial-gradient(1.5px 1.5px at 35% 8%, var(--vss-accent), transparent 60%),
    radial-gradient(2px 2px at 48% 22%, var(--vss-accent), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 14%, var(--vss-accent), transparent 60%),
    radial-gradient(2px 2px at 75% 34%, var(--vss-accent), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 10%, var(--vss-accent), transparent 60%),
    radial-gradient(2px 2px at 5% 55%, var(--vss-accent), transparent 60%),
    radial-gradient(1.5px 1.5px at 18% 70%, var(--vss-accent), transparent 60%),
    radial-gradient(2px 2px at 30% 85%, var(--vss-accent), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 62%, var(--vss-accent), transparent 60%),
    radial-gradient(2px 2px at 58% 78%, var(--vss-accent), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 60%, var(--vss-accent), transparent 60%),
    radial-gradient(2px 2px at 82% 90%, var(--vss-accent), transparent 60%),
    radial-gradient(1.5px 1.5px at 94% 46%, var(--vss-accent), transparent 60%);
  opacity:.4;
}

/* ---------------- floating particles (animated, moves upward continuously) ---------------- */
/* fixed to the viewport so particles always fill the screen while any part of
   this [video_scroll] section is in view; JS toggles vss-particles-visible so
   they never bleed into the theme header/footer above or below this section. */
.vss-particles{
  position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;
  opacity:0;transition:opacity 500ms ease;
}
.vss-particles.vss-particles-visible{opacity:1;}
.vss-chunk{
  position:absolute;bottom:-5%;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff8e0 0%, var(--vss-accent) 45%, rgba(240,194,94,0) 75%);
  box-shadow:0 0 6px 1px rgba(240,194,94,.55);
  animation-name:vssChunkFloat;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-duration:var(--vss-chunk-duration,14s);
  will-change:transform,opacity;
}
@keyframes vssChunkFloat{
  0%{   transform:translate(0,0) scale(.6);   opacity:0; }
  8%{   opacity:1; }
  50%{  transform:translate(var(--vss-chunk-drift,20px),-60vh) scale(1); }
  92%{  opacity:.8; }
  100%{ transform:translate(0,-125vh) scale(.7); opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .vss-chunk{animation:none;opacity:.5;}
}

/* ---------------- HERO (simple, non-pinned) ---------------- */
.vss-hero{
  position:relative;z-index:2;min-height:60vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 24px;
}
.vss-hero-copy h1{
  font-size:clamp(3.2rem,10vw,7rem);line-height:.94;color:var(--vss-text);letter-spacing:-.01em;
  text-shadow:0 14px 28px rgba(0,0,0,.55);
}
.vss-hero-sub{font-weight:700;font-size:clamp(1.1rem,2.8vw,1.7rem);color:var(--vss-text);margin-top:18px;opacity:.9;}

/* ---------------- STICKY VIDEO-SCROLL SECTION ---------------- */
.vss-scrollytell{position:relative;z-index:1;}
.vss-pin{
  position:absolute;top:0;left:0;width:100%;height:100vh;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.vss-pin.vss-fixed{position:fixed;top:50px;left:0;width:100%;}
.vss-pin.vss-bottom-pin{position:absolute;top:auto;bottom:0;}

/* background color panels, crossfaded per scroll segment, sitting behind the video */
.vss-bg-stack{position:absolute;inset:0;z-index:0;}
.vss-bg-panel{
  position:absolute;inset:0;opacity:0;
  transition:opacity var(--vss-transition) ease;
}
.vss-bg-panel.vss-active{opacity:1;}

/* the video itself, centered and pinned -- shown as a portrait, mobile-app-
   style frame (max 400px wide) rather than a wide landscape video */
.vss-video-frame{
  position:relative;z-index:2;width:min(400px,86vw);max-width:400px;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
  will-change:transform;
}

.vss-video {
    display: block;
    width: 80%;
    height: auto;
    border-radius: 28px;
}

@media (max-width:820px){
  .vss-video-frame{width:min(400px,90vw);}
  .vss-video{border-radius:20px;}
}

/*
 * Captions get their opacity + transform written directly by JS on every
 * animation frame (smoothly eased), so they can move continuously as the
 * user scrolls rather than snapping on/off. The vss-show class + transition
 * below remain as a graceful fallback (no-JS, or the very first paint).
 */
.vss-caption{
  position:absolute;
  max-width:var(--vss-caption-max-width,360px);
  padding:var(--vss-caption-padding,0);
  margin-top:var(--vss-caption-margin-top,0);
  opacity:0;transform:translateY(50px);
  transition:opacity var(--vss-transition) ease, transform var(--vss-transition) ease;
  z-index:3;pointer-events:none;will-change:transform,opacity;
}
.vss-caption.vss-show{opacity:1;transform:translateY(0);}
.vss-caption h3{
  font-size:clamp(1.9rem, 4.4vw, var(--vss-caption-font-size,3.2rem));
  letter-spacing:var(--vss-caption-letter-spacing,0);
  color:inherit;
  line-height:1.02;text-shadow:0 10px 24px rgba(0,0,0,.5);
}
/* left/right captions now sit near the top of the screen (above the
   centered video) instead of vertically centered beside it */
.vss-caption.vss-left{left:6%;top:8%;transform:translateY(40px);text-align:left;color:var(--vss-text);}
.vss-caption.vss-left.vss-show{transform:translateY(0);}
.vss-caption.vss-right{right:6%;top:8%;transform:translateY(40px);text-align:right;color:var(--vss-text);}
.vss-caption.vss-right.vss-show{transform:translateY(0);}
.vss-caption.vss-bottom{left:50%;bottom:8%;transform:translate(-50%,60px);text-align:center;width:100%;color:var(--vss-text);}
.vss-caption.vss-bottom.vss-show{transform:translate(-50%,0);}
.vss-caption.vss-bottom h3{font-size:clamp(2.3rem, 6.5vw, calc(var(--vss-caption-font-size,3.2rem) * 1.35));}

@media (max-width:820px){
  .vss-caption.vss-left,.vss-caption.vss-right{
    left:50%;right:auto;top:5%;transform:translate(-50%,40px);text-align:center;
  }
  .vss-caption.vss-left.vss-show,.vss-caption.vss-right.vss-show{transform:translate(-50%,0);}
}

@media (prefers-reduced-motion:reduce){
  .vss-caption,.vss-bg-panel,.vss-video-frame{transition:none;}
  .vss-chunk{animation:none;}
}