/* ============================================================
   Factiv motion layer — Session 3 (21 May 2026)
   WebGL mesh / scramble / magnetic CTAs / scroll-driven sections
   / manifesto outline-fill. All gated behind prefers-reduced-motion.
   ============================================================ */

/* Section-label digit-flip — JS swaps the number; the label stays in the same slot */
.section-label .digit{display:inline-block;font-variant-numeric:tabular-nums}

/* Scroll-driven section parallax + label slide-up.
   Modern Chrome/Edge supports animation-timeline:view().
   Older browsers fall through to the existing .reveal IntersectionObserver path. */
@supports (animation-timeline: view()) {
  section .section-title{
    animation: factiv-title-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
    will-change:transform,opacity;
  }
  section .section-label{
    animation: factiv-label-slide linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
}

@keyframes factiv-title-rise{
  from{transform:translateY(18px);opacity:.55}
  to  {transform:translateY(0);   opacity:1}
}
@keyframes factiv-label-slide{
  from{transform:translateX(-12px);opacity:0}
  to  {transform:translateX(0);    opacity:1}
}
/* V4 24-bar hero waveform — JS populates 24 children, sets style.height per bar.
   Bars hang from bottom (align-items:flex-end), height transitions provide the
   spring. Container fills the wave-card vertically via flex:1. Hover gives a
   localized peak with sharp falloff (handled in JS). */
.hero-wave-bars{
  display:flex;align-items:flex-end;
  gap:6px;
  width:100%;
  flex:1;min-height:0;
  cursor:crosshair;
}
.hero-wave-bar{
  flex:1;
  min-height:12px;
  border-radius:6px 6px 2px 2px;
  transition:height 180ms cubic-bezier(.34,1.56,.64,1), box-shadow 180ms ease;
  will-change:height;
}

@media (max-width:768px){
  .hero-wave-bars{gap:4px}
}

/* Reduced-motion: bars snap to base envelope, no interaction */
@media (prefers-reduced-motion: reduce){
  .hero-wave-bars{cursor:auto}
  .hero-wave-bar{transition:none}
  @supports (animation-timeline: view()) {
    section .section-title,
    section .section-label{animation:none}
  }
}