/* ==========================================================
   Fiera del Biologico — Animations & Micro-interactions
   ========================================================== */

/* ---------- Keyframes ---------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUpHill {
  from {
    opacity: 0;
    transform: translateY(100%) translateX(var(--tx, 0));
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(var(--tx, 0));
  }
}

@keyframes slideUpHillCenter {
  from {
    opacity: 0;
    transform: translateY(100%) translateX(-50%);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
  }
}

@keyframes growIn {
  from {
    opacity: 0;
    transform: scale(0) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes beeFloat {
  from {
    opacity: 0;
    transform: translateX(80px) rotate(-15deg);
  }
  40% {
    opacity: 1;
    transform: translateX(20px) rotate(5deg);
  }
  70% {
    transform: translateX(-10px) rotate(-3deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}

@keyframes beeHover {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(2deg); }
  75% { transform: translateY(3px) rotate(-1deg); }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 160, 144, 0);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(232, 160, 144, 0.15);
  }
}

@keyframes starPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes checkCircleDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes checkMarkDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translateY(-100vh) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(10vh) rotate(var(--rot, 360deg));
  }
}

@keyframes beeFlyAcross {
  0% {
    opacity: 0;
    transform: translateX(-80px) translateY(20px) rotate(-10deg);
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: translateX(30px) translateY(-15px) rotate(5deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(120px) translateY(10px) rotate(-5deg);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeSwap {
  0% { opacity: 1; }
  40% { opacity: 0; }
  60% { opacity: 0; }
  100% { opacity: 1; }
}

/* ---------- Stagger Entrance Classes ---------- */
.anim-entrance {
  opacity: 0;
}

.anim-entrance.anim-active {
  opacity: 1;
  animation-fill-mode: forwards;
  animation-timing-function: var(--ease-out-expo);
}

.anim-fade-in.anim-active { animation: fadeIn 0.4s forwards; }
.anim-fade-up.anim-active { animation: fadeInUp 0.6s var(--ease-out-expo) forwards; }
.anim-fade-down.anim-active { animation: fadeInDown 0.5s var(--ease-out-expo) forwards; }
.anim-grow.anim-active { animation: growIn 0.5s var(--ease-out-expo) forwards; }
.anim-slide-left.anim-active { animation: slideInLeft 0.6s var(--ease-out-expo) forwards; }
.anim-slide-right.anim-active { animation: slideInRight 0.6s var(--ease-out-expo) forwards; }

.anim-hill.anim-active { animation: slideUpHill 0.7s var(--ease-out-expo) forwards; }
.anim-hill-center.anim-active { animation: slideUpHillCenter 0.7s var(--ease-out-expo) forwards; }
.anim-bee.anim-active { animation: beeFloat 0.8s var(--ease-out-expo) forwards; }

/* Stagger delays */
.anim-delay-1 { animation-delay: 100ms !important; }
.anim-delay-2 { animation-delay: 200ms !important; }
.anim-delay-3 { animation-delay: 300ms !important; }
.anim-delay-4 { animation-delay: 400ms !important; }
.anim-delay-5 { animation-delay: 500ms !important; }
.anim-delay-6 { animation-delay: 600ms !important; }
.anim-delay-7 { animation-delay: 700ms !important; }
.anim-delay-8 { animation-delay: 800ms !important; }

/* Bee idle hover after entrance */
.scene__bee.anim-active {
  animation: beeFloat 0.8s var(--ease-out-expo) forwards;
}

.scene__bee.anim-idle {
  animation: beeHover 3s ease-in-out infinite;
}

/* Choice button breathing pulse */
.choice-btn.anim-idle {
  animation: pulseGlow 2.5s ease-in-out infinite;
}

/* ---------- Star Click Pulse ---------- */
.rating__star.pulse {
  animation: starPulse 0.3s var(--ease-bounce);
}

/* ---------- Success Animations ---------- */
.success-card.anim-active .success-card__check circle {
  animation: checkCircleDraw 0.6s var(--ease-out) 0.2s forwards;
}

.success-card.anim-active .success-card__check polyline {
  animation: checkMarkDraw 0.4s var(--ease-out) 0.7s forwards;
}

.success-card.anim-active .success-card__bee {
  animation: beeFlyAcross 1.5s var(--ease-out) 1.2s forwards;
  opacity: 0;
}

/* ---------- Confetti Particles ---------- */
.confetti {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 200;
  overflow: hidden;
}

.confetti__particle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  animation: confettiFall 2.5s ease-in forwards;
}

/* ---------- Form Section Reveal ---------- */
.form-section.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}

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

/* ---------- Language Switch Transition ---------- */
.i18n-fading [data-i18n],
.i18n-fading [data-i18n-placeholder] {
  animation: fadeSwap var(--duration-fast) var(--ease-out);
}

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

  .anim-entrance {
    opacity: 1;
  }

  .scene__bee.anim-idle {
    animation: none;
  }

  .choice-btn.anim-idle {
    animation: none;
  }
}