/* ═══════════════════════════════════════════════════════════════════════════
   04-ANIMATIONS.CSS
   Mystery Temple - Galaxy Edition
   
   All @keyframes animations in one organized file.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  LOADING ANIMATIONS                                                       ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes loadingFloat {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
    }
    50% { 
        transform: translateY(-20px) rotate(10deg); 
    }
}

@keyframes loadingShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes loadingStars {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50px); }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  ICON ANIMATIONS                                                          ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

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

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.25); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
}

@keyframes skullShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  HEART & LIFE ANIMATIONS                                                  ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes heartLost {
    0% { 
        transform: scale(1.3); 
        opacity: 1; 
    }
    50% { 
        transform: scale(0.5) rotate(20deg); 
    }
    100% { 
        transform: scale(0.8); 
        opacity: 0.5; 
    }
}

@keyframes heartPump {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.2); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  LETTER/RUNE ANIMATIONS                                                   ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes letterPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(170, 102, 255, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 25px rgba(170, 102, 255, 0.9);
        transform: scale(1.05);
    }
}

@keyframes runeGlow {
    0%, 100% { 
        box-shadow: 0 0 15px rgba(170, 102, 255, 0.5); 
    }
    50% { 
        box-shadow: 0 0 25px rgba(170, 102, 255, 0.9); 
    }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  COUNTDOWN ANIMATIONS                                                     ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes countdownPop {
    0% { 
        transform: scale(3); 
        opacity: 0; 
    }
    30% { 
        transform: scale(0.7); 
        opacity: 1; 
    }
    50% { 
        transform: scale(1.2); 
    }
    100% { 
        transform: scale(1); 
        opacity: 1; 
    }
}

@keyframes countPop {
    0% { 
        transform: scale(3); 
        opacity: 0; 
    }
    30% { 
        transform: scale(0.7); 
        opacity: 1; 
    }
    50% { 
        transform: scale(1.2); 
    }
    100% { 
        transform: scale(1); 
        opacity: 1; 
    }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  STORY & CHASE ANIMATIONS                                                 ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes storyPulse {
    0%, 100% { 
        box-shadow: 0 0 40px rgba(0, 255, 136, 0.5); 
    }
    50% { 
        box-shadow: 0 0 60px rgba(0, 255, 136, 0.9); 
    }
}

@keyframes chaseShine {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  OVERLAY & MODAL ANIMATIONS                                               ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

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

@keyframes alertAppear {
    0% { 
        transform: scale(0) rotate(-8deg); 
        opacity: 0; 
    }
    100% { 
        transform: scale(1) rotate(0deg); 
        opacity: 1; 
    }
}

@keyframes mysteryFloat {
    0%, 100% { 
        transform: translateY(0) scale(1); 
    }
    50% { 
        transform: translateY(-18px) scale(1.1); 
    }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  BOOST ANIMATIONS                                                         ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes boostActive {
    0% { 
        box-shadow: 0 0 5px rgba(170, 102, 255, 0.3); 
    }
    100% { 
        box-shadow: 0 0 15px rgba(170, 102, 255, 0.6); 
    }
}

@keyframes boostPopupShow {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-10deg);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2) rotate(5deg);
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes boostPopupHide {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0) translateY(-50px);
        opacity: 0;
    }
}

@keyframes boostIconPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.2); }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  REVIVAL ANIMATIONS                                                       ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes revivalFlash {
    0% { 
        background: rgba(255, 0, 0, 0.9); 
    }
    100% { 
        background: radial-gradient(circle, rgba(100, 0, 0, 0.8), rgba(50, 0, 0, 0.95)); 
    }
}

@keyframes revivalShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-20px); }
    40% { transform: translateX(20px); }
    60% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
}

@keyframes revivalHeartBreak {
    0% { transform: scale(1); }
    30% { transform: scale(1.5); }
    50% { transform: scale(0.8) rotate(10deg); }
    70% { transform: scale(1.2) rotate(-5deg); }
    100% { transform: scale(1) rotate(0); }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  SHAKE ANIMATION                                                          ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-12px); }
    75% { transform: translateX(12px); }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  GESTURE ANIMATIONS                                                       ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes gestureFloat {
    0%, 100% { 
        transform: translateY(0) rotate(-5deg); 
    }
    50% { 
        transform: translateY(-8px) rotate(5deg); 
    }
}

@keyframes targetPulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.3; 
    }
    50% { 
        transform: scale(1.1); 
        opacity: 0.55; 
    }
}

@keyframes dotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes btnPulse {
    0%, 100% { 
        box-shadow: 0 0 15px rgba(0, 255, 136, 0.4); 
    }
    50% { 
        box-shadow: 0 0 30px rgba(0, 255, 136, 0.7); 
    }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  POPUP & SPARKLE ANIMATIONS                                               ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes gemPopup {
    0% { 
        transform: translateY(0) scale(0.3); 
        opacity: 1; 
    }
    30% { 
        transform: translateY(-30px) scale(1.5); 
        opacity: 1; 
    }
    60% { 
        transform: translateY(-60px) scale(1.2); 
        opacity: 1; 
    }
    100% { 
        transform: translateY(-120px) scale(0.5); 
        opacity: 0; 
    }
}

@keyframes sparkleBurst {
    0% { 
        transform: translate(0, 0) scale(1); 
        opacity: 1; 
    }
    100% { 
        transform: translate(var(--tx), var(--ty)) scale(0); 
        opacity: 0; 
    }
}

@keyframes particleFly {
    0% { 
        transform: translate(0, 0) scale(1); 
        opacity: 1; 
    }
    100% { 
        transform: translate(var(--tx), var(--ty)) scale(0); 
        opacity: 0; 
    }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  HACKING/TERMINAL ANIMATIONS                                              ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes scanLine {
    0% { left: -50%; }
    100% { left: 100%; }
}

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

@keyframes matrixFall {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(200vh); }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  CIPHER ANIMATIONS                                                        ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes cipherIconFloat {
    0%, 100% { 
        transform: translateY(0) scale(1); 
    }
    50% { 
        transform: translateY(-12px) scale(1.1); 
    }
}

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

@keyframes statusPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

@keyframes ecgMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes ecgMirrorMove {
    0% { transform: translateX(-50%) scaleX(-1); }
    100% { transform: translateX(0) scaleX(-1); }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  WIFI SIGNAL ANIMATIONS                                                   ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes wifiWave {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes signalPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scaleY(0.5);
    }
    50% {
        opacity: 1;
        transform: scaleY(1);
    }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  MORSE CODE ANIMATIONS                                                    ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes morseBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes morseSlideIn {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  INFINITY LOOP ANIMATIONS                                                 ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes infinityDraw {
    0% { 
        stroke-dashoffset: 700; 
    }
    100% { 
        stroke-dashoffset: 0; 
    }
}

@keyframes infinityPulse {
    0%, 100% { 
        filter: drop-shadow(0 0 10px rgba(255, 180, 0, 0.55)); 
        opacity: 0.9; 
    }
    50% { 
        filter: drop-shadow(0 0 22px rgba(255, 220, 120, 0.95)); 
        opacity: 1; 
    }
}

@keyframes infinityTrace {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -300; }
}

@keyframes infinityGlowRotate {
    0% { 
        transform: rotate(0deg); 
        opacity: 0.8; 
    }
    50% { 
        opacity: 1; 
    }
    100% { 
        transform: rotate(360deg); 
        opacity: 0.8; 
    }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  TEMPLE WALL ANIMATIONS                                                   ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes wallLineIn {
    0% { 
        opacity: 0; 
        transform: translateY(12px); 
        filter: blur(4px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
        filter: blur(0); 
    }
}

@keyframes templeZoomIn {
    0% {
        transform: scale(1.2);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pillarGlow {
    0%, 100% {
        box-shadow: inset 0 0 30px rgba(255, 200, 100, 0.1);
    }
    50% {
        box-shadow: inset 0 0 50px rgba(255, 200, 100, 0.3);
    }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  GLITCH ANIMATIONS                                                        ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes glitchText {
    0%, 100% {
        text-shadow: 
            -2px 0 #ff0000,
            2px 0 #00ffff;
        transform: translateX(0);
    }
    25% {
        text-shadow: 
            2px 0 #ff0000,
            -2px 0 #00ffff;
        transform: translateX(-2px);
    }
    50% {
        text-shadow: 
            -2px 0 #00ffff,
            2px 0 #ff0000;
        transform: translateX(2px);
    }
    75% {
        text-shadow: 
            2px 0 #00ffff,
            -2px 0 #ff0000;
        transform: translateX(-1px);
    }
}

@keyframes glitchSlice {
    0%, 100% {
        clip-path: inset(0 0 0 0);
    }
    25% {
        clip-path: inset(20% 0 60% 0);
    }
    50% {
        clip-path: inset(40% 0 20% 0);
    }
    75% {
        clip-path: inset(60% 0 10% 0);
    }
}

@keyframes screenTear {
    0%, 100% {
        transform: translateX(0) scaleX(1);
        opacity: 0;
    }
    10% {
        transform: translateX(-5px) scaleX(1.02);
        opacity: 0.8;
    }
    20% {
        transform: translateX(5px) scaleX(0.98);
        opacity: 0.6;
    }
    30% {
        opacity: 0;
    }
}

@keyframes fragmentFly {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0);
        opacity: 0;
    }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  CREDITS ANIMATIONS                                                       ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes creditsScroll {
    0% { transform: translateY(100%); }
    100% { transform: translateY(-100%); }
}

@keyframes creditsFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes creditsGlitch {
    0%, 90%, 100% {
        transform: translateX(0);
        filter: none;
    }
    92% {
        transform: translateX(-5px);
        filter: hue-rotate(90deg);
    }
    94% {
        transform: translateX(5px);
        filter: hue-rotate(-90deg);
    }
    96% {
        transform: translateX(-3px);
        filter: saturate(2);
    }
    98% {
        transform: translateX(3px);
        filter: brightness(1.5);
    }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  FADE ANIMATIONS                                                          ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

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

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  GLOW ANIMATIONS                                                          ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 20px var(--glow-color, rgba(0, 255, 136, 0.5));
    }
    50% {
        box-shadow: 0 0 40px var(--glow-color, rgba(0, 255, 136, 0.8));
    }
}

@keyframes glowMove {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

@keyframes neonFlicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.8; }
    94% { opacity: 1; }
    96% { opacity: 0.9; }
    97% { opacity: 1; }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  GALAXY/SPACE ANIMATIONS                                                  ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes galaxyDrift {
    0% { 
        transform: translateY(0) rotate(0deg); 
    }
    100% { 
        transform: translateY(-100px) rotate(1deg); 
    }
}

@keyframes shootingStar {
    0% {
        transform: translateX(0) translateY(0) rotate(-45deg);
        opacity: 1;
    }
    100% {
        transform: translateX(300px) translateY(300px) rotate(-45deg);
        opacity: 0;
    }
}

@keyframes floatMagic {
    0% {
        transform: translateY(100vh) translateX(0) scale(0);
        opacity: 0;
    }
    10% { opacity: 0.9; }
    90% { opacity: 0.9; }
    100% {
        transform: translateY(-100vh) translateX(var(--tx, 0)) scale(1);
        opacity: 0;
    }
}

@keyframes nebulaFlow {
    0% {
        transform: translateX(0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateX(50px) scale(1.1);
        opacity: 0.5;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 0.3;
    }
}

@keyframes starTwinkle {
    0%, 100% { 
        opacity: 0.3; 
        transform: scale(0.8); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2); 
    }
}


/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  TELEGRAM ANIMATIONS                                                      ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

@keyframes telegramPulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.85; 
    }
    50% { 
        transform: scale(1.12); 
        opacity: 1; 
    }
}

@keyframes sendingDots {
    0%, 80%, 100% { 
        transform: scale(0); 
    }
    40% { 
        transform: scale(1); 
    }
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}