/* ============================================
   Animations — Mount Rinjani
   All scroll-triggered + hover animations
   CSS-only pieces; JS-triggered classes below
   ============================================ */

/* ----- Hero background slow scale ----- */

@media (prefers-reduced-motion: no-preference) {
  .hero__bg img {
    animation: hero-scale 20s ease-out forwards;
  }
}

@keyframes hero-scale {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

/* ----- Reveal: fade up ----- */
/* Only hide elements when JS has loaded (body gets .js-ready class) */

.js-ready .reveal {
  opacity: 0;
  transform: translateY(20px);
}

@media (prefers-reduced-motion: no-preference) {
  .js-ready .reveal.is-visible {
    animation: fade-up var(--duration-slow) var(--ease-out) forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----- Reveal: fade in only ----- */

.js-ready .reveal-fade {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .js-ready .reveal-fade.is-visible {
    animation: fade-in var(--duration-slow) var(--ease-out) forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal-fade {
    opacity: 1;
  }
}

@keyframes fade-in {
  to { opacity: 1; }
}

/* ----- (stats removed — replaced by editorial intro) ----- */

/* ----- Stagger children ----- */

.js-ready .stagger-group .reveal:nth-child(1) { animation-delay: 0ms; }
.js-ready .stagger-group .reveal:nth-child(2) { animation-delay: 100ms; }
.js-ready .stagger-group .reveal:nth-child(3) { animation-delay: 200ms; }
.js-ready .stagger-group .reveal:nth-child(4) { animation-delay: 300ms; }
.js-ready .stagger-group .reveal:nth-child(5) { animation-delay: 400ms; }
.js-ready .stagger-group .reveal:nth-child(6) { animation-delay: 500ms; }

/* ----- Hero-specific delays ----- */

.js-ready .hero__title.reveal  { animation-delay: 400ms; }
.js-ready .hero__subtitle.reveal { animation-delay: 600ms; }
.js-ready .hero__cta.reveal-fade { animation-delay: 900ms; }

@media (prefers-reduced-motion: no-preference) {
  .js-ready .hero__title.reveal,
  .js-ready .hero__subtitle.reveal {
    animation: fade-up var(--duration-slow) var(--ease-out) forwards;
  }

  .js-ready .hero__cta.reveal-fade {
    animation: fade-in var(--duration-slow) var(--ease-out) forwards;
  }
}