/* ==========================================================================
   LITTLE FLOCK KINDERGARTEN - PLAYFUL ANIMATIONS & SHAPES
   ========================================================================== */

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(2deg);
  }
}

@keyframes floatAlt {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(10px) rotate(-2deg);
  }
}

@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-16px) rotate(4deg);
  }
}

@keyframes floatGentleAlt {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(14px) rotate(-4deg);
  }
}

@keyframes floatDrift {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(8px, -12px) rotate(3deg);
  }
  66% {
    transform: translate(-6px, -6px) rotate(-2deg);
  }
}

@keyframes pulseScale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes swayCute {
  0%, 100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}

@keyframes bounceCute {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(230, 43, 100, 0.4);
  }
  50% {
    box-shadow: 0 0 0 16px rgba(230, 43, 100, 0);
  }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   FLOATING SIDE SHAPES UTILITY CLASSES
   ========================================================================== */
.floating-side-shape {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  max-width: 100%;
  height: auto;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.anim-float-1 {
  animation: floatGentle 5.5s ease-in-out infinite;
}

.anim-float-2 {
  animation: floatGentleAlt 6.5s ease-in-out infinite;
}

.anim-drift {
  animation: floatDrift 7.5s ease-in-out infinite;
}

.anim-spin {
  animation: spinSlow 28s linear infinite;
}

.anim-sway {
  animation: swayCute 4.5s ease-in-out infinite;
}

.anim-pulse {
  animation: pulseScale 4s ease-in-out infinite;
}

.animate-float {
  animation: floatSlow 4s ease-in-out infinite;
}

.animate-float-alt {
  animation: floatAlt 5s ease-in-out infinite;
}

.animate-bounce-hover:hover {
  animation: bounceCute 0.8s ease;
}

.animate-wiggle-hover:hover {
  animation: wiggle 0.5s ease;
}

.animate-spin-slow {
  animation: spinSlow 20s linear infinite;
}

.pulse-button {
  animation: pulseGlow 2.5s infinite;
}

/* Subtle scroll reveal transition */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}