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

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

@keyframes scaleUp {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

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

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

/* Pulsing glow when timer is active */
@keyframes timerPulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.35); }
    70%  { box-shadow: 0 0 0 18px rgba(0, 212, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); }
}

@keyframes timerPulseShort {
    0%   { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.35); }
    70%  { box-shadow: 0 0 0 18px rgba(168, 85, 247, 0); }
    100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
}

@keyframes timerPulseLong {
    0%   { box-shadow: 0 0 0 0 rgba(34, 211, 160, 0.35); }
    70%  { box-shadow: 0 0 0 18px rgba(34, 211, 160, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 211, 160, 0); }
}

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

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

/* Applied dynamically via JS */
.is-running[data-mode="focus"] .btn-control-lg {
    animation: timerPulse 2.5s ease-in-out infinite;
}

.is-running[data-mode="short"] .btn-control-lg {
    animation: timerPulseShort 2.5s ease-in-out infinite;
}

.is-running[data-mode="long"] .btn-control-lg {
    animation: timerPulseLong 2.5s ease-in-out infinite;
}