/* =================================================================
   image2model Animation System - Core Definitions
   Based on brand guidelines with low-poly, geometric aesthetic
   ================================================================= */

/* =================================================================
   Timing Functions - Mathematical Curves
   ================================================================= */
:root {
    /* Standard Easing Curves */
    --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Animation Durations */
    --duration-micro: 100ms;    /* Hovers, quick state changes */
    --duration-short: 200ms;    /* Standard transitions */
    --duration-medium: 300ms;   /* Content reveals */
    --duration-long: 500ms;     /* Page transitions */
    --duration-xl: 800ms;       /* Complex animations */
    
    /* Animation Delays */
    --delay-stagger: 50ms;      /* For staggered animations */
    --delay-short: 100ms;
    --delay-medium: 200ms;
    --delay-long: 300ms;
}

/* =================================================================
   Core Keyframe Animations
   ================================================================= */

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

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@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);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

/* Slide Animations */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

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

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

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

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

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

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

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

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

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

/* Rotation Animations */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

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

@keyframes rotateIn {
    from {
        transform: rotate(-180deg) scale(0);
        opacity: 0;
    }

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

@keyframes swing {
    20% {
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        transform: rotate3d(0, 0, 1, -5deg);
    }

    100% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

/* Geometric Shape Morphing */
@keyframes morphTriangle {
    0% {
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }

    50% {
        clip-path: polygon(50% 15%, 15% 85%, 85% 85%);
    }

    100% {
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }
}

@keyframes morphSquare {
    0% {
        border-radius: 0;
        transform: rotate(0deg);
    }

    25% {
        border-radius: 10%;
        transform: rotate(90deg);
    }

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

    75% {
        border-radius: 10%;
        transform: rotate(270deg);
    }

    100% {
        border-radius: 0;
        transform: rotate(360deg);
    }
}

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

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

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

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

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

@keyframes triangleSpin {
    0% {
        transform: rotate(0deg);
        filter: hue-rotate(0deg);
    }

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

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

    100% {
        background-position: 200% 0;
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

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

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

/* Gradient Animations */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes gradientRotate {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

/* Text Animations */
@keyframes textReveal {
    from {
        clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    }

    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes typewriter {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes glitchText {
    0%, 100% {
        text-shadow: 
            0 0 0 var(--brand-vibrant-red),
            0 0 0 var(--brand-bright-cyan);
    }

    33% {
        text-shadow: 
            2px 0 0 var(--brand-vibrant-red),
            -2px 0 0 var(--brand-bright-cyan);
    }

    66% {
        text-shadow: 
            -2px 0 0 var(--brand-vibrant-red),
            2px 0 0 var(--brand-bright-cyan);
    }
}

/* Number Counter Animation */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Micro-interactions */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(4);
        opacity: 0;
    }
}

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

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

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

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

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

/* Parallax and 3D Effects */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes tilt {
    0%, 100% {
        transform: perspective(400px) rotateY(0deg);
    }

    50% {
        transform: perspective(400px) rotateY(10deg);
    }
}

/* Special Effects */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgb(93 173 226 / 50%);
    }

    50% {
        box-shadow: 0 0 20px rgb(93 173 226 / 80%),
                    0 0 30px rgb(93 173 226 / 60%);
    }
}

@keyframes shadowPulse {
    0%, 100% {
        box-shadow: 0 4px 6px -1px rgb(58 66 74 / 10%);
    }

    50% {
        box-shadow: 0 20px 25px -5px rgb(58 66 74 / 20%);
    }
}

/* =================================================================
   Performance Optimizations
   ================================================================= */

/* GPU Acceleration Hints */
.will-animate {
    will-change: transform, opacity;
}

.will-animate-position {
    will-change: transform;
}

.will-animate-opacity {
    will-change: opacity;
}

/* Clean up after animation */
.animation-done {
    will-change: auto;
}

/* =================================================================
   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;
        scroll-behavior: auto !important;
    }
    
    /* Keep essential animations but make them instant */
    .essential-animation {
        animation-duration: 0.01ms !important;
    }
}

/* =================================================================
   Animation State Classes
   ================================================================= */

/* Paused state */
.animation-paused {
    animation-play-state: paused !important;
}

/* Running state */
.animation-running {
    animation-play-state: running !important;
}

/* Animation control for user preference */
[data-reduce-motion="true"] * {
    animation: none !important;
    transition: none !important;
}