/*
 * DabFlow Theme-Specific Timer Animations
 * Each theme has unique heat/cool animations that match its color palette
 */

/* ==================================
   TIMER ANIMATION BASE STRUCTURE
   ================================== */

/* Timer circle container */
.timer-circle {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-8) auto;
    transition: all var(--transition-base);
}

/* Timer inner content */
.timer-content {
    z-index: 2;
    text-align: center;
}

/* ==================================
   NEON CYBER THEME
   ================================== */
[data-theme="neon-cyber"] .timer-circle.heating {
    background: radial-gradient(circle, rgba(0, 245, 255, 0.2), transparent 70%);
    box-shadow:
        0 0 40px rgba(0, 245, 255, 0.6),
        inset 0 0 40px rgba(0, 245, 255, 0.3),
        0 0 80px rgba(0, 245, 255, 0.4);
    animation: cyberPulse 2s ease-in-out infinite;
}

[data-theme="neon-cyber"] .timer-circle.cooling {
    background: radial-gradient(circle, rgba(176, 38, 255, 0.2), transparent 70%);
    box-shadow:
        0 0 40px rgba(176, 38, 255, 0.6),
        inset 0 0 40px rgba(176, 38, 255, 0.3);
    animation: cyberBreath 3s ease-in-out infinite;
}

@keyframes cyberPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(0, 245, 255, 0.6), inset 0 0 40px rgba(0, 245, 255, 0.3); }
    50% { transform: scale(1.05); box-shadow: 0 0 60px rgba(0, 245, 255, 0.8), inset 0 0 60px rgba(0, 245, 255, 0.4); }
}

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

/* ==================================
   LAVA FLOW THEME
   ================================== */
[data-theme="lava-flow"] .timer-circle.heating {
    background: radial-gradient(circle, rgba(255, 69, 0, 0.3), rgba(255, 140, 0, 0.1));
    box-shadow:
        0 0 50px rgba(255, 69, 0, 0.8),
        inset 0 0 40px rgba(255, 140, 0, 0.5);
    animation: lavaErupt 1.5s ease-in-out infinite;
}

[data-theme="lava-flow"] .timer-circle.cooling {
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2), transparent);
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.6),
        inset 0 0 30px rgba(255, 140, 0, 0.3);
    animation: lavaHarden 2.5s ease-in-out infinite;
}

@keyframes lavaErupt {
    0%, 100% {
        box-shadow: 0 0 50px rgba(255, 69, 0, 0.8), inset 0 0 40px rgba(255, 140, 0, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 80px rgba(255, 69, 0, 1), inset 0 0 60px rgba(255, 69, 0, 0.7);
        transform: scale(1.08);
    }
}

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

/* ==================================
   ICE CRYSTAL THEME
   ================================== */
[data-theme="ice-crystal"] .timer-circle.heating {
    background: radial-gradient(circle, rgba(102, 187, 255, 0.2), transparent);
    box-shadow:
        0 0 40px rgba(102, 187, 255, 0.7),
        inset 0 0 30px rgba(102, 187, 255, 0.4);
    animation: iceMelt 2s ease-in-out infinite;
}

[data-theme="ice-crystal"] .timer-circle.cooling {
    background: radial-gradient(circle, rgba(0, 170, 255, 0.3), rgba(102, 187, 255, 0.1));
    box-shadow:
        0 0 60px rgba(0, 170, 255, 0.8),
        inset 0 0 40px rgba(102, 187, 255, 0.5);
    animation: iceFreeze 2.5s ease-in-out infinite;
}

@keyframes iceMelt {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(5deg) scale(1.03); }
}

@keyframes iceFreeze {
    0%, 100% {
        box-shadow: 0 0 60px rgba(0, 170, 255, 0.8), inset 0 0 40px rgba(102, 187, 255, 0.5);
    }
    25%, 75% {
        box-shadow: 0 0 80px rgba(0, 170, 255, 1), inset 0 0 50px rgba(102, 187, 255, 0.7);
    }
}

/* ==================================
   EMERALD GREEN THEME
   ================================== */
[data-theme="emerald-green"] .timer-circle.heating {
    background: radial-gradient(circle, rgba(0, 230, 118, 0.3), transparent);
    box-shadow: 0 0 45px rgba(0, 230, 118, 0.7), inset 0 0 35px rgba(0, 230, 118, 0.4);
    animation: emeraldGlow 2s ease-in-out infinite;
}

[data-theme="emerald-green"] .timer-circle.cooling {
    background: radial-gradient(circle, rgba(0, 191, 165, 0.25), transparent);
    box-shadow: 0 0 40px rgba(0, 191, 165, 0.6), inset 0 0 30px rgba(0, 191, 165, 0.3);
    animation: emeraldPulse 3s ease-in-out infinite;
}

@keyframes emeraldGlow {
    0%, 100% { box-shadow: 0 0 45px rgba(0, 230, 118, 0.7), inset 0 0 35px rgba(0, 230, 118, 0.4); }
    50% { box-shadow: 0 0 65px rgba(0, 230, 118, 0.9), inset 0 0 50px rgba(0, 230, 118, 0.6); }
}

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

/* ==================================
   AURORA BOREALIS THEME
   ================================== */
[data-theme="aurora-borealis"] .timer-circle.heating {
    background: radial-gradient(circle, rgba(0, 255, 179, 0.3), rgba(123, 47, 247, 0.2));
    box-shadow:
        0 0 50px rgba(0, 255, 179, 0.8),
        0 0 80px rgba(123, 47, 247, 0.5),
        inset 0 0 40px rgba(255, 0, 107, 0.3);
    animation: auroraWave 3s ease-in-out infinite;
}

[data-theme="aurora-borealis"] .timer-circle.cooling {
    background: radial-gradient(circle, rgba(123, 47, 247, 0.3), rgba(0, 255, 179, 0.1));
    box-shadow:
        0 0 60px rgba(123, 47, 247, 0.8),
        0 0 40px rgba(0, 255, 179, 0.5);
    animation: auroraDance 4s ease-in-out infinite;
}

@keyframes auroraWave {
    0%, 100% { transform: scale(1) rotate(0deg); }
    33% { transform: scale(1.05) rotate(2deg); }
    66% { transform: scale(0.98) rotate(-2deg); }
}

@keyframes auroraDance {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(20deg); }
}

/* ==================================
   GOLDEN AMBER THEME
   ================================== */
[data-theme="golden-amber"] .timer-circle.heating {
    background: radial-gradient(circle, rgba(255, 193, 7, 0.3), rgba(255, 152, 0, 0.2));
    box-shadow:
        0 0 50px rgba(255, 193, 7, 0.8),
        inset 0 0 40px rgba(255, 152, 0, 0.5);
    animation: goldenShine 2s ease-in-out infinite;
}

[data-theme="golden-amber"] .timer-circle.cooling {
    background: radial-gradient(circle, rgba(255, 213, 79, 0.25), transparent);
    box-shadow:
        0 0 40px rgba(255, 213, 79, 0.7),
        inset 0 0 30px rgba(255, 193, 7, 0.4);
    animation: goldenFade 3s ease-in-out infinite;
}

@keyframes goldenShine {
    0%, 100% {
        box-shadow: 0 0 50px rgba(255, 193, 7, 0.8), inset 0 0 40px rgba(255, 152, 0, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 70px rgba(255, 193, 7, 1), inset 0 0 55px rgba(255, 152, 0, 0.7);
        transform: scale(1.06);
    }
}

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

/* ==================================
   CRIMSON RED THEME
   ================================== */
[data-theme="crimson-red"] .timer-circle.heating {
    background: radial-gradient(circle, rgba(244, 67, 54, 0.35), rgba(233, 30, 99, 0.2));
    box-shadow:
        0 0 55px rgba(244, 67, 54, 0.9),
        inset 0 0 45px rgba(233, 30, 99, 0.5);
    animation: crimsonBurn 1.8s ease-in-out infinite;
}

[data-theme="crimson-red"] .timer-circle.cooling {
    background: radial-gradient(circle, rgba(255, 82, 82, 0.25), transparent);
    box-shadow:
        0 0 40px rgba(255, 82, 82, 0.7),
        inset 0 0 30px rgba(244, 67, 54, 0.4);
    animation: crimsonCool 2.5s ease-in-out infinite;
}

@keyframes crimsonBurn {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.07); opacity: 0.95; }
}

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

/* ==================================
   SAPPHIRE BLUE THEME
   ================================== */
[data-theme="sapphire-blue"] .timer-circle.heating {
    background: radial-gradient(circle, rgba(33, 150, 243, 0.3), rgba(0, 188, 212, 0.2));
    box-shadow:
        0 0 50px rgba(33, 150, 243, 0.8),
        inset 0 0 40px rgba(0, 188, 212, 0.4);
    animation: sapphireSparkle 2.2s ease-in-out infinite;
}

[data-theme="sapphire-blue"] .timer-circle.cooling {
    background: radial-gradient(circle, rgba(130, 177, 255, 0.25), transparent);
    box-shadow:
        0 0 45px rgba(130, 177, 255, 0.7),
        inset 0 0 35px rgba(33, 150, 243, 0.4);
    animation: sapphireCalm 3s ease-in-out infinite;
}

@keyframes sapphireSparkle {
    0%, 100% {
        box-shadow: 0 0 50px rgba(33, 150, 243, 0.8), inset 0 0 40px rgba(0, 188, 212, 0.4);
    }
    25%, 75% {
        box-shadow: 0 0 70px rgba(33, 150, 243, 1), inset 0 0 55px rgba(0, 188, 212, 0.6);
    }
}

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

/* ==================================
   OCEAN TEAL THEME
   ================================== */
[data-theme="ocean-teal"] .timer-circle.heating {
    background: radial-gradient(circle, rgba(0, 150, 136, 0.3), rgba(38, 166, 154, 0.2));
    box-shadow:
        0 0 50px rgba(0, 150, 136, 0.8),
        inset 0 0 40px rgba(38, 166, 154, 0.4);
    animation: oceanWave 2.5s ease-in-out infinite;
}

[data-theme="ocean-teal"] .timer-circle.cooling {
    background: radial-gradient(circle, rgba(100, 255, 218, 0.25), transparent);
    box-shadow:
        0 0 45px rgba(100, 255, 218, 0.7),
        inset 0 0 35px rgba(0, 150, 136, 0.3);
    animation: oceanRipple 3.5s ease-in-out infinite;
}

@keyframes oceanWave {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.04) translateY(-3px); }
}

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

/* ==================================
   SUNSET ORANGE THEME
   ================================== */
[data-theme="sunset-orange"] .timer-circle.heating {
    background: radial-gradient(circle, rgba(255, 152, 0, 0.35), rgba(255, 87, 34, 0.25));
    box-shadow:
        0 0 55px rgba(255, 152, 0, 0.9),
        inset 0 0 45px rgba(255, 87, 34, 0.5);
    animation: sunsetGlow 2s ease-in-out infinite;
}

[data-theme="sunset-orange"] .timer-circle.cooling {
    background: radial-gradient(circle, rgba(255, 171, 64, 0.25), transparent);
    box-shadow:
        0 0 40px rgba(255, 171, 64, 0.7),
        inset 0 0 30px rgba(255, 152, 0, 0.4);
    animation: sunsetFade 3s ease-in-out infinite;
}

@keyframes sunsetGlow {
    0%, 100% {
        box-shadow: 0 0 55px rgba(255, 152, 0, 0.9), inset 0 0 45px rgba(255, 87, 34, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 75px rgba(255, 152, 0, 1), inset 0 0 60px rgba(255, 87, 34, 0.7);
        transform: scale(1.06);
    }
}

@keyframes sunsetFade {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.9; filter: brightness(0.95); }
}

/* ==================================
   AMETHYST PURPLE THEME
   ================================== */
[data-theme="amethyst-purple"] .timer-circle.heating {
    background: radial-gradient(circle, rgba(156, 39, 176, 0.3), rgba(124, 77, 255, 0.2));
    box-shadow:
        0 0 50px rgba(156, 39, 176, 0.8),
        inset 0 0 40px rgba(124, 77, 255, 0.4);
    animation: amethystPulse 2.3s ease-in-out infinite;
}

[data-theme="amethyst-purple"] .timer-circle.cooling {
    background: radial-gradient(circle, rgba(224, 64, 251, 0.25), transparent);
    box-shadow:
        0 0 45px rgba(224, 64, 251, 0.7),
        inset 0 0 35px rgba(156, 39, 176, 0.4);
    animation: amethystBreath 3.2s ease-in-out infinite;
}

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

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

/* ==================================
   BUBBLEGUM PINK THEME
   ================================== */
[data-theme="bubblegum-pink"] .timer-circle.heating {
    background: radial-gradient(circle, rgba(233, 30, 99, 0.3), rgba(240, 98, 146, 0.2));
    box-shadow:
        0 0 50px rgba(233, 30, 99, 0.8),
        inset 0 0 40px rgba(240, 98, 146, 0.4);
    animation: bubblegumPop 1.8s ease-in-out infinite;
}

[data-theme="bubblegum-pink"] .timer-circle.cooling {
    background: radial-gradient(circle, rgba(255, 128, 171, 0.25), transparent);
    box-shadow:
        0 0 40px rgba(255, 128, 171, 0.7),
        inset 0 0 30px rgba(233, 30, 99, 0.3);
    animation: bubblegumFloat 3s ease-in-out infinite;
}

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

@keyframes bubblegumFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.02); }
}

/* ==================================
   STONER PARADISE THEME (Premium)
   ================================== */
[data-theme="stoner-paradise"] .timer-circle.heating {
    background: radial-gradient(circle, rgba(46, 125, 50, 0.35), rgba(139, 195, 74, 0.25));
    box-shadow:
        0 0 60px rgba(46, 125, 50, 0.9),
        0 0 90px rgba(139, 195, 74, 0.6),
        inset 0 0 50px rgba(76, 175, 80, 0.5);
    animation: paradiseGrow 2.5s ease-in-out infinite;
}

[data-theme="stoner-paradise"] .timer-circle.cooling {
    background: radial-gradient(circle, rgba(139, 195, 74, 0.3), rgba(46, 125, 50, 0.1));
    box-shadow:
        0 0 50px rgba(139, 195, 74, 0.8),
        inset 0 0 40px rgba(46, 125, 50, 0.4);
    animation: paradiseChill 4s ease-in-out infinite;
}

@keyframes paradiseGrow {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        box-shadow: 0 0 60px rgba(46, 125, 50, 0.9), 0 0 90px rgba(139, 195, 74, 0.6);
    }
    50% {
        transform: scale(1.07) rotate(5deg);
        box-shadow: 0 0 80px rgba(46, 125, 50, 1), 0 0 110px rgba(139, 195, 74, 0.8);
    }
}

@keyframes paradiseChill {
    0%, 100% { opacity: 1; filter: hue-rotate(0deg); }
    50% { opacity: 0.9; filter: hue-rotate(10deg); }
}

/* ==================================
   CHEECH AND CHONG THEME (Ultimate Premium)
   ================================== */
[data-theme="cheech-and-chong"] .timer-circle.heating {
    background: radial-gradient(
        circle,
        rgba(255, 193, 7, 0.4),
        rgba(255, 87, 34, 0.3),
        rgba(244, 67, 54, 0.2)
    );
    box-shadow:
        0 0 70px rgba(255, 193, 7, 1),
        0 0 100px rgba(255, 87, 34, 0.8),
        0 0 130px rgba(244, 67, 54, 0.6),
        inset 0 0 60px rgba(255, 152, 0, 0.6);
    animation: cheechBurn 1.5s ease-in-out infinite, chongSpin 8s linear infinite;
}

[data-theme="cheech-and-chong"] .timer-circle.cooling {
    background: radial-gradient(
        circle,
        rgba(156, 39, 176, 0.3),
        rgba(103, 58, 183, 0.2),
        rgba(63, 81, 181, 0.1)
    );
    box-shadow:
        0 0 60px rgba(156, 39, 176, 0.9),
        0 0 90px rgba(103, 58, 183, 0.7),
        inset 0 0 50px rgba(63, 81, 181, 0.4);
    animation: chongCool 3s ease-in-out infinite, chongFloat 6s ease-in-out infinite;
}

@keyframes cheechBurn {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 70px rgba(255, 193, 7, 1), 0 0 100px rgba(255, 87, 34, 0.8);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 90px rgba(255, 193, 7, 1), 0 0 130px rgba(255, 87, 34, 1);
    }
}

@keyframes chongSpin {
    from { filter: hue-rotate(0deg); }
    to { filter: hue-rotate(360deg); }
}

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

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

/* ==================================
   RESPONSIVE ANIMATIONS
   ================================== */

/* Reduce animation intensity on mobile */
@media (max-width: 768px) {
    .timer-circle {
        width: 240px;
        height: 240px;
    }

    .timer-circle.heating,
    .timer-circle.cooling {
        animation-duration: calc(1.5 * var(--original-duration, 2s));
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .timer-circle.heating,
    .timer-circle.cooling {
        animation: none !important;
        transition: opacity 0.3s ease;
    }

    .timer-circle.heating {
        opacity: 1;
    }

    .timer-circle.cooling {
        opacity: 0.9;
    }
}

/* ==================================
   COMPLETION SMOKE ANIMATIONS
   ================================== */

/* Smoke haze effect - hotbox your phone */
@keyframes smokeIn {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    50% {
        opacity: 1;
        backdrop-filter: blur(5px);
    }
    100% {
        opacity: 1;
        backdrop-filter: blur(3px);
    }
}

/* Rainbow gradient shift for "Enjoy" text */
@keyframes rainbowShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Text fade in with deblur effect */
@keyframes textFadeIn {
    0% {
        opacity: 0;
        filter: blur(20px);
        transform: scale(0.8);
    }
    60% {
        opacity: 1;
        filter: blur(2px);
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
        transform: scale(1);
    }
}