/* ============================================
   ANIMATIONS.CSS — San Antonio de Padua 2026
   Keyframes y efectos de ESTE proyecto
   ============================================ */

/* ============================================
   ENTRADAS BÁSICAS
   ============================================ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes scriptIn {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes santoIn {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes santoCornerIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes yearReveal {
  from {
    opacity: 0;
    letter-spacing: 30px;
  }
  to {
    opacity: 1;
    letter-spacing: 12px;
  }
}

@keyframes dateBannerIn {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes frameIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 0.6;
    transform: scale(1);
  }
}

@keyframes separatorIn {
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes noFaltenIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
    filter: brightness(2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes locBtnIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes castilloIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 0.22;
    transform: translateX(0);
  }
}

/* ============================================
   FLORES EN ESQUINAS
   ============================================ */
@keyframes flowerIn {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-30deg);
  }
  to {
    opacity: 0.95;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes flowerInMirror {
  from {
    opacity: 0;
    transform: scaleX(-1) scale(0.3);
  }
  to {
    opacity: 0.95;
    transform: scaleX(-1) scale(1);
  }
}
@keyframes flowerInFlip {
  from {
    opacity: 0;
    transform: scaleY(-1) scale(0.3);
  }
  to {
    opacity: 0.95;
    transform: scaleY(-1) scale(1);
  }
}
@keyframes flowerInBoth {
  from {
    opacity: 0;
    transform: scale(-0.3);
  }
  to {
    opacity: 0.95;
    transform: scale(-1);
  }
}

/* ============================================
   EFECTOS CONTINUOS
   ============================================ */

/* Partículas flotando (escena 1) */
@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(100vh) scale(0);
  }
  10% {
    opacity: 1;
    transform: translateY(90vh) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(10vh) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translateY(-10vh) scale(0);
  }
}

/* Aura del santo */
@keyframes auraPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* Pulso de música */
@keyframes musicPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.15);
    opacity: 0;
  }
}

/* Fiesta pulse (overlay de luz) */
@keyframes fiestaPulse {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* Pin del mapa */
@keyframes pinRing {
  0% {
    transform: translateY(-50%) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translateY(-50%) scale(2.5);
    opacity: 0;
  }
}

/* Hint de navegación */
@keyframes hintShow {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Scroll de nombres */
@keyframes marqueeUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

/* Lucernas (escena 2) */
@keyframes flicker {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Papel picado cayendo (escena 3) */
@keyframes papelFall {
  0% {
    transform: translateY(110vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.95;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-50px) rotate(-720deg);
    opacity: 0;
  }
}

/* Twinkle (estrellas escena 5) */
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* Corona brillando */
@keyframes crownAppear {
  0% {
    opacity: 0;
    transform: translateY(-15px) scale(0.5) rotate(-10deg);
  }
  60% {
    opacity: 1;
    transform: translateY(2px) scale(1.05) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}
@keyframes crownShine {
  0%,
  100% {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7))
      drop-shadow(0 0 12px rgba(244, 211, 105, 0.6));
  }
  50% {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7))
      drop-shadow(0 0 25px rgba(244, 211, 105, 1));
  }
}

/* Luces de fiesta (escena 4) */
@keyframes lightSweep1 {
  0%,
  100% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translateX(400px) translateY(-50px) scale(1.2);
    opacity: 0.7;
  }
}
@keyframes lightSweep2 {
  0%,
  100% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translateX(-400px) translateY(80px) scale(1.3);
    opacity: 0.7;
  }
}
@keyframes lightSweep3 {
  0%,
  100% {
    transform: scale(1) translateY(0);
    opacity: 0.35;
  }
  33% {
    transform: scale(1.4) translateY(-60px);
    opacity: 0.6;
  }
  66% {
    transform: scale(0.9) translateY(40px);
    opacity: 0.5;
  }
}
@keyframes lightSweep4 {
  0%,
  100% {
    transform: scale(1) translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.3) translateX(-100px);
    opacity: 0.55;
  }
}
@keyframes stageBlink {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* ============================================
   EFECTOS DE TEXTO (coquetos y sutiles)
   ============================================ */

/* Brillo pulsante en nombres Edwardian */
@keyframes scriptGlow {
  0%,
  100% {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9))
      drop-shadow(0 0 8px rgba(244, 211, 105, 0.3));
  }
  50% {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9))
      drop-shadow(0 0 20px rgba(244, 211, 105, 0.8));
  }
}

/* Shimmer en tags de día */
@keyframes shimmerTag {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* ¡NO FALTEN! pulsante */
@keyframes noFaltenPulse {
  0%,
  100% {
    text-shadow:
      0 0 20px rgba(244, 211, 105, 0.6),
      0 0 40px rgba(212, 164, 55, 0.3),
      0 3px 8px rgba(0, 0, 0, 0.8);
  }
  50% {
    text-shadow:
      0 0 30px rgba(244, 211, 105, 1),
      0 0 60px rgba(212, 164, 55, 0.8),
      0 0 100px rgba(255, 228, 140, 0.4),
      0 3px 8px rgba(0, 0, 0, 0.8);
  }
}

/* Año brillando (escena 1) */
@keyframes yearShimmer {
  0%,
  100% {
    text-shadow: 0 2px 10px rgba(138, 106, 31, 0.4);
  }
  50% {
    text-shadow:
      0 0 20px rgba(244, 211, 105, 0.9),
      0 0 40px rgba(212, 164, 55, 0.5);
  }
}

/* Music banner pulsante */
@keyframes musicBannerPulse {
  0%,
  100% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow:
      0 4px 20px rgba(233, 30, 99, 0.6),
      0 0 40px rgba(255, 119, 168, 0.3);
  }
}

/* Botón de ubicación pulsante */
@keyframes locBtnPulse {
  0%,
  100% {
    box-shadow:
      0 0 30px rgba(232, 201, 122, 0.7),
      0 6px 18px rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow:
      0 0 50px rgba(232, 201, 122, 1),
      0 0 100px rgba(201, 162, 74, 0.7),
      0 6px 18px rgba(0, 0, 0, 0.5);
  }
}

/* ============================================
   EFECTOS DE TEXTO — aplicados por elemento
   ============================================ */

/* Brillo pulsante en nombres Edwardian (después de que aparecen) */
.encabezada-name {
  animation:
    scriptIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.5s forwards,
    scriptGlow 3s ease-in-out infinite 5s;
}
.ft-name,
.ft-name-big,
.ft-music,
.s5-free-name,
.s5-event-name,
.s5-script-name {
  animation: scriptGlow 3s ease-in-out infinite 3s;
}

/* Shimmer en tags de día */
#scene2 .day-tag-big,
#scene3 .day-tag-big,
#scene4 .day-tag-big,
#scene5 .day-tag-big {
  background-size: 200% auto;
  background-image: linear-gradient(
    90deg,
    var(--red-flower) 0%,
    #e53935 35%,
    #ff7070 50%,
    #e53935 65%,
    var(--red-flower) 100%
  );
  animation:
    fadeUp 0.8s ease-out 0.4s forwards,
    shimmerTag 3s linear infinite 2s;
}

/* Shimmer en "Calenda" y títulos grandes */
.event-script-big {
  animation:
    scriptIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards,
    scriptGlow 4s ease-in-out infinite 5s;
}

/* ¡NO FALTEN! pulsante */
.no-falten {
  animation:
    noFaltenIn 2s cubic-bezier(0.22, 1, 0.36, 1) 2.8s forwards,
    noFaltenPulse 2.5s ease-in-out infinite 5s;
}

/* Año escena 1 */
.year {
  animation:
    yearReveal 1.5s cubic-bezier(0.22, 1, 0.36, 1) 3s forwards,
    yearShimmer 4s ease-in-out infinite 5s;
}

/* Botón de ubicación */
.location-btn {
  animation:
    locBtnIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) 3.2s forwards,
    locBtnPulse 2s ease-in-out infinite 5s;
}

/* Banner musical */
.music-banner {
  animation:
    fadeUp 0.8s ease-out 2.9s forwards,
    musicBannerPulse 3s ease-in-out infinite 4s;
}

/* Tags de hora (5:00 AM, 10:00 HRS) */
.s5-time-tag,
.schedule-time-tag-s5 {
  animation: tagPop 3s ease-in-out infinite 2s;
}
@keyframes tagPop {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 3px 12px rgba(211, 47, 47, 0.6);
  }
}

/* Labels de roles */
.ft-label,
.s5-free-label,
.s5-event-label {
  animation: labelBlink 4s ease-in-out infinite 1.5s;
}
@keyframes labelBlink {
  0%,
  100% {
    opacity: 1;
    letter-spacing: 2.5px;
  }
  50% {
    opacity: 0.85;
    letter-spacing: 3px;
  }
}