/* ============================================
   SCROLL-REVEAL ANIMATIONS
   Hard-edged, no-bounce entrances driven by
   js/animations.js (IntersectionObserver). Kept
   in the same cubic-bezier(.2,.8,.2,1) "snap"
   used elsewhere on the site (project card,
   nav hover, theme switch) so the motion reads
   as one system, not several unrelated effects.
   ============================================ */

[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1);
  will-change:transform, opacity;
}
[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

/* section-label rule: draws left-to-right like a hard underline
   snapping into place, instead of fading */
[data-reveal="rule"]{
  opacity:1;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
[data-reveal="rule"].is-visible{
  transform:scaleX(1);
}

/* staggered children: timeline items, stat blocks, channel tiles */
[data-reveal-stagger] > *{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .4s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
[data-reveal-stagger].is-visible > *{
  opacity:1;
  transform:translateY(0);
}
[data-reveal-stagger].is-visible > *:nth-child(1){transition-delay:0s;}
[data-reveal-stagger].is-visible > *:nth-child(2){transition-delay:.08s;}
[data-reveal-stagger].is-visible > *:nth-child(3){transition-delay:.16s;}
[data-reveal-stagger].is-visible > *:nth-child(4){transition-delay:.24s;}
[data-reveal-stagger].is-visible > *:nth-child(5){transition-delay:.32s;}
[data-reveal-stagger].is-visible > *:nth-child(6){transition-delay:.4s;}

/* the timeline's connecting spine draws downward in sync with its
   items, echoing the rule-draw above */
.timeline[data-reveal-stagger]::before{
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.timeline[data-reveal-stagger].is-visible::before{
  transform:scaleY(1);
}

@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal] *, [data-reveal-stagger] > *, .timeline::before{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}