/* ===========================================
   Alaska Animation — Animations CSS
   =========================================== */

/* --- Confettis --- */
@keyframes confetti-fall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* --- Flottement ballons --- */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* --- Scintillement etoiles --- */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* --- Bounce fleche hero --- */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-15px); }
  60% { transform: translateY(-7px); }
}

/* --- Fade in up --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* --- Pulse --- */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

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

/* --- Confetti colors --- */
.confetti:nth-child(1) { left: 5%; width: 12px; height: 12px; background: var(--pink-primary); animation-duration: 4s; animation-delay: 0s; }
.confetti:nth-child(2) { left: 15%; width: 8px; height: 8px; background: var(--yellow-joy); animation-duration: 5s; animation-delay: 0.5s; border-radius: 50%; }
.confetti:nth-child(3) { left: 25%; width: 10px; height: 10px; background: var(--turquoise-pop); animation-duration: 4.5s; animation-delay: 1s; }
.confetti:nth-child(4) { left: 35%; width: 14px; height: 6px; background: var(--purple-fun); animation-duration: 5.5s; animation-delay: 0.3s; }
.confetti:nth-child(5) { left: 45%; width: 8px; height: 8px; background: var(--orange-warm); animation-duration: 4.2s; animation-delay: 0.8s; border-radius: 50%; }
.confetti:nth-child(6) { left: 55%; width: 12px; height: 12px; background: var(--mint-fresh); animation-duration: 5.2s; animation-delay: 1.5s; }
.confetti:nth-child(7) { left: 65%; width: 6px; height: 14px; background: var(--coral); animation-duration: 4.8s; animation-delay: 0.2s; }
.confetti:nth-child(8) { left: 75%; width: 10px; height: 10px; background: var(--yellow-joy); animation-duration: 5s; animation-delay: 1.2s; border-radius: 50%; }
.confetti:nth-child(9) { left: 85%; width: 8px; height: 8px; background: var(--pink-dark); animation-duration: 4.6s; animation-delay: 0.6s; }
.confetti:nth-child(10) { left: 95%; width: 12px; height: 6px; background: var(--turquoise-pop); animation-duration: 5.4s; animation-delay: 1.8s; }
.confetti:nth-child(11) { left: 10%; width: 6px; height: 6px; background: var(--purple-fun); animation-duration: 6s; animation-delay: 2s; border-radius: 50%; }
.confetti:nth-child(12) { left: 30%; width: 10px; height: 4px; background: var(--orange-warm); animation-duration: 4.3s; animation-delay: 2.5s; }
.confetti:nth-child(13) { left: 50%; width: 8px; height: 8px; background: var(--mint-fresh); animation-duration: 5.8s; animation-delay: 0.9s; }
.confetti:nth-child(14) { left: 70%; width: 14px; height: 8px; background: var(--pink-primary); animation-duration: 4.7s; animation-delay: 1.6s; }
.confetti:nth-child(15) { left: 90%; width: 6px; height: 12px; background: var(--yellow-joy); animation-duration: 5.3s; animation-delay: 0.4s; }

/* --- Decorative floating elements --- */
.decoration-float {
  animation: float 3s ease-in-out infinite;
}

.decoration-float--slow {
  animation: float 5s ease-in-out infinite;
}

.decoration-twinkle {
  animation: twinkle 2s ease-in-out infinite;
}

/* --- SVG blob animations --- */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
}

.blob--1 {
  width: 400px;
  height: 400px;
  background: var(--pink-primary);
  top: -100px;
  right: -100px;
  animation: float 8s ease-in-out infinite;
}

.blob--2 {
  width: 300px;
  height: 300px;
  background: var(--turquoise-pop);
  bottom: -50px;
  left: -50px;
  animation: float 6s ease-in-out infinite reverse;
}

.blob--3 {
  width: 200px;
  height: 200px;
  background: var(--purple-fun);
  top: 50%;
  left: 50%;
  animation: float 7s ease-in-out infinite;
}