/* ==========================================================================
   Dr Sona Says — Animation Stylesheet
   All keyframe animations, GSAP-related utility classes, and motion effects.
   ========================================================================== */

/* ---------- Floating Books Animation ----------
   Used in the hero section for decorative book shapes drifting up & down. */
@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-20px) rotate(3deg);
  }
  50% {
    transform: translateY(-10px) rotate(-2deg);
  }
  75% {
    transform: translateY(-25px) rotate(2deg);
  }
}

/* ---------- Sparkle Twinkle ----------
   Small dots that fade in/out with a scale pulse, creating a twinkling star effect. */
@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* ---------- Bubble Float ----------
   Circular outlines that drift upward and fade out, like soap bubbles. */
@keyframes bubbleFloat {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-60px) scale(1.2);
    opacity: 0.3;
  }
  100% {
    transform: translateY(-120px) scale(0.8);
    opacity: 0;
  }
}

/* ---------- Bouncing CTA Button ----------
   A gentle vertical bounce to draw attention to the primary call-to-action. */
@keyframes bounceBtn {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-12px);
  }
  60% {
    transform: translateY(-6px);
  }
}

/* ---------- Rocket Launch ----------
   Used when the back-to-top button is clicked: shoots up then resets. */
@keyframes rocketLaunch {
  0% {
    transform: translateY(0) scale(1);
  }
  30% {
    transform: translateY(-20px) scale(1.15);
  }
  60% {
    transform: translateY(-100vh) scale(0.8);
    opacity: 1;
  }
  61% {
    transform: translateY(60px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* ---------- Fade In Up ----------
   Generic entrance animation — content fades in while sliding up. */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Fade In Down ---------- */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Fade In Left ---------- */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---------- Fade In Right ---------- */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---------- Scale In (Bounce) ----------
   Pops in from zero with a slight overshoot for a playful reveal. */
@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- Pulse ----------
   Subtle pulsing glow, used on mascot or highlighted elements. */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* ---------- Wiggle ----------
   A quick left-right rotation wiggle for playful interactions. */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  15%      { transform: rotate(6deg); }
  30%      { transform: rotate(-6deg); }
  45%      { transform: rotate(4deg); }
  60%      { transform: rotate(-3deg); }
  75%      { transform: rotate(1deg); }
}

/* ---------- Slide In From Right ----------
   Used for the cart drawer entrance. */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* ---------- Spin ---------- */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- Wave Animation ----------
   Mascot waving hand effect — a rotation from center bottom. */
@keyframes wave {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(14deg); }
  20%  { transform: rotate(-8deg); }
  30%  { transform: rotate(14deg); }
  40%  { transform: rotate(-4deg); }
  50%  { transform: rotate(10deg); }
  60%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* ---------- Confetti Burst ----------
   Individual confetti piece trajectory (overridden by JS canvas). */
@keyframes confettiFall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* ---------- Typewriter Cursor ---------- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ---------- Gradient Shift ----------
   Slowly shifts a background gradient for a living, breathing feel. */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------- Heart Beat ----------
   For testimonial like-buttons or love icons. */
@keyframes heartBeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.3); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.3); }
  70%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* ---------- Check Mark Draw ----------
   SVG stroke animation for checklist items. */
@keyframes checkDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ========================================================================
   Utility animation classes — applied dynamically via JS / GSAP
   ======================================================================== */

/* Scroll-triggered animation states (initially hidden, revealed by JS) */
.anim-hidden {
  opacity: 0;
  transform: translateY(40px);
}

.anim-visible {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stagger delay helpers — applied in JS for sequential reveals */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }
.delay-5 { transition-delay: 0.5s !important; }
.delay-6 { transition-delay: 0.6s !important; }

/* Mascot wave loop */
.mascot-wave {
  animation: wave 2.5s ease-in-out infinite;
  transform-origin: 70% 70%;
}

/* Pulse loop for highlighted elements */
.anim-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* Wiggle on hover */
.anim-wiggle:hover {
  animation: wiggle 0.5s ease-in-out;
}

/* Gradient background animation */
.anim-gradient {
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}

/* Heart beat */
.anim-heartbeat {
  animation: heartBeat 1.3s ease-in-out;
}

/* Floating continuous */
.anim-float {
  animation: floatUpDown 4s ease-in-out infinite;
}

/* Spin */
.anim-spin {
  animation: spin 2s linear infinite;
}

/* Scale pop entrance */
.anim-pop {
  animation: scaleIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Fade in up entrance */
.anim-fade-up {
  animation: fadeInUp 0.6s ease forwards;
}

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .floating-book,
  .sparkle,
  .bubble {
    animation: none !important;
    opacity: 0.15;
  }

  .btn-bounce {
    animation: none !important;
  }

  .mascot-wave {
    animation: none !important;
  }
}