/* ================================================================
   PARA ELIS — animations.css
   Animaciones de entrada, hover y efectos especiales
   ================================================================ */

/* ----------------------------------------------------------------
   TRANSICIÓN ENTRE PANTALLAS
---------------------------------------------------------------- */
.screen-exit {
  animation: screenExit 0.7s cubic-bezier(.55,.06,.68,.19) forwards;
}

@keyframes screenExit {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); pointer-events: none; }
}

.screen-enter {
  animation: screenEnter 0.8s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes screenEnter {
  0%   { opacity: 0; transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}

/* ----------------------------------------------------------------
   ANIMACIONES DE ENTRADA GENERALES
---------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* ----------------------------------------------------------------
   STAGGER PARA CAPÍTULOS (aplicado por JS via IntersectionObserver)
---------------------------------------------------------------- */
.chapter.reveal { transition-delay: 0s; }

.timeline-item.reveal:nth-child(1) { transition-delay: 0.05s; }
.timeline-item.reveal:nth-child(2) { transition-delay: 0.15s; }
.timeline-item.reveal:nth-child(3) { transition-delay: 0.25s; }
.timeline-item.reveal:nth-child(4) { transition-delay: 0.35s; }
.timeline-item.reveal:nth-child(5) { transition-delay: 0.45s; }
.timeline-item.reveal:nth-child(6) { transition-delay: 0.55s; }

.photo-card.reveal:nth-child(1)  { transition-delay: 0.00s; }
.photo-card.reveal:nth-child(2)  { transition-delay: 0.07s; }
.photo-card.reveal:nth-child(3)  { transition-delay: 0.14s; }
.photo-card.reveal:nth-child(4)  { transition-delay: 0.21s; }
.photo-card.reveal:nth-child(5)  { transition-delay: 0.28s; }
.photo-card.reveal:nth-child(6)  { transition-delay: 0.35s; }
.photo-card.reveal:nth-child(7)  { transition-delay: 0.42s; }
.photo-card.reveal:nth-child(8)  { transition-delay: 0.49s; }
.photo-card.reveal:nth-child(9)  { transition-delay: 0.56s; }
.photo-card.reveal:nth-child(10) { transition-delay: 0.63s; }

.thought-card.reveal:nth-child(1) { transition-delay: 0.00s; }
.thought-card.reveal:nth-child(2) { transition-delay: 0.10s; }
.thought-card.reveal:nth-child(3) { transition-delay: 0.20s; }
.thought-card.reveal:nth-child(4) { transition-delay: 0.30s; }
.thought-card.reveal:nth-child(5) { transition-delay: 0.40s; }

/* ----------------------------------------------------------------
   CORAZONES / PARTÍCULAS FLOTANTES (intro y final)
---------------------------------------------------------------- */
@keyframes floatParticle {
  0%   { transform: translateY(0)       rotate(0deg)  scale(0.8); opacity: 0;   }
  8%   {                                                           opacity: 0.7; }
  90%  {                                                           opacity: 0.3; }
  100% { transform: translateY(-110vh)  rotate(40deg) scale(1.2); opacity: 0;   }
}

/* Final con dispersión lateral */
/* finaleFloat es la versión unificada; floatFinal se elimina */

/* ----------------------------------------------------------------
   SELLO DE CERA — APARICIÓN
---------------------------------------------------------------- */
@keyframes sealDrop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(5deg); }
  80%  { transform: scale(0.95) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.wax-seal {
  animation: sealDrop 0.9s cubic-bezier(.22,1,.36,1) 0.3s both, sealPulse 3s ease 1.5s infinite;
}

/* ----------------------------------------------------------------
   BOTÓN INTRO — LATIDO
---------------------------------------------------------------- */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(212,168,90,0);    }
  50%       { box-shadow: 0 0 0 9px rgba(212,168,90,0.12); }
}

/* ----------------------------------------------------------------
   ESTRELLA TOCADA
---------------------------------------------------------------- */
@keyframes starPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.6) rotate(-12deg); }
  70%  { transform: scale(0.95) rotate(5deg); }
  100% { transform: scale(1.1); }
}

/* ── Finale float (antes inyectado por finale.js) ─────────── */
@keyframes finaleFloat {
  0%   { transform: translateY(0)      translateX(0)          rotate(0deg)  scale(0.8); opacity: 0;   }
  8%   { opacity: 0.85; }
  90%  { opacity: 0.4;  }
  100% { transform: translateY(-110vh) translateX(var(--drift)) rotate(45deg) scale(1.1); opacity: 0; }
}

/* ----------------------------------------------------------------
   CONTADOR — ENTRADA DE NÚMEROS
---------------------------------------------------------------- */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.counter-display {
  animation: countUp 0.6s ease 1.2s both;
}

/* ----------------------------------------------------------------
   BARRA DE PROGRESO — LLENADO
---------------------------------------------------------------- */
/* Se anima vía JS cambiando el width en .milestone-progress */

/* ----------------------------------------------------------------
   PHOTO CARD — HOVER TILT con variables CSS (JS opcional)
---------------------------------------------------------------- */
.photo-card {
  transition:
    transform   0.35s cubic-bezier(.22,1,.36,1),
    box-shadow  0.35s ease;
  will-change: transform;
}

/* ----------------------------------------------------------------
   THOUGHT CARD — ENTRADA LATERAL
---------------------------------------------------------------- */
.thought-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.6s ease;
}

/* ----------------------------------------------------------------
   FUTURE LETTER — HOVER LIFT
---------------------------------------------------------------- */
.future-letter {
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

/* ----------------------------------------------------------------
   FINAL — TÍTULO PULSANTE
---------------------------------------------------------------- */
@keyframes titleBreath {
  0%, 100% { text-shadow: 0 2px 20px rgba(196,92,92,0.2); }
  50%       { text-shadow: 0 2px 40px rgba(196,92,92,0.45); }
}

.final-title {
  animation: titleBreath 3.5s ease infinite;
}

/* ----------------------------------------------------------------
   MÚSICA — ÍCONO GIRATORIO CUANDO ESTÁ ACTIVA
---------------------------------------------------------------- */
/* ── Shake error (antes inyectado por password.js) ─────────── */
@keyframes shakeError {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-10px); }
  40%       { transform: translateX(10px); }
  60%       { transform: translateX(-7px); }
  80%       { transform: translateX(7px); }
}

/* ── Konami drop (antes inyectado por app.js) ─────────────── */
@keyframes konamiDrop {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to   { transform: translateY(110vh) rotate(40deg); opacity: 0; }
}

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

.music-btn.playing #musicIcon {
  display: inline-block;
  animation: spin 4s linear infinite;
}