/* =========================================================
   Scroll-triggered animations
   ========================================================= */

/* Base reveal: fade + rise */
.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.1s var(--easing), transform 1.1s var(--easing);
  will-change: opacity, transform;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered child reveal (use --i: 0,1,2,...) */
.fade-stagger > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--easing), transform 1s var(--easing);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.fade-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.fade-stagger > *:nth-child(1) { --i: 0; }
.fade-stagger > *:nth-child(2) { --i: 1; }
.fade-stagger > *:nth-child(3) { --i: 2; }
.fade-stagger > *:nth-child(4) { --i: 3; }
.fade-stagger > *:nth-child(5) { --i: 4; }
.fade-stagger > *:nth-child(6) { --i: 5; }

/* Slide from left for headings */
.slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 1.1s var(--easing), transform 1.1s var(--easing);
}
.slide-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Image scale-in (zoom out from 1.12 to 1) */
.zoom-in {
  overflow: hidden;
}
.zoom-in img,
.zoom-in .bg {
  transform: scale(1.16);
  transition: transform 1.6s var(--easing);
}
.zoom-in.is-visible img,
.zoom-in.is-visible .bg {
  transform: scale(1);
}

/* Reveal mask (background slides away) */
.reveal-mask {
  position: relative;
  overflow: hidden;
}
.reveal-mask::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 1.2s var(--easing);
}
.reveal-mask.is-visible::before {
  transform: scaleX(0);
}

/* Counter wrapper - just fade-in, JS handles digits */
.counter { display: inline-block; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .fade-stagger > *, .slide-left, .zoom-in img, .zoom-in .bg, .reveal-mask::before {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}