/* ==========================================================================
   Tronolex Islamic Education HTML5 Boilerplate v1
   File: animations.css
   Purpose: Subtle reveal animations, transitions, and reduced-motion rules.
   --------------------------------------------------------------------------
   Used with assets/js/animations.js (Intersection Observer).
   Elements opt-in via classes: .reveal, .reveal-up, .reveal-in,
   .reveal-zoom, .reveal-slide. The script adds .is-visible when in view.
   ========================================================================== */

/* Base hidden state for reveal elements (before being observed) */
.reveal,
.reveal-up,
.reveal-in,
.reveal-slide,
.reveal-zoom {
  opacity: 0;
  will-change: opacity, transform;
}

/* Visible state applied by IntersectionObserver */
.reveal.is-visible,
.reveal-up.is-visible,
.reveal-in.is-visible,
.reveal-slide.is-visible,
.reveal-zoom.is-visible {
  opacity: 1;
  transform: none;
}

/* Fade Up */
.reveal-up {
  transform: translateY(28px);
}
.reveal-up.is-visible {
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}

/* Fade In */
.reveal-in {
  transition: opacity var(--dur-slow) var(--ease);
}

/* Slide Up (stronger) */
.reveal-slide {
  transform: translateY(48px);
}
.reveal-slide.is-visible {
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}

/* Gentle Zoom (never exceeds 1.03) */
.reveal-zoom {
  transform: scale(0.98);
}
.reveal-zoom.is-visible {
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}

/* Stagger helper — apply inline via data-delay in JS, not here */

/* Smooth scrolling for same-page anchor navigation */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Respect users who prefer reduced motion: disable all reveal movement */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-up,
  .reveal-in,
  .reveal-slide,
  .reveal-zoom {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .counter__number {
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}