/* ═══════════════════════════════════════════════════════════════
   Amanda Fitch's Blog — Animations CSS
   Scroll-driven animations, keyframes, sparkles, slime bounce
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   KEYFRAME ANIMATIONS
   ───────────────────────────────────────── */

@keyframes slime-bounce {
  0%, 100% {
    transform: translateY(0) scaleY(1) scaleX(1);
    animation-timing-function: ease-in;
  }
  45% {
    transform: translateY(-18px) scaleY(1.08) scaleX(0.94);
    animation-timing-function: ease-out;
  }
  55% {
    transform: translateY(-16px) scaleY(1.06) scaleX(0.96);
  }
  90% {
    transform: translateY(2px) scaleY(0.92) scaleX(1.06);
    animation-timing-function: ease-in-out;
  }
}

@keyframes sparkle-float {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
  20%  { opacity: 1; }
  80%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(var(--dx, 20px), var(--dy, -40px)) scale(1) rotate(var(--dr, 180deg)); }
}

@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.7); }
}

@keyframes gem-pulse {
  0%, 100% { text-shadow: 0 0 4px var(--col-yellow); }
  50%       { text-shadow: 0 0 12px var(--col-yellow), 0 0 24px var(--col-yellow-light); }
}

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

@keyframes fade-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* ─────────────────────────────────────────
   APPLIED ANIMATIONS
   ───────────────────────────────────────── */

/* Gem sparkle effect on section headings */
.section-heading__gem {
  animation: gem-pulse 2.5s ease-in-out infinite;
}

/* Hero content entrance */
.hero__content {
  animation: fade-slide-up 0.6s ease-out both;
}

.hero__slime {
  /* slime-bounce is already applied inline */
}

/* ─────────────────────────────────────────
   SCROLL-REVEAL ELEMENTS
   Elements start hidden; JS or CSS reveal them on scroll
   ───────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

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

.reveal--left {
  transform: translateX(-20px);
}
.reveal--left.is-visible {
  transform: translateX(0);
}

.reveal--scale {
  transform: scale(0.92);
}
.reveal--scale.is-visible {
  transform: scale(1);
}

/* Staggered children delay */
.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; }

/* ─────────────────────────────────────────
   SCROLL-DRIVEN ANIMATIONS (CSS native)
   Only applied when supported (Chrome/Edge/Safari 26+)
   ───────────────────────────────────────── */

@supports ((animation-timeline: view()) and (animation-range: entry)) {

  .reveal {
    /* Override JS-based approach with CSS native scroll animation */
    opacity: 0;
    transform: translateY(20px);
    animation: fade-slide-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }

  .reveal--left {
    animation-name: fade-slide-in-left;
  }

  .reveal--scale {
    animation-name: scale-in;
  }

  /* No JS delays needed; stagger via animation-range offsets */
  .reveal-stagger > *:nth-child(1) { animation-range: entry 0%  entry 25%; }
  .reveal-stagger > *:nth-child(2) { animation-range: entry 5%  entry 30%; }
  .reveal-stagger > *:nth-child(3) { animation-range: entry 10% entry 35%; }
  .reveal-stagger > *:nth-child(4) { animation-range: entry 15% entry 40%; }
  .reveal-stagger > *:nth-child(5) { animation-range: entry 20% entry 45%; }
  .reveal-stagger > *:nth-child(6) { animation-range: entry 25% entry 50%; }
}

/* ─────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─────────────────────────────────────────
   SPARKLE PARTICLES (decorative, in hero)
   ───────────────────────────────────────── */

.sparkle-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.sparkle {
  position: absolute;
  font-size: 1rem;
  animation: sparkle-float linear infinite;
  opacity: 0;
}

.sparkle:nth-child(1)  { left: 10%; top: 20%; --dx: 15px;  --dy: -35px; --dr: 120deg; animation-duration: 3.2s; animation-delay: 0s;    font-size: 0.7rem; }
.sparkle:nth-child(2)  { left: 25%; top: 60%; --dx: -10px; --dy: -50px; --dr: 200deg; animation-duration: 4.1s; animation-delay: 0.8s;  font-size: 1rem;   }
.sparkle:nth-child(3)  { left: 55%; top: 30%; --dx: 20px;  --dy: -45px; --dr: 90deg;  animation-duration: 2.8s; animation-delay: 1.4s;  font-size: 0.8rem; }
.sparkle:nth-child(4)  { left: 70%; top: 70%; --dx: -15px; --dy: -40px; --dr: 270deg; animation-duration: 3.6s; animation-delay: 0.3s;  font-size: 0.65rem;}
.sparkle:nth-child(5)  { left: 85%; top: 25%; --dx: 10px;  --dy: -55px; --dr: 160deg; animation-duration: 4.4s; animation-delay: 1.9s;  font-size: 0.9rem; }
.sparkle:nth-child(6)  { left: 40%; top: 80%; --dx: -20px; --dy: -30px; --dr: 320deg; animation-duration: 3.0s; animation-delay: 2.5s;  font-size: 0.75rem;}
.sparkle:nth-child(7)  { left: 15%; top: 85%; --dx: 12px;  --dy: -60px; --dr: 45deg;  animation-duration: 5.0s; animation-delay: 1.1s;  font-size: 1.1rem; }
.sparkle:nth-child(8)  { left: 92%; top: 55%; --dx: -8px;  --dy: -45px; --dr: 230deg; animation-duration: 3.8s; animation-delay: 0.6s;  font-size: 0.8rem; }