/* ═══════════════════════════════════════════
   animations.css — Keyframes & animation classes
   Warm pink edition
   ═══════════════════════════════════════════ */

/* ── Fades ── */
.fade-in { animation: fadeIn 0.5s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-up { animation: fadeUp 0.6s var(--ease-s) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ── Hero Letters ── */
.hero-letter {
  display: inline-block;
  opacity: 0; transform: translateY(12px);
}

/* ── Typing Cursor ── */
.typing-cursor::after {
  content: '|'; color: var(--pink-500);
  animation: blink 0.7s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ── Glow Pulse (badges, completed items) ── */
.pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }
@keyframes pulseGlow {
  0%, 100% { box-shadow: var(--glow-primary); }
  50% { box-shadow: var(--glow-secondary); }
}

/* ── Confetti ── */
@keyframes confettiDrop {
  0% { transform: translateY(-14px) rotateZ(0deg) rotateY(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotateZ(720deg) rotateY(360deg); opacity: 0; }
}

/* ── Chapter completed ── */
.chapter-completed { animation: chapterDone 0.6s var(--ease) both; }
@keyframes chapterDone {
  0% { transform: scale(1); }
  30% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* ── Floating hearts (like Protocolo Gatirena particles) ── */
.floating-particle {
  position: fixed; pointer-events: none; z-index: 0;
  animation: floatParticle linear infinite;
  opacity: 0;
}
@keyframes floatParticle {
  0% { transform: translateY(105vh) rotate(0deg) scale(0.6); opacity: 0; }
  8% { opacity: 0.4; }
  85% { opacity: 0.2; }
  100% { transform: translateY(-8vh) rotate(360deg) scale(1.1); opacity: 0; }
}

/* ── Countdown pulse ── */
.countdown-number {
  font-family: var(--font-display); font-size: 64px; font-weight: 700;
  color: var(--pink-600); animation: countPulse 1s ease-in-out infinite alternate;
}
@keyframes countPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.06); }
}

/* ── UN MILLÓN Easter Egg Overlay ── */
.million-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at center, rgba(255,77,109,0.3), rgba(90,24,50,0.6));
  animation: millionIn 0.5s ease both;
  pointer-events: none;
}
.million-overlay.fade-out { animation: millionOut 0.8s ease both; }
@keyframes millionIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes millionOut { to { opacity: 0; } }

.million-text {
  font-family: var(--font-sig); font-size: clamp(3rem, 12vw, 6rem);
  color: #fff; text-shadow: 0 0 40px rgba(255,77,109,0.8), 0 0 80px rgba(255,107,138,0.5);
  animation: millionPulse 0.6s ease-in-out infinite alternate;
}
@keyframes millionPulse {
  from { transform: scale(1); text-shadow: 0 0 40px rgba(255,77,109,0.8); }
  to { transform: scale(1.08); text-shadow: 0 0 60px rgba(255,77,109,1), 0 0 120px rgba(255,107,138,0.6); }
}

.million-hearts {
  position: fixed; inset: 0; pointer-events: none; overflow: hidden;
}
.million-heart {
  position: absolute; bottom: -10%;
  left: var(--x, 50%);
  font-size: calc(var(--s, 1) * 1.5rem);
  animation: heartRise var(--d, 2s) ease-out forwards;
  animation-delay: calc(var(--i, 0) * 0.1s);
  opacity: 0;
}
@keyframes heartRise {
  0% { transform: translateY(0) scale(0) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-120vh) scale(1.5) rotate(360deg); opacity: 0; }
}

/* ── Prefers Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .floating-particle { display: none; }
  .million-overlay { display: none; }
}