/* ============================================================
   ANIMATIONS.CSS — Ashraf Islamia Model Public Secondary School
   All keyframes, transitions, scroll-reveal system
   ============================================================ */


/* ═══════════════════════════════════════════════════════
   MOTION DESIGN TOKENS
   Centralised timing/easing values — referenced by JS too
   ═══════════════════════════════════════════════════════ */

:root {
  /* Duration scale */
  --dur-instant:  100ms;
  --dur-fast:     160ms;
  --dur-med:      300ms;
  --dur-slow:     500ms;
  --dur-reveal:   600ms;
  --dur-large:    700ms;

  /* Canonical easing curve — used for all reveals & micro-interactions */
  --ease-reveal:  cubic-bezier(0.22, 1, 0.36, 1);

  /* Stagger base delay between sequential items */
  --stagger-step: 80ms;
}


/* ═══════════════════════════════════════════════════════
   INTRO CINEMATIC SEQUENCE — Phase Keyframes
   ═══════════════════════════════════════════════════════ */

/* ─── Phase 0: Overlay appears ───────────────────────── */

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

/* ─── Phase 1: Spark — first light ───────────────────── */

@keyframes spark-appear {
  0%   { opacity: 0; r: 0;  filter: drop-shadow(0 0  2px rgba(255,215,0,0)); }
  40%  { opacity: 1; r: 4;  filter: drop-shadow(0 0 10px rgba(255,215,0,0.9)) drop-shadow(0 0 24px rgba(201,168,76,0.5)); }
  70%  { opacity: 1; r: 3;  filter: drop-shadow(0 0  8px rgba(255,215,0,0.8)) drop-shadow(0 0 18px rgba(201,168,76,0.4)); }
  100% { opacity: 1; r: 3;  filter: drop-shadow(0 0  6px rgba(255,215,0,0.7)) drop-shadow(0 0 14px rgba(201,168,76,0.3)); }
}

@keyframes spark-pulse {
  0%, 100% { opacity: 1;   filter: drop-shadow(0 0  6px rgba(255,215,0,0.8)); }
  50%       { opacity: 0.85; filter: drop-shadow(0 0 12px rgba(255,215,0,1.0)) drop-shadow(0 0 28px rgba(201,168,76,0.6)); }
}

@keyframes spark-dissolve {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(2.5); }
}

/* ─── Phase 2: Flame birth ────────────────────────────── */

@keyframes flame-birth-outer {
  0%   { opacity: 0; transform: scaleY(0.05) scaleX(0.2); transform-origin: bottom center; }
  30%  { opacity: 0.7; transform: scaleY(0.4) scaleX(0.7); }
  65%  { opacity: 0.9; transform: scaleY(1.05) scaleX(1.02); }
  100% { opacity: 1; transform: scaleY(1) scaleX(1); }
}

@keyframes flame-birth-inner {
  0%   { opacity: 0; transform: scaleY(0) scaleX(0); transform-origin: bottom center; }
  40%  { opacity: 0; transform: scaleY(0.2) scaleX(0.4); }
  70%  { opacity: 0.8; transform: scaleY(0.9) scaleX(0.95); }
  100% { opacity: 1; transform: scaleY(1) scaleX(1); }
}

@keyframes flame-tip-appear {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: bottom center; }
  60%  { opacity: 0; }
  100% { opacity: 0.85; transform: scaleY(1); }
}

/* ─── Living flame flicker (stable phase) ─────────────── */

@keyframes flame-flicker-outer {
  0%, 100% { transform: scaleX(1)    scaleY(1)    skewX(0deg)    translateX(0);    opacity: 0.95; }
  15%      { transform: scaleX(0.96) scaleY(1.04) skewX(-1.8deg) translateX(-0.6px); opacity: 0.88; }
  30%      { transform: scaleX(1.04) scaleY(0.97) skewX(1.2deg)  translateX(0.4px);  opacity: 1;    }
  47%      { transform: scaleX(0.97) scaleY(1.03) skewX(-0.9deg) translateX(-0.3px); opacity: 0.92; }
  63%      { transform: scaleX(1.03) scaleY(0.98) skewX(1.5deg)  translateX(0.5px);  opacity: 0.97; }
  80%      { transform: scaleX(0.98) scaleY(1.01) skewX(-0.6deg) translateX(-0.2px); opacity: 0.90; }
}

@keyframes flame-flicker-inner {
  0%, 100% { transform: scaleX(1)    scaleY(1)    translateX(0);      opacity: 1; }
  20%      { transform: scaleX(0.92) scaleY(1.06) translateX(-0.8px); opacity: 0.9; }
  40%      { transform: scaleX(1.06) scaleY(0.95) translateX(0.6px);  opacity: 1; }
  60%      { transform: scaleX(0.94) scaleY(1.05) translateX(-0.4px); opacity: 0.92; }
  80%      { transform: scaleX(1.04) scaleY(0.96) translateX(0.4px);  opacity: 1; }
}

@keyframes flame-flicker-tip {
  0%, 100% { opacity: 0.85; transform: scaleY(1); }
  25%       { opacity: 0.95; transform: scaleY(1.08) translateY(-1px); }
  50%       { opacity: 0.75; transform: scaleY(0.92) translateY(1px); }
  75%       { opacity: 0.9;  transform: scaleY(1.04) translateY(-0.5px); }
}

@keyframes flame-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(201,168,76,0.4)) drop-shadow(0 0 30px rgba(201,168,76,0.15)); }
  40%       { filter: drop-shadow(0 0 20px rgba(201,168,76,0.7)) drop-shadow(0 0 50px rgba(201,168,76,0.3)) drop-shadow(0 0 80px rgba(201,168,76,0.12)); }
  70%       { filter: drop-shadow(0 0 14px rgba(201,168,76,0.5)) drop-shadow(0 0 35px rgba(201,168,76,0.2)); }
}

/* ─── Ambient glow expansion ──────────────────────────── */

@keyframes ambient-ignite {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ambient-breathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}

/* ─── Logo reveal ─────────────────────────────────────── */

@keyframes logo-emerge {
  0%   { opacity: 0; transform: scale(0.78); filter: blur(4px) brightness(0.5); }
  50%  { opacity: 0.6; transform: scale(0.95); filter: blur(1px) brightness(0.85); }
  100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
}

@keyframes logo-ring-glow {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(201,168,76,0.2),
      0 0 24px rgba(201,168,76,0.3),
      0 0 60px rgba(201,168,76,0.1);
  }
  50% {
    box-shadow:
      0 0 0 7px rgba(201,168,76,0.35),
      0 0 40px rgba(201,168,76,0.55),
      0 0 90px rgba(201,168,76,0.2);
  }
}

/* ─── Text reveals ────────────────────────────────────── */

@keyframes name-rise {
  0%   { opacity: 0; transform: translateY(22px); letter-spacing: 0.5em; }
  60%  { opacity: 0.8; transform: translateY(4px); letter-spacing: 0.18em; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: 0.15em; }
}

@keyframes rule-extend {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

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

@keyframes skip-hint-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Intro exit ──────────────────────────────────────── */

@keyframes intro-overlay-exit {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes intro-text-fade {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}

@keyframes intro-flame-exit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.6) translateY(-8px); }
}

@keyframes intro-exit {
  0%   { opacity: 1; transform: scale(1); }
  80%  { opacity: 0; transform: scale(1.04); }
  100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════
   HERO SECTION — Cascade Reveal (post-intro)
   ═══════════════════════════════════════════════════════ */

@keyframes hero-slide-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes hero-overlay-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes hero-text-rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-label-cascade {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* ═══════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════ */

@keyframes nav-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}


/* ═══════════════════════════════════════════════════════
   PAGE-IN — Inner page hero reveal
   Used on about, facilities, faculty, contact, etc.
   ═══════════════════════════════════════════════════════ */

@keyframes page-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Applied by motion.js to .page-hero children */
.page-hero-revealed {
  animation: page-in var(--dur-reveal) var(--ease-reveal) both;
}

.page-hero-revealed.delay-1 { animation-delay:  80ms; }
.page-hero-revealed.delay-2 { animation-delay: 180ms; }
.page-hero-revealed.delay-3 { animation-delay: 280ms; }


/* ═══════════════════════════════════════════════════════
   SCROLL REVEAL SYSTEM
   ═══════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
  transition:
    opacity   var(--dur-reveal) var(--ease-reveal),
    transform var(--dur-reveal) var(--ease-reveal);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  will-change: transform, opacity;
  transition:
    opacity   var(--dur-large) var(--ease-reveal),
    transform var(--dur-large) var(--ease-reveal);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
  will-change: auto;
}

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  will-change: transform, opacity;
  transition:
    opacity   var(--dur-large) var(--ease-reveal),
    transform var(--dur-large) var(--ease-reveal);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
  will-change: auto;
}

/* Stagger delays — 8 items at 80ms steps */
.reveal-stagger:nth-child(1) { transition-delay:   0ms; }
.reveal-stagger:nth-child(2) { transition-delay:  80ms; }
.reveal-stagger:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger:nth-child(8) { transition-delay: 560ms; }


/* ═══════════════════════════════════════════════════════
   IMAGE REVEAL SYSTEM
   Applied by motion.js when image loads + enters viewport
   ═══════════════════════════════════════════════════════ */

/* State before reveal — applied immediately to lazy images */
img[loading="lazy"].img-pending {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity   var(--dur-slow) var(--ease-reveal),
    transform var(--dur-slow) var(--ease-reveal);
  will-change: transform, opacity;
}

img[loading="lazy"].img-revealed {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}


/* ═══════════════════════════════════════════════════════
   MISCELLANEOUS UTILITY ANIMATIONS
   ═══════════════════════════════════════════════════════ */

@keyframes count-up-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes ripple {
  from { transform: scale(0); opacity: 0.4; }
  to   { transform: scale(4); opacity: 0; }
}


/* ═══════════════════════════════════════════════════════
   REDUCED MOTION OVERRIDES
   ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

  /* ── Timing tokens — collapse all durations to near-zero ── */
  :root {
    --dur-instant:  0ms;
    --dur-fast:     0ms;
    --dur-med:      0ms;
    --dur-slow:     0ms;
    --dur-reveal:   0ms;
    --dur-large:    0ms;
    --stagger-step: 0ms;
  }

  /* ── Scroll-reveal: show immediately without movement ── */
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .reveal-stagger {
    transition-delay: 0ms !important;
  }

  /* Hero section — show immediately */
  body.intro-complete #hero .hero-slideshow,
  body.intro-complete #hero .hero-overlay,
  body.intro-complete #hero .hero-label,
  body.intro-complete #hero .hero-headline,
  body.intro-complete #hero .hero-sub,
  body.intro-complete #hero .hero-ctas,
  body.intro-complete #hero .hero-indicators,
  body.intro-complete #hero .hero-scroll-hint {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  /* Intro overlay — skip all cinematic animations */
  .flame-g,
  .candle-g.lit .flame-outer,
  .candle-g.lit .flame-inner,
  #intro-particles,
  .intro-bg-ambient,
  .intro-mouse-indicator,
  .intro-candles-glow {
    animation: none !important;
    transition: none !important;
  }

  /* Navbar slide-in — show immediately */
  body.intro-complete #navbar,
  body.intro-skip #navbar {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  /* Slideshow transitions */
  .hero-slideshow img,
  .hero-slideshow .slide {
    animation: none !important;
    transition: none !important;
  }

  /* Counter animations */
  .stat-number {
    animation: none !important;
    transition: none !important;
  }

  /* Intro overlay fade-out must still work so page reveals */
  #intro-overlay.fade-out {
    transition: opacity 0.3s ease !important;
  }

  /* Ken-burns on hero bg */
  @keyframes hero-ken-burns {
    from { transform: none; }
    to   { transform: none; }
  }

  /* Ambient breathe */
  @keyframes ambient-breathe {
    from { opacity: 0.6; transform: scale(1); }
    to   { opacity: 0.6; transform: scale(1); }
  }

  /* Mouse wheel bob */
  @keyframes mouse-breath {
    from { opacity: 0.45; }
    to   { opacity: 0.45; }
  }
}