/* ─────────────────────────────────────────────────────────────
   VYBLY — GSAP Scroll Enhancement Styles
   e1-gsap-scroll.css
   Companion to e1-gsap-scroll.js — do not modify vybly_concept.html
   ───────────────────────────────────────────────────────────── */

/* ── Scroll Progress Bar ── */
#vybly-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: oklch(93% 0.27 122);
  box-shadow: 0 0 8px oklch(93% 0.27 122 / 0.5);
  z-index: 10000;
  transform-origin: left center;
  pointer-events: none;
  will-change: width;
}

/* ── Section heading underline scrub ── */
/* Each .section-h2 gets a lime rule that grows on scroll */
.section-h2 {
  position: relative;
}

.section-h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0%;            /* driven by GSAP scrub */
  height: 2px;
  background: oklch(93% 0.27 122);
  border-radius: 2px;
  transform-origin: left center;
  will-change: width;
}

/* ── Hero parallax — prevent clipping during translate ── */
.hero {
  overflow: hidden;
}

.hero-content,
.hero-canvas {
  will-change: transform;
}

/* ── Feature reveal base state ──
   GSAP will set opacity/transform from JS;
   we override the existing CSS transition-based .reveal
   so GSAP owns these elements exclusively.
   Elements that receive the gsap-reveal class are exempted
   from the original CSS animation.
   ── */
.gsap-controlled {
  /* reset any CSS-transition-driven reveal state */
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ── Pick card entrance staging ── */
#pc1,
#pc2,
#pc3 {
  will-change: transform, opacity;
  transform-origin: center bottom;
}

/* ── Waitlist form fields — spring entrance staging ── */
#waitlistForms,
.waitlist-submit,
.waitlist-fine {
  will-change: transform, opacity;
}

/* ── Reduced motion — kill everything GSAP would animate ── */
@media (prefers-reduced-motion: reduce) {
  #vybly-progress {
    display: none;
  }

  .section-h2::after {
    /* skip the draw-on animation — just show full line instantly */
    width: 48px !important;
    transition: none !important;
  }

  .hero-content,
  .hero-canvas,
  #pc1, #pc2, #pc3,
  #waitlistForms,
  .waitlist-submit,
  .waitlist-fine {
    will-change: auto;
    transform: none !important;
    opacity: 1 !important;
  }
}