/* ==========================================================================
   ANIMATIONS & TRANSITIONS
   Aceleración por GPU a 60 FPS para móviles (iOS & Android)
   ========================================================================== */

/* Floating Soft Bounce */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

.float-slow {
  animation: floatSlow 4s ease-in-out infinite;
}

/* Pulsing Glow */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px var(--primary-glow), 0 0 30px var(--primary-glow);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 25px var(--primary-glow), 0 0 45px var(--primary-glow);
    transform: scale(1.02);
  }
}

.pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* Shimmer Light */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Candle Flame Realistic Flutter */
@keyframes flameFlicker {
  0% {
    transform: scale(1) rotate(-1.5deg);
    opacity: 0.95;
  }
  25% {
    transform: scale(1.05, 0.97) rotate(1.5deg);
    opacity: 1;
  }
  50% {
    transform: scale(0.97, 1.04) rotate(-1deg);
    opacity: 0.93;
  }
  75% {
    transform: scale(1.03, 1.01) rotate(1.2deg);
    opacity: 0.98;
  }
  100% {
    transform: scale(1) rotate(-1.5deg);
    opacity: 0.95;
  }
}

.flame-active {
  animation: flameFlicker 0.4s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: 50% 90%;
}

/* Desfase asincrónico natural para velas clásicas y numéricas */
#candle-0 .candle-flame,
.candle:nth-child(1) .candle-flame {
  animation-delay: 0s;
}

#candle-1 .candle-flame,
.candle:nth-child(2) .candle-flame {
  animation-delay: -0.16s;
}

#candle-2 .candle-flame,
.candle:nth-child(3) .candle-flame {
  animation-delay: -0.32s;
}

/* Extinguish Flame and Organic Smoke Rise */
@keyframes blowOut {
  0% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  40% {
    transform: scale(0.5, 1.25) translateY(-8px);
    opacity: 0.8;
  }
  100% {
    transform: scale(0) translateY(-24px);
    opacity: 0;
  }
}

.flame-extinguished {
  animation: blowOut 0.38s forwards ease-out !important;
  transform-box: fill-box;
  transform-origin: 50% 90%;
}

/* Realistic Organic SVG Candle Smoke Rise & Drift */
@keyframes smokeRise {
  0% {
    opacity: 0;
    stroke-dashoffset: 70;
    transform: translateY(0) scale(0.75) skewX(0deg);
  }
  15% {
    opacity: 0.85;
    transform: translateY(-8px) scale(0.9) skewX(4deg);
  }
  35% {
    opacity: 0.7;
    transform: translateY(-20px) scale(1.05) skewX(-5deg);
  }
  65% {
    opacity: 0.45;
    transform: translateY(-38px) scale(1.22) skewX(3deg);
  }
  85% {
    opacity: 0.2;
    transform: translateY(-50px) scale(1.35) skewX(-2deg);
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
    transform: translateY(-64px) scale(1.45) skewX(1deg);
  }
}

@keyframes svgSmokeRise {
  0% {
    opacity: 0;
    stroke-dashoffset: 70;
    transform: translateY(0) scale(0.75) skewX(0deg);
  }
  15% {
    opacity: 0.85;
    transform: translateY(-8px) scale(0.9) skewX(4deg);
  }
  35% {
    opacity: 0.7;
    transform: translateY(-20px) scale(1.05) skewX(-5deg);
  }
  65% {
    opacity: 0.45;
    transform: translateY(-38px) scale(1.22) skewX(3deg);
  }
  85% {
    opacity: 0.2;
    transform: translateY(-50px) scale(1.35) skewX(-2deg);
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
    transform: translateY(-64px) scale(1.45) skewX(1deg);
  }
}

.smoke-wisp {
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: bottom center;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45));
}

.smoke-active {
  animation: smokeRise 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  pointer-events: none;
}

/* Ambient Cake Thematic Aura Pulsing */
@keyframes cakeAuraPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.94);
    opacity: 0.72;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.03);
    opacity: 0.96;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.97);
    opacity: 0.78;
  }
}

/* Enveloping Celebration Halo Pulse */
@keyframes celebrationHaloPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.94);
    opacity: 0.75;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.14);
    opacity: 1;
  }
}

/* Dynamic Golden Sparkles Twinkling */
.cake-celebration-sparkle {
  transform-origin: center;
  transform-box: fill-box;
  animation: sparkleTwinkleBurst 1.8s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
  animation-delay: var(--delay, 0s);
  filter: drop-shadow(0 0 6px #fde047);
  pointer-events: none;
}

@keyframes sparkleTwinkleBurst {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: scale(calc(var(--scale, 1) * 1.25)) rotate(45deg);
    opacity: 1;
  }
  50% {
    transform: scale(calc(var(--scale, 1) * 0.85)) rotate(90deg);
    opacity: 0.8;
  }
  75% {
    transform: scale(calc(var(--scale, 1) * 1.15)) rotate(135deg);
    opacity: 1;
  }
  100% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
}

/* Organic Entrance for Continue Button (#btn-after-cake) */
@keyframes btnSurpriseEntrance {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.86);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes btnGoldenGlowPulse {
  0% {
    box-shadow: 0 6px 20px rgba(234, 179, 8, 0.4), 0 0 0 0 rgba(250, 204, 21, 0.5);
  }
  50% {
    box-shadow: 0 10px 30px rgba(234, 179, 8, 0.7), 0 0 0 8px rgba(250, 204, 21, 0);
  }
  100% {
    box-shadow: 0 6px 20px rgba(234, 179, 8, 0.4), 0 0 0 0 rgba(250, 204, 21, 0);
  }
}

/* Flower Blooming Animation */
@keyframes bloomPop {
  0% {
    transform: scale(0.7) rotate(-10deg);
    opacity: 0.8;
  }
  60% {
    transform: scale(1.18) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.blooming {
  animation: bloomPop 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Gift Box Opening Sequences */
@keyframes untieRibbon {
  0% {
    transform: translateX(-50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: translateX(-50%) scale(1.15, 0.9) rotate(-8deg);
    opacity: 0.95;
  }
  50% {
    transform: translateX(-50%) scale(1.28, 1.18) rotate(16deg) translateY(-10px);
    opacity: 0.85;
    filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.85));
  }
  100% {
    transform: translateX(-50%) scale(0.12) rotate(48deg) translateY(-36px);
    opacity: 0;
  }
}

.ribbon-untie {
  animation: untieRibbon 0.75s forwards cubic-bezier(0.22, 1, 0.36, 1);
}

.ribbon-untie .bow-loop-left {
  animation: bowLoopLeftUntie 0.7s forwards cubic-bezier(0.22, 1, 0.36, 1);
}

.ribbon-untie .bow-loop-right {
  animation: bowLoopRightUntie 0.7s forwards cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes bowLoopLeftUntie {
  0% { transform: rotate(-35deg) scale(1); }
  50% { transform: rotate(-70deg) scale(1.2) translate(-10px, -6px); }
  100% { transform: rotate(-95deg) scale(0) translate(-22px, -16px); opacity: 0; }
}

@keyframes bowLoopRightUntie {
  0% { transform: rotate(35deg) scaleX(-1) scale(1); }
  50% { transform: rotate(70deg) scaleX(-1) scale(1.2) translate(10px, -6px); }
  100% { transform: rotate(95deg) scaleX(-1) scale(0) translate(22px, -16px); opacity: 0; }
}

/* Anticipación Háptica: Micro-temblor elástico al tocar antes de abrir */
@keyframes wobbleAnticipate {
  0% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(0.97) rotate(-3deg) translate(-2px, 1px); }
  40% { transform: scale(0.98) rotate(3deg) translate(2px, -1px); }
  60% { transform: scale(1.02) rotate(-2deg) translate(-1px, 0); }
  80% { transform: scale(1.04) rotate(1.5deg) translate(1px, -1px); }
  100% { transform: scale(1.02) rotate(0deg); }
}

.gift-anticipating {
  animation: wobbleAnticipate 0.18s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards !important;
  transform-origin: center bottom;
}

@keyframes popLid3D {
  0% {
    transform: translateY(0) rotateX(0deg) rotateZ(0deg) scale(1);
    opacity: 1;
  }
  20% {
    transform: translateY(-22px) rotateX(-20deg) rotateZ(-3deg) scale(1.02);
    opacity: 1;
  }
  60% {
    transform: translateY(-95px) rotateX(-55deg) rotateZ(-14deg) scale(0.94);
    opacity: 0.85;
  }
  100% {
    transform: translateY(-170px) rotateX(-80deg) rotateZ(-28deg) scale(0.75);
    opacity: 0;
    pointer-events: none;
  }
}

.lid-open {
  animation: popLid3D 0.95s forwards cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: bottom center;
}

@keyframes floralSparklesRise {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -28px) scale(1.25);
    filter: drop-shadow(0 0 16px rgba(254, 240, 138, 0.95));
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -42px) scale(1.35);
    filter: drop-shadow(0 0 24px rgba(244, 63, 94, 0.9)) drop-shadow(0 0 12px #fde047);
  }
}

@keyframes giftBodyReact {
  0% { transform: translateY(0) scale(1); }
  25% { transform: translateY(5px) scale(1.02, 0.98); }
  60% { transform: translateY(-3px) scale(0.99, 1.01); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes giftBurst {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.gift-burst {
  animation: giftBurst 1s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Slide in Up for Modals and Sheets */
@keyframes slideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-up {
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Polaroid Card Tilt & Hover */
.polaroid-card {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
  will-change: transform;
}

.polaroid-card:active, .polaroid-card:hover {
  transform: scale(1.04) rotate(0deg) !important;
  z-index: 10;
}

/* Envelope Flap Open */
@keyframes flapOpen {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(180deg);
  }
}

/* Soft Fade In */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

/* Transición suave y cinematográfica entre pantallas */
@keyframes fadeInScreen {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fade-in-screen {
  animation: fadeInScreen 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Latido vivo y sutil para la caja de regalo en reposo */
@keyframes boxHeartbeat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025);
  }
}

/* Micro-balanceo botánico de brisa en reposo para el ramillete */
@keyframes bouquetBreeze {
  0%, 100% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(1.2deg);
  }
  66% {
    transform: rotate(-1deg);
  }
}

/* Rotación de Rayos Celestiales del Cofre Pirata */
@keyframes rotateGodRays {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Levitación de Cúpula en Gravedad Cero (Cápsula Espacial) */
@keyframes domeLevitateSpace {
  0% {
    transform: translateY(0) rotateX(0deg) rotateZ(0deg) scale(1);
    opacity: 1;
  }
  22% {
    transform: translateY(-22px) rotateX(-12deg) rotateZ(-2deg) scale(1.03);
    opacity: 0.95;
    border-color: rgba(147, 197, 253, 0.9);
  }
  60% {
    transform: translateY(-90px) rotateX(-35deg) rotateZ(6deg) scale(1.08);
    opacity: 0.7;
    filter: drop-shadow(0 0 25px rgba(56, 189, 248, 0.8)) blur(1px);
  }
  100% {
    transform: translateY(-170px) rotateX(-60deg) rotateZ(14deg) scale(0.75);
    opacity: 0;
    filter: blur(4px);
    pointer-events: none;
  }
}

/* Ascensión y Resplandor del Núcleo Estelar Cósmico */
@keyframes cosmicCoreAscend {
  0% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 10px #fde047);
    opacity: 0.9;
  }
  30% {
    transform: translateY(-10px) scale(1.8) rotate(15deg);
    filter: drop-shadow(0 0 20px #38bdf8) drop-shadow(0 0 35px #a855f7);
    opacity: 1;
  }
  70% {
    transform: translateY(-28px) scale(2.6) rotate(-10deg);
    filter: drop-shadow(0 0 30px #67e8f9) drop-shadow(0 0 50px rgba(168, 85, 247, 0.9));
    opacity: 1;
  }
  100% {
    transform: translateY(-35px) scale(2.8) rotate(0deg);
    filter: drop-shadow(0 0 40px #38bdf8) drop-shadow(0 0 65px rgba(254, 240, 138, 0.95));
    opacity: 1;
  }
}

/* Expansión de Anillos Orbitales en Hiperespacio */
@keyframes orbitWarpOuter {
  0% { transform: scale(1) rotate(0deg) rotateX(65deg); opacity: 0.6; }
  50% { transform: scale(1.35) rotate(180deg) rotateX(45deg); opacity: 1; box-shadow: 0 0 30px rgba(167, 139, 250, 0.9); }
  100% { transform: scale(1.5) rotate(360deg) rotateX(30deg); opacity: 0.85; box-shadow: 0 0 45px rgba(56, 189, 248, 0.95); }
}

@keyframes orbitWarpInner {
  0% { transform: scale(1) rotate(360deg) rotateY(65deg); opacity: 0.65; }
  50% { transform: scale(1.4) rotate(180deg) rotateY(45deg); opacity: 1; box-shadow: 0 0 25px rgba(56, 189, 248, 0.9); }
  100% { transform: scale(1.6) rotate(0deg) rotateY(30deg); opacity: 0.85; box-shadow: 0 0 40px rgba(167, 139, 250, 0.95); }
}

/* Expulsión Criogénica Lateral de Vapor (Cápsula) */
@keyframes steamBurstLeft {
  0% {
    transform: translateX(0) scale(0.4);
    opacity: 0;
  }
  20% {
    transform: translateX(-8px) scale(0.9);
    opacity: 0.95;
  }
  100% {
    transform: translateX(-55px) translateY(-15px) scale(2.4);
    opacity: 0;
  }
}

@keyframes steamBurstRight {
  0% {
    transform: translateX(0) scale(0.4);
    opacity: 0;
  }
  20% {
    transform: translateX(8px) scale(0.9);
    opacity: 0.95;
  }
  100% {
    transform: translateX(55px) translateY(-15px) scale(2.4);
    opacity: 0;
  }
}

/* Fractura y Caída del Sello de Lacre Vintage */
@keyframes waxSealFracture {
  0% {
    transform: translateX(-50%) translateZ(6px) scale(1) rotate(0deg);
    opacity: 1;
    filter: drop-shadow(0 4px 14px rgba(159, 18, 57, 0.45));
  }
  30% {
    transform: translateX(-50%) translateZ(10px) scale(1.15) rotate(-6deg);
    opacity: 0.9;
    filter: drop-shadow(0 0 16px #e11d48) drop-shadow(0 0 8px #fde047);
  }
  100% {
    transform: translateX(-50%) translateY(20px) translateZ(12px) scale(0.2) rotate(20deg);
    opacity: 0;
    pointer-events: none;
  }
}

/* Despliegue 3D de Solapa Vintage con Traspaso de Z-Depth limpio y fluido */
@keyframes vintageFlapOpen3D {
  0% {
    transform: rotateX(0deg) translateZ(5px);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
  }
  100% {
    transform: rotateX(180deg) translateZ(-1px);
    filter: brightness(0.88);
  }
}

/* Elevación Suave y Orgánica del Pergamino Interior Vintage */
@keyframes vintageLetterEmerge {
  0% {
    transform: translateY(0) translateZ(2px) scale(1);
    box-shadow: 0 4px 12px rgba(92, 51, 23, 0.12);
  }
  75% {
    transform: translateY(-82px) translateZ(6px) scale(1.04);
    box-shadow: 0 16px 32px rgba(92, 51, 23, 0.28), 0 0 18px rgba(254, 240, 138, 0.35);
  }
  100% {
    transform: translateY(-78px) translateZ(6px) scale(1.03);
    box-shadow: 0 14px 28px rgba(92, 51, 23, 0.25), 0 0 20px rgba(254, 240, 138, 0.45);
  }
}

/* Golpe de Claqueta de Cine: Snap Seco + Reapertura Triunfal con Proyector */
@keyframes clapperSnapAndOpen {
  0% {
    transform: rotate(-10deg);
  }
  26% {
    transform: rotate(0deg);
  }
  34% {
    transform: rotate(-3deg);
  }
  42% {
    transform: rotate(0deg);
  }
  70% {
    transform: rotate(-16deg);
  }
  100% {
    transform: rotate(-14deg);
    filter: drop-shadow(0 0 16px rgba(250, 204, 21, 0.75));
  }
}

/* Haz Volumétrico de Luz de Proyector Cinematográfico */
@keyframes clapperProjectorBeam {
  0% {
    opacity: 0;
    transform: translate(-50%, -10%) scaleY(0.1) scaleX(0.2);
  }
  35% {
    opacity: 0.2;
    transform: translate(-50%, -25%) scaleY(0.5) scaleX(0.6);
  }
  60% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scaleY(1.05) scaleX(1.1);
    filter: drop-shadow(0 0 25px rgba(254, 240, 138, 0.8)) blur(2px);
  }
  100% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scaleY(1) scaleX(1);
    filter: drop-shadow(0 0 35px rgba(250, 204, 21, 0.9)) blur(1px);
  }
}

/* Reacción de la Base de la Claqueta al Impacto */
@keyframes clapperBoardReact {
  0% { transform: scale(1) rotate(0deg); }
  26% { transform: scale(0.97) translateY(4px) rotate(1deg); }
  45% { transform: scale(1.05) translateY(-4px) rotate(-1deg); }
  100% { transform: scale(1.04) translateY(-2px) rotate(0deg); box-shadow: 0 20px 55px rgba(250, 204, 21, 0.5), 0 0 40px rgba(239, 68, 68, 0.35); }
}

/* Deslizamiento 3D y Disolución de Tapa de Bombonera Dulces */
@keyframes candyLidGlide3D {
  0% {
    transform: translateY(0) rotateX(0deg) rotateZ(0deg) scale(1);
    opacity: 1;
  }
  22% {
    transform: translateY(-22px) rotateX(-16deg) rotateZ(3deg) scale(1.02);
    opacity: 0.98;
  }
  60% {
    transform: translateY(-88px) rotateX(-45deg) rotateZ(10deg) scale(0.94);
    opacity: 0.75;
  }
  100% {
    transform: translateY(-165px) rotateX(-75deg) rotateZ(18deg) scale(0.76);
    opacity: 0;
    pointer-events: none;
  }
}

/* Levitación Mágica de Bombones y Golosinas */
@keyframes candyTreatsFloat {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
  }
  30% {
    opacity: 0.9;
    transform: translate(-50%, -68%) scale(1.18);
  }
  100% {
    transform: translate(-50%, -75%) scale(1.28);
    opacity: 1;
    filter: drop-shadow(0 0 20px rgba(254, 240, 138, 0.9)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
  }
}

/* Halo Cálido de Confitería en la Base de la Bombonera */
@keyframes candyGlowPulse {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.25);
  }
  100% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

/* Apertura Mágica y Elevación de Tapa de Cofre Pirata */
@keyframes pirateLidOpenBurst {
  0% {
    transform: translateY(0) rotateX(0deg) scale(1);
    opacity: 1;
  }
  25% {
    transform: translateY(-22px) rotateX(-20deg) rotateZ(-3deg) scale(0.98);
    opacity: 0.95;
  }
  60% {
    transform: translateY(-85px) rotateX(-50deg) rotateZ(-12deg) scale(0.9);
    opacity: 0.75;
  }
  100% {
    transform: translateY(-160px) rotateX(-75deg) rotateZ(-24deg) scale(0.75);
    opacity: 0;
    pointer-events: none;
  }
}

/* Caída y Desenganche de Candado Calavera Azteca */
@keyframes skullLockDrop {
  0% {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
  }
  45% {
    transform: translateX(-50%) translateY(26px) rotate(18deg) scale(0.92);
    opacity: 0.85;
  }
  100% {
    transform: translateX(-50%) translateY(55px) rotate(40deg) scale(0.65);
    opacity: 0;
  }
}

/* Encendido Auténtico de Tubo de Rayos Catódicos (CRT Flash Arcade) */
@keyframes crtBeamExpandAuthentic {
  0% {
    transform: scaleY(0.003) scaleX(0.05);
    opacity: 0;
    background: #ffffff;
    box-shadow: 0 0 25px #ffffff, 0 0 50px #86efac;
  }
  15% {
    transform: scaleY(0.008) scaleX(0.98);
    opacity: 1;
    background: #ffffff;
    box-shadow: 0 0 35px #ffffff, 0 0 60px #22c55e;
  }
  40% {
    transform: scaleY(0.12) scaleX(1);
    opacity: 1;
    background: #86efac;
    box-shadow: 0 0 45px #22c55e, inset 0 0 20px #86efac;
  }
  75% {
    transform: scaleY(1) scaleX(1);
    opacity: 0.9;
    background: rgba(34, 197, 94, 0.15);
  }
  100% {
    transform: scale(1);
    opacity: 0;
    background: transparent;
  }
}

/* Barrido Dinámico de Scanlines CRT */
@keyframes scanlineSweep {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

/* Iluminación Neón Instantánea de Botones Arcade */
@keyframes neonButtonIgnitionA {
  0% {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
    filter: brightness(1);
    transform: translateY(0);
  }
  25% {
    transform: translateY(2px) scale(0.94);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
  50% {
    transform: translateY(0) scale(1.08);
    box-shadow: 0 0 20px #ef4444, 0 0 35px rgba(239, 68, 68, 0.8), inset 0 0 8px #ffffff;
    filter: brightness(1.35);
  }
  100% {
    transform: translateY(0) scale(1.05);
    box-shadow: 0 0 16px #ef4444, 0 0 28px rgba(239, 68, 68, 0.7), inset 0 0 6px #ffffff;
    filter: brightness(1.25);
  }
}

@keyframes neonButtonIgnitionB {
  0% {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
    filter: brightness(1);
    transform: translateY(6px);
  }
  50% {
    transform: translateY(6px) scale(1.08);
    box-shadow: 0 0 20px #ec4899, 0 0 35px rgba(236, 72, 153, 0.8), inset 0 0 8px #ffffff;
    filter: brightness(1.35);
  }
  100% {
    transform: translateY(6px) scale(1.05);
    box-shadow: 0 0 16px #ec4899, 0 0 28px rgba(236, 72, 153, 0.7), inset 0 0 6px #ffffff;
    filter: brightness(1.25);
  }
}

/* Arranque del Pixel Art e Indicador Start */
@keyframes pixelArtBoot {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.25);
    filter: drop-shadow(0 0 16px #22d3ee);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 12px #22d3ee) drop-shadow(-2px 0 2px rgba(239, 68, 68, 0.8)) drop-shadow(2px 0 2px rgba(34, 197, 94, 0.8));
  }
}

@keyframes pressStartBoot {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes consoleBounce {
  0% { transform: scale(1); }
  25% { transform: scale(0.96) translateY(4px); }
  60% { transform: scale(1.04) translateY(-3px); }
  100% { transform: scale(1.02); }
}

/* Inclinación Orgánica de la Llama al Soplar */
@keyframes flameBlowingTilt {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(24deg) scale(0.85, 1.25) translate(3px, -2px);
    filter: brightness(1.45);
  }
  100% {
    transform: rotate(28deg) scale(0.75, 1.3) translate(4px, -3px);
    filter: brightness(1.6);
  }
}

/* ==========================================================================
   ANIMACIONES ULTRA-PREMIUM (CINE, PIRATA Y PASE DELUXE)
   ========================================================================== */

/* 1. Bombillas de Marquesina de Cine Estilo Broadway */
@keyframes bulbChaser {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 6px #fde047) brightness(1.3);
  }
  50% {
    opacity: 0.35;
    filter: drop-shadow(0 0 1px #ca8a04) brightness(0.7);
  }
}

/* 2. Focos Reflectores Cinematográficos en Abanico */
@keyframes spotlightSweepLeft {
  0%, 100% {
    transform: rotate(-35deg) scaleY(1);
    opacity: 0.25;
  }
  50% {
    transform: rotate(-15deg) scaleY(1.15);
    opacity: 0.55;
  }
}

@keyframes spotlightSweepRight {
  0%, 100% {
    transform: rotate(35deg) scaleY(1);
    opacity: 0.25;
  }
  50% {
    transform: rotate(15deg) scaleY(1.15);
    opacity: 0.55;
  }
}

/* 3. Brillo y Destello de Oro 24K Foil */
@keyframes goldFoilShine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* 4. Resplandor Místico de Ojos de Rubí y Joyas Malditas */
@keyframes rubyEyeGlow {
  0%, 100% {
    filter: drop-shadow(0 0 3px #ef4444) brightness(1);
  }
  50% {
    filter: drop-shadow(0 0 12px #dc2626) brightness(1.6);
  }
}

/* 5. Giro Hipnótico de Rayos de Luz de Dios (Cofre Pirata) */
@keyframes godRaysRotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 6. Destello de Flash de Cámara Paparazzi (Claqueta) */
@keyframes cameraStrobe {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0.85;
  }
  30% {
    opacity: 0.2;
  }
  45% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
  }
}

/* 7. Estampado Mecánico Contundente (Vales Canjeables) */
@keyframes stampSlam {
  0% {
    opacity: 0;
    transform: scale(2.6) rotate(-18deg);
  }
  65% {
    opacity: 1;
    transform: scale(0.92) rotate(-9deg);
  }
  85% {
    transform: scale(1.05) rotate(-11deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(-10deg);
  }
}

/* 8. Giro Continuo de Engranajes de Cinta de Cassette */
@keyframes spinCassetteSpool {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 9. Baile Dinámico de Barras de Ecualizador de Audio */
@keyframes equalizerDance1 {
  0%, 100% { height: 18%; }
  50% { height: 88%; }
}
@keyframes equalizerDance2 {
  0%, 100% { height: 65%; }
  50% { height: 22%; }
}
@keyframes equalizerDance3 {
  0%, 100% { height: 35%; }
  50% { height: 100%; }
}
@keyframes equalizerDance4 {
  0%, 100% { height: 85%; }
  50% { height: 30%; }
}
@keyframes equalizerDance5 {
  0%, 100% { height: 40%; }
  50% { height: 75%; }
}

/* 10. Shimmer y Tintineo de Doblones de Oro */
@keyframes coinShimmer {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  }
  50% {
    transform: scale(1.08) rotate(3deg);
    filter: drop-shadow(0 4px 10px rgba(250, 204, 21, 0.7));
  }
}

/* ==========================================================================
   ANIMACIONES DE ESCENARIOS DE FONDO INMERSIVOS (7 MUNDOS)
   ========================================================================== */
@keyframes floralBreezePulse {
  0% { transform: scale(1) translateY(0); opacity: 0.75; }
  100% { transform: scale(1.08) translateY(-10px); opacity: 1; }
}

@keyframes floralSunbeams {
  0% { transform: scale(1.02) rotate(0deg); opacity: 0.6; }
  100% { transform: scale(1.12) rotate(3deg); opacity: 0.95; }
}

@keyframes cosmicNebulaFloat {
  0% {
    transform: scale(1.05) rotate(0deg) translate(0, 0);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.14) rotate(4deg) translate(18px, -12px);
    opacity: 1;
  }
  100% {
    transform: scale(1.08) rotate(-4deg) translate(-14px, 16px);
    opacity: 0.88;
  }
}

@keyframes cosmicStarsTwinkle {
  0% { opacity: 0.45; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1.02); }
}

@keyframes vintageLampFlicker {
  0% { opacity: 0.82; transform: scale(1); }
  25% { opacity: 0.95; transform: scale(1.02); }
  50% { opacity: 0.78; transform: scale(0.99); }
  75% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0.85; transform: scale(1.01); }
}

@keyframes cinemaSpotlightsSweep {
  0% {
    transform: rotate(-7deg) scale(1.04);
    opacity: 0.75;
  }
  50% {
    transform: rotate(2deg) scale(1.08);
    opacity: 0.95;
  }
  100% {
    transform: rotate(8deg) scale(1.05);
    opacity: 0.8;
  }
}

@keyframes cinemaPaparazziFlash {
  0%, 92%, 100% { opacity: 0.3; }
  94% { opacity: 0.95; filter: drop-shadow(0 0 10px #ffffff); }
  96% { opacity: 0.4; }
  98% { opacity: 1; filter: drop-shadow(0 0 15px #fde047); }
}

@keyframes pirateSeaSway {
  0% { transform: translateY(0) scaleY(1); opacity: 0.75; }
  100% { transform: translateY(-8px) scaleY(1.06); opacity: 0.95; }
}

@keyframes pirateBioluminescence {
  0% { opacity: 0.4; filter: blur(0px); }
  100% { opacity: 0.9; filter: blur(1px); }
}

@keyframes candySweetBreathe {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.06); opacity: 1; }
}

@keyframes synthwaveGridMove {
  0% { background-position: 0 0; }
  100% { background-position: 0 40px; }
}

@keyframes fadeInDown {
  0% { opacity: 0; transform: translateY(-16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes modalScaleIn {
  0% { opacity: 0; transform: scale(0.88); }
  100% { opacity: 1; transform: scale(1); }
}

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

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
}

@keyframes spinSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}