/* ====== Timer Global Animation Framework ======
 * Precision-focused animations for time tracking excellence
 * Author: AtivoLabs
 * Version: 1.0.0
 */

/* === ROOT VARIABLES === */
:root {
    /* Animation Timings - Precision-based */
    --timer-fast: 0.15s;
    --timer-normal: 0.3s;
    --timer-slow: 0.5s;
    --timer-precise: 0.8s;
    /* Easing Functions - Professional & Smooth */
    --timer-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --timer-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --timer-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --timer-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --timer-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --timer-precision: cubic-bezier(0.645, 0.045, 0.355, 1);
    /* Transform Values */
    --timer-scale-hover: 1.05;
    --timer-scale-active: 0.95;
    --timer-translate-hover: -8px;
    --timer-blur-backdrop: 20px;
    /* Timer-specific Values */
    --timer-rotation-360: 360deg;
    --timer-rotation-180: 180deg;
    --timer-pulse-scale: 1.1;
}

/* === BASE ANIMATION CLASSES === */

/* Fade Animations */
@keyframes timerFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes timerFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes timerFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes timerFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes timerFadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes timerFadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale Animations */
@keyframes timerScaleIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes timerScaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.5);
    }
}

@keyframes timerBounceIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide Animations */
@keyframes timerSlideInUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes timerSlideInDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes timerSlideOutUp {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
    }
}

@keyframes timerSlideOutDown {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100%);
    }
}

@keyframes timerSlideInLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes timerSlideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

/* Rotation Animations */
@keyframes timerRotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }

    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

@keyframes timerRotate360 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes timerClockwise {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

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

/* Timer-Specific Animations */
@keyframes timerProgress {
    from {
        stroke-dashoffset: 251.2;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes timerTick {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

@keyframes timerCountdown {
    0% {
        transform: scale(1);
        color: var(--timer-primary);
    }

    25% {
        transform: scale(1.1);
        color: var(--timer-teal);
    }

    50% {
        transform: scale(1.2);
        color: var(--timer-orange);
    }

    75% {
        transform: scale(1.1);
        color: var(--timer-warning);
    }

    100% {
        transform: scale(1);
        color: var(--timer-error);
    }
}

@keyframes timerHandSweep {
    0% {
        transform: rotate(0deg);
    }

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

/* Special Effects */
@keyframes timerShake {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

@keyframes timerPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(157, 62, 245, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(157, 62, 245, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(157, 62, 245, 0);
    }
}

@keyframes timerGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(157, 62, 245, 0.3);
    }

    50% {
        box-shadow: 0 0 25px rgba(157, 62, 245, 0.8);
    }
}

@keyframes timerWave {
    0%, 100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(20deg);
    }

    75% {
        transform: rotate(-20deg);
    }
}

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

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* Loading Animations */
@keyframes timerSpinner {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes timerDotsLoading {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes timerBarsLoading {
    0%, 40%, 100% {
        transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1);
    }
}

@keyframes timerProgressBar {
    0% {
        width: 0%;
        background-position: 0 0;
    }

    100% {
        width: 100%;
        background-position: 40px 0;
    }
}

/* === ANIMATION UTILITY CLASSES === */

/* Quick Animations */
.timer-fade-in {
    animation: timerFadeIn var(--timer-normal) var(--timer-ease) forwards;
}

.timer-fade-out {
    animation: timerFadeOut var(--timer-normal) var(--timer-ease) forwards;
}

.timer-fade-in-up {
    animation: timerFadeInUp var(--timer-normal) var(--timer-ease) forwards;
}

.timer-fade-in-down {
    animation: timerFadeInDown var(--timer-normal) var(--timer-ease) forwards;
}

.timer-fade-in-left {
    animation: timerFadeInLeft var(--timer-normal) var(--timer-ease) forwards;
}

.timer-fade-in-right {
    animation: timerFadeInRight var(--timer-normal) var(--timer-ease) forwards;
}

.timer-scale-in {
    animation: timerScaleIn var(--timer-normal) var(--timer-bounce) forwards;
}

.timer-scale-out {
    animation: timerScaleOut var(--timer-normal) var(--timer-ease) forwards;
}

.timer-bounce-in {
    animation: timerBounceIn var(--timer-slow) var(--timer-bounce) forwards;
}

.timer-slide-in-up {
    animation: timerSlideInUp var(--timer-normal) var(--timer-ease-out) forwards;
}

.timer-slide-in-down {
    animation: timerSlideInDown var(--timer-normal) var(--timer-ease-out) forwards;
}

.timer-slide-out-up {
    animation: timerSlideOutUp var(--timer-normal) var(--timer-ease-in) forwards;
}

.timer-slide-out-down {
    animation: timerSlideOutDown var(--timer-normal) var(--timer-ease-in) forwards;
}

.timer-slide-in-left {
    animation: timerSlideInLeft var(--timer-normal) var(--timer-ease-out) forwards;
}

.timer-slide-in-right {
    animation: timerSlideInRight var(--timer-normal) var(--timer-ease-out) forwards;
}

.timer-rotate-in {
    animation: timerRotateIn var(--timer-slow) var(--timer-ease-out) forwards;
}

.timer-rotate-360 {
    animation: timerRotate360 var(--timer-normal) linear infinite;
}

.timer-clockwise {
    animation: timerClockwise var(--timer-precise) var(--timer-precision) infinite;
}

/* Timer-Specific Classes */
.timer-progress-animation {
    animation: timerProgress var(--timer-precise) var(--timer-precision) forwards;
}

.timer-tick {
    animation: timerTick 0.6s var(--timer-ease);
}

.timer-countdown {
    animation: timerCountdown 1s var(--timer-ease) infinite;
}

.timer-hand-sweep {
    animation: timerHandSweep 2s linear infinite;
    transform-origin: center bottom;
}

/* Interactive States */
.timer-hover-lift {
    transition: transform var(--timer-fast) var(--timer-ease), box-shadow var(--timer-fast) var(--timer-ease);
}

    .timer-hover-lift:hover {
        transform: translateY(var(--timer-translate-hover));
        box-shadow: 0 15px 40px rgba(157, 62, 245, 0.15);
    }

.timer-hover-scale {
    transition: transform var(--timer-fast) var(--timer-ease);
}

    .timer-hover-scale:hover {
        transform: scale(var(--timer-scale-hover));
    }

.timer-hover-glow {
    transition: box-shadow var(--timer-fast) var(--timer-ease);
}

    .timer-hover-glow:hover {
        box-shadow: 0 0 20px rgba(157, 62, 245, 0.3);
    }

.timer-active-scale {
    transition: transform var(--timer-fast) var(--timer-ease);
}

    .timer-active-scale:active {
        transform: scale(var(--timer-scale-active));
    }

.timer-hover-rotate {
    transition: transform var(--timer-normal) var(--timer-ease);
}

    .timer-hover-rotate:hover {
        transform: rotate(5deg);
    }

/* Button Animations */
.timer-btn-ripple {
    position: relative;
    overflow: hidden;
    transition: all var(--timer-fast) var(--timer-ease);
}

    .timer-btn-ripple::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.6);
        transform: translate(-50%, -50%);
        transition: width var(--timer-slow) var(--timer-ease), height var(--timer-slow) var(--timer-ease);
    }

    .timer-btn-ripple:active::before {
        width: 300px;
        height: 300px;
    }

.timer-btn-gradient {
    background: var(--timer-gradient-primary);
    background-size: 200% 200%;
    transition: background-position var(--timer-normal) var(--timer-ease);
}

    .timer-btn-gradient:hover {
        background-position: 100% 0;
    }

/* Loading States */
.timer-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

    .timer-loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
        border: 2px solid #f3f3f3;
        border-top: 2px solid var(--timer-primary);
        border-radius: 50%;
        animation: timerSpinner var(--timer-normal) linear infinite;
    }

/* Special Effects */
.timer-shake {
    animation: timerShake var(--timer-slow) var(--timer-ease);
}

.timer-pulse {
    animation: timerPulse 2s infinite;
}

.timer-glow {
    animation: timerGlow 2s ease-in-out infinite;
}

.timer-wave {
    animation: timerWave 0.5s ease-in-out;
}

.timer-breath {
    animation: timerBreath 3s ease-in-out infinite;
}

/* Stagger Animations */
.timer-stagger-children > * {
    opacity: 0;
    animation: timerFadeInUp var(--timer-normal) var(--timer-ease) forwards;
}

    .timer-stagger-children > *:nth-child(1) {
        animation-delay: 0.1s;
    }

    .timer-stagger-children > *:nth-child(2) {
        animation-delay: 0.2s;
    }

    .timer-stagger-children > *:nth-child(3) {
        animation-delay: 0.3s;
    }

    .timer-stagger-children > *:nth-child(4) {
        animation-delay: 0.4s;
    }

    .timer-stagger-children > *:nth-child(5) {
        animation-delay: 0.5s;
    }

    .timer-stagger-children > *:nth-child(6) {
        animation-delay: 0.6s;
    }

    .timer-stagger-children > *:nth-child(7) {
        animation-delay: 0.7s;
    }

    .timer-stagger-children > *:nth-child(8) {
        animation-delay: 0.8s;
    }

    .timer-stagger-children > *:nth-child(9) {
        animation-delay: 0.9s;
    }

/* Page Transitions */
.timer-page-enter {
    animation: timerFadeInUp var(--timer-slow) var(--timer-ease-out) forwards;
}

.timer-page-exit {
    animation: timerFadeOut var(--timer-fast) var(--timer-ease-in) forwards;
}

/* Modal/Overlay Animations */
.timer-modal-backdrop {
    animation: timerFadeIn var(--timer-normal) var(--timer-ease) forwards;
    backdrop-filter: blur(var(--timer-blur-backdrop));
}

.timer-modal-content {
    animation: timerScaleIn var(--timer-normal) var(--timer-bounce) forwards;
}

.timer-modal-exit .timer-modal-backdrop {
    animation: timerFadeOut var(--timer-fast) var(--timer-ease) forwards;
}

.timer-modal-exit .timer-modal-content {
    animation: timerScaleOut var(--timer-fast) var(--timer-ease) forwards;
}

/* Notification Slide Animations */
.timer-notification-enter {
    animation: timerSlideInRight var(--timer-normal) var(--timer-ease-out) forwards;
}

.timer-notification-exit {
    animation: timerSlideOutUp var(--timer-normal) var(--timer-ease-in) forwards;
}

/* Tooltip Animations */
.timer-tooltip-enter {
    animation: timerFadeInUp var(--timer-fast) var(--timer-ease) forwards;
}

.timer-tooltip-exit {
    animation: timerFadeOut var(--timer-fast) var(--timer-ease) forwards;
}

/* Loading Components */
.timer-dots-loader {
    display: inline-flex;
    gap: 4px;
}

    .timer-dots-loader span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--timer-primary);
        animation: timerDotsLoading 1.4s infinite ease-in-out both;
    }

        .timer-dots-loader span:nth-child(1) {
            animation-delay: -0.32s;
        }

        .timer-dots-loader span:nth-child(2) {
            animation-delay: -0.16s;
        }

        .timer-dots-loader span:nth-child(3) {
            animation-delay: 0s;
        }

.timer-bars-loader {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    height: 30px;
}

    .timer-bars-loader span {
        width: 4px;
        height: 30px;
        background: var(--timer-primary);
        animation: timerBarsLoading 1.2s infinite ease-in-out;
    }

        .timer-bars-loader span:nth-child(1) {
            animation-delay: -1.2s;
        }

        .timer-bars-loader span:nth-child(2) {
            animation-delay: -1.1s;
        }

        .timer-bars-loader span:nth-child(3) {
            animation-delay: -1.0s;
        }

        .timer-bars-loader span:nth-child(4) {
            animation-delay: -0.9s;
        }

        .timer-bars-loader span:nth-child(5) {
            animation-delay: -0.8s;
        }

.timer-progress-loader {
    width: 100%;
    height: 4px;
    background: var(--timer-gray-200);
    border-radius: var(--timer-radius-full);
    overflow: hidden;
}

    .timer-progress-loader::after {
        content: '';
        display: block;
        height: 100%;
        background: var(--timer-gradient-primary);
        background-size: 40px 40px;
        animation: timerProgressBar 2s linear infinite;
    }

/* Meeting & Timer Specific Animations */
.timer-meeting-pulse {
    animation: timerPulse 1.5s ease-in-out infinite;
}

.timer-session-active {
    animation: timerGlow 2s ease-in-out infinite;
}

.timer-break-breath {
    animation: timerBreath 4s ease-in-out infinite;
}

.timer-focus-mode {
    animation: timerCountdown 3s ease-in-out infinite;
}

.timer-completion-celebration {
    animation: timerBounceIn 0.8s var(--timer-bounce), timerGlow 2s ease-in-out 0.8s;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .timer-rotate-360,
    .timer-pulse,
    .timer-glow,
    .timer-clockwise,
    .timer-hand-sweep {
        animation: none !important;
    }
}

/* Performance Optimizations */
.timer-will-animate {
    will-change: transform, opacity;
}

.timer-gpu-accelerate {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* === RESPONSIVE ANIMATIONS === */
@media (max-width: 768px) {
    :root {
        --timer-fast: 0.12s;
        --timer-normal: 0.25s;
        --timer-slow: 0.4s;
        --timer-translate-hover: -4px;
    }

    .timer-hover-lift:hover {
        transform: translateY(-4px);
    }
}

/* === ANIMATION COMBINATIONS === */
.timer-fade-scale-in {
    animation: timerFadeIn var(--timer-normal) var(--timer-ease) forwards, timerScaleIn var(--timer-normal) var(--timer-ease) forwards;
}

.timer-slide-fade-in {
    animation: timerSlideInUp var(--timer-normal) var(--timer-ease-out) forwards, timerFadeIn var(--timer-normal) var(--timer-ease) forwards;
}

.timer-precision-entry {
    animation: timerFadeInUp var(--timer-normal) var(--timer-precision) forwards, timerScaleIn var(--timer-normal) var(--timer-precision) 0.1s forwards;
}

/* === DEBUG MODE === */
.timer-debug-animations * {
    animation-duration: 3s !important;
    transition-duration: 3s !important;
    outline: 1px solid var(--timer-primary);
}