/* ===== ANIMATIONS AND KEYFRAMES ===== */

/* ===== FADE ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== SLIDE ANIMATIONS ===== */
@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

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

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

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

/* ===== SCALE ANIMATIONS ===== */
@keyframes scaleIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@keyframes scaleInUp {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes scaleInDown {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ===== ROTATE ANIMATIONS ===== */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-200deg);
    }
    to {
        opacity: 1;
        transform: rotate(0);
    }
}

@keyframes rotateInUpLeft {
    from {
        opacity: 0;
        transform: rotate(45deg);
        transform-origin: left bottom;
    }
    to {
        opacity: 1;
        transform: rotate(0);
        transform-origin: left bottom;
    }
}

@keyframes rotateInUpRight {
    from {
        opacity: 0;
        transform: rotate(-45deg);
        transform-origin: right bottom;
    }
    to {
        opacity: 1;
        transform: rotate(0);
        transform-origin: right bottom;
    }
}

/* ===== BOUNCE ANIMATIONS ===== */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -30px, 0);
    }
    70% {
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== FLASH ANIMATIONS ===== */
@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

/* ===== PULSE ANIMATIONS ===== */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 5px rgba(168, 85, 247, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.8);
    }
    100% {
        box-shadow: 0 0 5px rgba(168, 85, 247, 0.5);
    }
}

/* ===== RUBBER BAND ANIMATION ===== */
@keyframes rubberBand {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scaleX(1.25) scaleY(0.75);
    }
    40% {
        transform: scaleX(0.75) scaleY(1.25);
    }
    60% {
        transform: scaleX(1.15) scaleY(0.85);
    }
    100% {
        transform: scale(1);
    }
}

/* ===== SHAKE ANIMATION ===== */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

/* ===== SWING ANIMATION ===== */
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* ===== TADA ANIMATION ===== */
@keyframes tada {
    0% {
        transform: scale(1);
    }
    10%, 20% {
        transform: scale(0.9) rotate(-3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale(1.1) rotate(3deg);
    }
    40%, 60%, 80% {
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}

/* ===== WOBBLE ANIMATION ===== */
@keyframes wobble {
    0% {
        transform: translateX(0%);
    }
    15% {
        transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        transform: translateX(20%) rotate(3deg);
    }
    45% {
        transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        transform: translateX(10%) rotate(2deg);
    }
    75% {
        transform: translateX(-5%) rotate(-1deg);
    }
    100% {
        transform: translateX(0%);
    }
}

/* ===== HEARTBEAT ANIMATION ===== */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.3);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1);
    }
}

/* ===== HINGE ANIMATION ===== */
@keyframes hinge {
    0% {
        transform: rotate(0);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }
    20%, 60% {
        transform: rotate(80deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }
    40%, 80% {
        transform: rotate(60deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }
    100% {
        transform: translateY(700px);
        opacity: 0;
    }
}

/* ===== ROLL ANIMATIONS ===== */
@keyframes rollIn {
    0% {
        opacity: 0;
        transform: translateX(-100%) rotate(-120deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

@keyframes rollOut {
    0% {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateX(100%) rotate(120deg);
    }
}

/* ===== ZOOM ANIMATIONS ===== */
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomInUp {
    0% {
        opacity: 0;
        transform: scale(0.1) translateY(250px);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale(0.475) translateY(-60px);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes zoomInDown {
    0% {
        opacity: 0;
        transform: scale(0.1) translateY(-250px);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale(0.475) translateY(60px);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ===== FLIP ANIMATIONS ===== */
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
        animation-timing-function: ease-in;
    }
    40% {
        transform: perspective(400px) rotateX(-20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotateX(-5deg);
    }
    100% {
        transform: perspective(400px) rotateX(0deg);
    }
}

@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
        animation-timing-function: ease-in;
    }
    40% {
        transform: perspective(400px) rotateY(-20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotateY(10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotateY(-5deg);
    }
    100% {
        transform: perspective(400px) rotateY(0deg);
    }
}

/* ===== LIGHTSPEED ANIMATIONS ===== */
@keyframes lightSpeedIn {
    0% {
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
    60% {
        transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }
    80% {
        transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }
    100% {
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

@keyframes lightSpeedOut {
    0% {
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
    100% {
        transform: translateX(100%) skewX(30deg);
        opacity: 0;
    }
}

/* ===== ANIMATION CLASSES ===== */
.animate-fadeIn { animation: fadeIn 0.6s ease-in-out; }
.animate-fadeInUp { animation: fadeInUp 0.6s ease-in-out; }
.animate-fadeInDown { animation: fadeInDown 0.6s ease-in-out; }
.animate-fadeInLeft { animation: fadeInLeft 0.6s ease-in-out; }
.animate-fadeInRight { animation: fadeInRight 0.6s ease-in-out; }

.animate-slideInUp { animation: slideInUp 0.6s ease-in-out; }
.animate-slideInDown { animation: slideInDown 0.6s ease-in-out; }
.animate-slideInLeft { animation: slideInLeft 0.6s ease-in-out; }
.animate-slideInRight { animation: slideInRight 0.6s ease-in-out; }

.animate-scaleIn { animation: scaleIn 0.6s ease-in-out; }
.animate-scaleInUp { animation: scaleInUp 0.6s ease-in-out; }
.animate-scaleInDown { animation: scaleInDown 0.6s ease-in-out; }

.animate-rotateIn { animation: rotateIn 0.6s ease-in-out; }
.animate-rotateInUpLeft { animation: rotateInUpLeft 0.6s ease-in-out; }
.animate-rotateInUpRight { animation: rotateInUpRight 0.6s ease-in-out; }

.animate-bounce { animation: bounce 1s ease-in-out; }
.animate-bounceIn { animation: bounceIn 0.6s ease-in-out; }

.animate-flash { animation: flash 1s ease-in-out; }
.animate-pulse { animation: pulse 1s ease-in-out; }
.animate-pulseGlow { animation: pulseGlow 2s ease-in-out infinite; }

.animate-rubberBand { animation: rubberBand 0.6s ease-in-out; }
.animate-shake { animation: shake 0.6s ease-in-out; }
.animate-swing { animation: swing 1s ease-in-out; }
.animate-tada { animation: tada 1s ease-in-out; }
.animate-wobble { animation: wobble 1s ease-in-out; }

.animate-heartbeat { animation: heartbeat 1.3s ease-in-out; }
.animate-hinge { animation: hinge 2s ease-in-out; }

.animate-rollIn { animation: rollIn 0.6s ease-in-out; }
.animate-rollOut { animation: rollOut 0.6s ease-in-out; }

.animate-zoomIn { animation: zoomIn 0.6s ease-in-out; }
.animate-zoomInUp { animation: zoomInUp 0.6s ease-in-out; }
.animate-zoomInDown { animation: zoomInDown 0.6s ease-in-out; }

.animate-flipInX { animation: flipInX 0.6s ease-in-out; }
.animate-flipInY { animation: flipInY 0.6s ease-in-out; }

.animate-lightSpeedIn { animation: lightSpeedIn 0.6s ease-in-out; }
.animate-lightSpeedOut { animation: lightSpeedOut 0.6s ease-in-out; }

/* ===== ANIMATION DELAYS ===== */
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }
.animate-delay-500 { animation-delay: 0.5s; }
.animate-delay-600 { animation-delay: 0.6s; }
.animate-delay-700 { animation-delay: 0.7s; }
.animate-delay-800 { animation-delay: 0.8s; }
.animate-delay-900 { animation-delay: 0.9s; }
.animate-delay-1000 { animation-delay: 1s; }

/* ===== ANIMATION DURATIONS ===== */
.animate-duration-300 { animation-duration: 0.3s; }
.animate-duration-500 { animation-duration: 0.5s; }
.animate-duration-700 { animation-duration: 0.7s; }
.animate-duration-1000 { animation-duration: 1s; }
.animate-duration-1500 { animation-duration: 1.5s; }
.animate-duration-2000 { animation-duration: 2s; }

/* ===== ANIMATION ITERATIONS ===== */
.animate-infinite { animation-iteration-count: infinite; }
.animate-repeat-2 { animation-iteration-count: 2; }
.animate-repeat-3 { animation-iteration-count: 3; }

/* ===== ANIMATION FILL MODES ===== */
.animate-fill-forwards { animation-fill-mode: forwards; }
.animate-fill-backwards { animation-fill-mode: backwards; }
.animate-fill-both { animation-fill-mode: both; }

/* ===== ANIMATION TIMING FUNCTIONS ===== */
.animate-ease-linear { animation-timing-function: linear; }
.animate-ease-in { animation-timing-function: ease-in; }
.animate-ease-out { animation-timing-function: ease-out; }
.animate-ease-in-out { animation-timing-function: ease-in-out; }
.animate-ease-bounce { animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

/* ===== HOVER ANIMATIONS ===== */
.hover-scale:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
    transition: box-shadow 0.3s ease;
}

.hover-rotate:hover {
    transform: rotate(5deg);
    transition: transform 0.3s ease;
}

.hover-bounce:hover {
    animation: bounce 0.6s ease-in-out;
}

/* ===== RESPONSIVE ANIMATIONS ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .hover-scale:hover,
    .hover-lift:hover,
    .hover-glow:hover,
    .hover-rotate:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.animate-will-change {
    will-change: transform, opacity;
}

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

/* ===== CUSTOM ANIMATIONS FOR TAAI ===== */
@keyframes taaiFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes taaiGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(168, 85, 247, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
    }
}

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

.taai-float {
    animation: taaiFloat 3s ease-in-out infinite;
}

.taai-glow {
    animation: taaiGlow 2s ease-in-out infinite;
}

.taai-pulse {
    animation: taaiPulse 2s ease-in-out infinite;
}