/* ============================================================
   MOTION — Sekolah Setara Nusantara
   Emil Kowalski: transform + opacity only, <300ms, ease-out
   ============================================================ */

/* --- Scroll-triggered entrance --- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children — 60ms apart */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 300ms; }

/* --- Counter animation --- */
.counter-animate {
  font-variant-numeric: tabular-nums;
}

/* --- APS bar fill animation --- */
.aps-bar__fill {
  width: 0;
}

.aps-bar__fill.is-visible {
  /* width set via JS */
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .aps-bar__fill {
    transition: none;
  }

  .pillar {
    transition: none;
  }
}

/* --- Hero text entrance --- */
.hero-enter {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFadeIn var(--duration-slow) var(--ease-out) forwards;
}

.hero-enter:nth-child(1) { animation-delay: 40ms; }
.hero-enter:nth-child(2) { animation-delay: 90ms; }
.hero-enter:nth-child(3) { animation-delay: 140ms; }
.hero-enter:nth-child(4) { animation-delay: 190ms; }

@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-enter {
    opacity: 1;
    transform: none;
    animation: none;
  }
}