/*
 * animate.css  v3 — Ultra Soft Scroll Reveal
 * Referensi feel: sdi-assuryaniyah.sch.id (AOS-like)
 *
 * Filosofi:
 *  - Durasi  : 400ms (cepat tapi terasa)
 *  - Jarak   : 24px max (sangat kecil)
 *  - Easing  : ease (tidak ada bounce, tidak ada spring)
 *  - Delay   : 0–50ms antar item (nyaris tak terasa, tapi ada urutan)
 *  - Tidak ada rotation, skew, atau scale dramatis
 */

:root {
  --sr-dur  : 400ms;
  --sr-ease : ease;
  --sr-dist : 24px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BASE  — semua [data-sr] hidden
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-sr] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity   var(--sr-dur) var(--sr-ease),
    transform var(--sr-dur) var(--sr-ease);
}

/* ── Arah masuk ── */
[data-sr="up"]    { transform: translateY(var(--sr-dist)); }
[data-sr="down"]  { transform: translateY(calc(var(--sr-dist) * -1)); }
[data-sr="left"]  { transform: translateX(calc(var(--sr-dist) * -1)); }
[data-sr="right"] { transform: translateX(var(--sr-dist)); }
[data-sr="fade"]  { transform: none; }

/* ── Visible ── */
[data-sr].sr-on {
  opacity: 1;
  transform: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STAGGER — parent reveal
   Children muncul berurutan
   via CSS nth-child delay
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sr-stagger > * {
  opacity: 0;
  transform: translateY(var(--sr-dist));
  will-change: opacity, transform;
  transition:
    opacity   var(--sr-dur) var(--sr-ease),
    transform var(--sr-dur) var(--sr-ease);
}
.sr-stagger.sr-on > * {
  opacity: 1;
  transform: none;
}

/* Stagger delay — setiap anak 50ms lebih lambat */
.sr-stagger.sr-on > *:nth-child(1)  { transition-delay:   0ms; }
.sr-stagger.sr-on > *:nth-child(2)  { transition-delay:  50ms; }
.sr-stagger.sr-on > *:nth-child(3)  { transition-delay: 100ms; }
.sr-stagger.sr-on > *:nth-child(4)  { transition-delay: 150ms; }
.sr-stagger.sr-on > *:nth-child(5)  { transition-delay: 200ms; }
.sr-stagger.sr-on > *:nth-child(6)  { transition-delay: 250ms; }
.sr-stagger.sr-on > *:nth-child(7)  { transition-delay: 300ms; }
.sr-stagger.sr-on > *:nth-child(8)  { transition-delay: 350ms; }
.sr-stagger.sr-on > *:nth-child(9)  { transition-delay: 400ms; }
.sr-stagger.sr-on > *:nth-child(10) { transition-delay: 450ms; }
.sr-stagger.sr-on > *:nth-child(n+11) { transition-delay: 480ms; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAVBAR  — slide dari atas
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes navIn {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: none; }
}
.nav-entrance {
  animation: navIn 0.4s ease both;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE HEADER BANNER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ph-breadcrumb { animation: srFadeUp 0.38s 0.05s ease both; }
.ph-title      { animation: srFadeUp 0.40s 0.14s ease both; }
.ph-sub        { animation: srFadeUp 0.40s 0.22s ease both; }

@keyframes srFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO HOME  (data-hero=*)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-hero="badge"]  { animation: srFadeUp 0.36s 0.04s ease both; }
[data-hero="title"]  { animation: srFadeUp 0.38s 0.12s ease both; }
[data-hero="desc"]   { animation: srFadeUp 0.38s 0.20s ease both; }
[data-hero="btns"]   { animation: srFadeUp 0.38s 0.28s ease both; }
[data-hero="meta"]   { animation: srFadeUp 0.36s 0.36s ease both; }
[data-hero="img"] {
  animation: srFadeRight 0.45s 0.10s ease both;
}
@keyframes srFadeRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REDUCED MOTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {
  [data-sr],
  [data-sr].sr-on,
  .sr-stagger > *,
  .sr-stagger.sr-on > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .nav-entrance,
  .ph-breadcrumb,
  .ph-title,
  .ph-sub,
  [data-hero] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}