/* ==========================================================================
   LITTLE BEE ACADEMY — ANIMATION SYSTEM
   Keyframes + reusable motion classes. GSAP handles scroll-driven timelines
   in js/animations.js; this file covers CSS-native ambient/looping motion
   and the base states for JS-triggered reveals.
   ========================================================================== */

/* ---------- Ambient float / drift loops ---------- */
@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-16px); }
}
@keyframes floatYSmall {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(3deg); }
}
@keyframes driftX {
  0% { transform: translateX(0); }
  100% { transform: translateX(40px); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes wingFlutter {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.55); }
}
@keyframes scrollDot {
  0% { opacity: 0; transform: translate(-50%, 0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,201,58,0.45); }
  50% { box-shadow: 0 0 0 10px rgba(248,201,58,0); }
}
@keyframes popIn {
  0% { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  70% { transform: scale(1.08) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.anim-float { animation: floatY 5s ease-in-out infinite; }
.anim-float-sm { animation: floatYSmall 4s ease-in-out infinite; }
.anim-spin-slow { animation: spinSlow 18s linear infinite; }
.anim-wing { animation: wingFlutter 0.18s ease-in-out infinite; transform-origin: center; }
.anim-pulse { animation: pulseGlow 2.4s ease-out infinite; }

/* stagger helper delays */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.6s; }
.delay-3 { animation-delay: 1s; }
.delay-4 { animation-delay: 1.4s; }

/* ---------- Scroll-reveal base states (activated via JS adding .is-visible) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-46px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.85); }
[data-reveal="scale"].is-visible { transform: scale(1); }
[data-reveal="pop"] { transform: scale(0.6) rotate(-6deg); }
[data-reveal="pop"].is-visible { transform: scale(1) rotate(0deg); transition-timing-function: var(--ease-bounce); }

[data-reveal-group] [data-reveal] { transition-delay: calc(var(--i, 0) * 0.09s); }

/* ---------- SVG draw-on stroke animation ---------- */
.draw-path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.4s var(--ease-soft);
}
.draw-path.is-visible { stroke-dashoffset: 0; }

/* ---------- Flower bloom ---------- */
.bloom {
  transform-origin: center bottom;
  transform: scale(0.3);
  opacity: 0;
  transition: transform 0.7s var(--ease-bounce), opacity 0.5s;
}
.bloom.is-visible { transform: scale(1); opacity: 1; }

/* ---------- Star pop ---------- */
.star-pop {
  opacity: 0;
  transform: scale(0) rotate(-40deg);
  transition: transform 0.6s var(--ease-bounce), opacity 0.4s;
}
.star-pop.is-visible { opacity: 1; transform: scale(1) rotate(0deg); }

/* ---------- Honeycomb hover glow ---------- */
.hex-glow { transition: filter var(--dur-med), transform var(--dur-med) var(--ease-bounce); }
.hex-glow:hover { filter: drop-shadow(0 0 14px rgba(248,201,58,0.65)); transform: scale(1.06); }

/* ---------- Magnetic button wrapper (JS sets transform via inline style) ---------- */
.magnetic { transition: transform 0.25s var(--ease-soft); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .story-bee-layer { display: none !important; }
  html.lenis, html.lenis body { height: auto; }
}

/* html flag toggled by JS when prefers-reduced-motion is detected, so we can
   also gate GSAP-driven inline transforms (not just CSS) */
html.reduced-motion .hero-float,
html.reduced-motion .welcome-deco,
html.reduced-motion .anim-float,
html.reduced-motion .anim-float-sm,
html.reduced-motion .anim-spin-slow,
html.reduced-motion .story-bee-layer,
html.reduced-motion .final-cta-bee {
  animation: none !important;
  transform: none !important;
}