/* ==========================================================================
   CASTELO HAPPY KIDS - ANIMAÇÕES E EFEITOS VISUAIS
   Inspirado na fluidez e efeitos de entrada com scroll (Zuppa Upa & XVentura)
   + ANIMAÇÕES DO MASCOTE HAPPY (O DRAGÃOZINHO DO CASTELO)
   ========================================================================== */

/* --- Keyframe Animations Gerais --- */

/* Flutuação suave (para balões, coroas, badges e estrelinhas) */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(2deg);
  }
}

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

/* Pulso de brilho para CTAs e WhatsApp */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

@keyframes pulse-primary {
  0% {
    box-shadow: 0 0 0 0 rgba(229, 36, 42, 0.5);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(229, 36, 42, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(229, 36, 42, 0);
  }
}

/* Efeito Shimmer metálico em botões e badges */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Letreiro Contínuo (Marquee) */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Rotação lenta para estrelas e brilhos */
@keyframes spin-slow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   ANIMAÇÕES DO MASCOTE "HAPPY" (ANDANDO, PULANDO E INTERAGINDO)
   ========================================================================== */

/* Gingado / Waddle dos passos do mascote */
@keyframes mascot-waddle {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(-5deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-8px) rotate(5deg);
  }
}

/* Travessia do Dragãozinho acompanhando o relevo da onda do Hero (Sem inverter texto) */
@keyframes dragon-wave-walk {
  0% {
    left: -140px;
    bottom: 24px;
    transform: rotate(4deg);
  }
  8% {
    bottom: 14px;
    transform: rotate(-3deg);
  }
  18% {
    bottom: 28px;
    transform: rotate(6deg);
  }
  28% {
    bottom: 46px;
    transform: rotate(-4deg);
  }
  38% {
    bottom: 24px;
    transform: rotate(5deg);
  }
  46% {
    bottom: 38px;
    transform: rotate(-2deg);
  }
  49.9% {
    left: calc(100% + 40px);
    bottom: 38px;
    transform: rotate(0deg);
  }
  50% {
    left: calc(100% + 40px);
    bottom: 38px;
    transform: rotate(0deg);
  }
  58% {
    bottom: 24px;
    transform: rotate(-5deg);
  }
  68% {
    bottom: 46px;
    transform: rotate(4deg);
  }
  78% {
    bottom: 28px;
    transform: rotate(-6deg);
  }
  88% {
    bottom: 14px;
    transform: rotate(3deg);
  }
  99.9% {
    left: -140px;
    bottom: 24px;
    transform: rotate(4deg);
  }
  100% {
    left: -140px;
    bottom: 24px;
    transform: rotate(4deg);
  }
}

/* Inversão apenas do corpinho do dragão para olhar na direção em que caminha */
@keyframes dragon-sprite-facing {
  0%, 49.9% {
    transform: scaleX(1);
  }
  50%, 99.9% {
    transform: scaleX(-1);
  }
  100% {
    transform: scaleX(1);
  }
}

/* Travessia contínua de um lado ao outro da tela (Passeio do Mascote) */
@keyframes mascot-patrol {
  0% {
    left: -120px;
    transform: scaleX(1);
  }
  48% {
    transform: scaleX(1);
  }
  50% {
    left: calc(100% + 40px);
    transform: scaleX(-1);
  }
  98% {
    transform: scaleX(-1);
  }
  100% {
    left: -120px;
    transform: scaleX(1);
  }
}

/* Pulo de celebração ao clicar no Happy */
@keyframes mascot-jump {
  0% {
    transform: scale(1) translateY(0);
  }
  25% {
    transform: scale(1.15, 0.85) translateY(0);
  }
  50% {
    transform: scale(0.9, 1.25) translateY(-45px) rotate(-12deg);
  }
  75% {
    transform: scale(1.1, 0.9) translateY(0);
  }
  100% {
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

/* Entrada do balãozinho de fala do mascote */
@keyframes speech-bubble-in {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(15px);
  }
  70% {
    transform: scale(1.05) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Confetes caindo pela tela */
@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(120px) rotate(360deg);
  }
}

/* Mastigadinha feliz do Happy comendo bolo */
@keyframes mascot-eating {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(3deg) scale(1.02);
  }
  50% {
    transform: rotate(0deg) scale(0.98);
  }
  75% {
    transform: rotate(-3deg) scale(1.02);
  }
}

/* Dança da festa no parabéns */
@keyframes mascot-party-dance {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  20% {
    transform: translateY(-14px) rotate(-6deg) scale(1.04);
  }
  40% {
    transform: translateY(0) rotate(4deg) scale(0.97);
  }
  60% {
    transform: translateY(-16px) rotate(6deg) scale(1.05);
  }
  80% {
    transform: translateY(0) rotate(-4deg) scale(0.98);
  }
}

/* --- Classes de Scroll Reveal (IntersectionObserver) --- */

.reveal {
  opacity: 0;
  transform: translateY(35px);
  filter: blur(4px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  filter: blur(4px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0px);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  filter: blur(4px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0px);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  filter: blur(6px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
}

/* Stagger Delays para grids e listas de cards */
.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; }

/* Micro-interações de Hover */
.hover-float {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.hover-float:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 35px -8px rgba(74, 21, 75, 0.18);
}

.hover-glow:hover {
  box-shadow: 0 0 25px rgba(255, 183, 3, 0.45);
}

.hover-scale {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* Floating Badges */
.floating-element {
  animation: float 4s ease-in-out infinite;
}

.floating-element-reverse {
  animation: float-reverse 4.5s ease-in-out infinite;
}

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