/* ============================================
   ANIMATIONS.CSS - KEYFRAMES & CLASSES
   ============================================ */

/* ===== ENTRANCE ANIMATIONS ===== */
@keyframes entranceFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

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

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

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

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

@keyframes entranceScaleSmall {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes entranceRotate {
    from {
        opacity: 0;
        transform: rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: rotate(0deg);
    }
}

/* ===== EXIT ANIMATIONS ===== */
@keyframes exitFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

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

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

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

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

/* ===== EMPHASIS ANIMATIONS ===== */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1);
    }
}

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

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

@keyframes wobble {
    0%, 100% {
        transform: translateX(0);
    }
    15% {
        transform: translateX(-5px) rotate(-5deg);
    }
    30% {
        transform: translateX(5px) rotate(3deg);
    }
    45% {
        transform: translateX(-5px) rotate(-3deg);
    }
    60% {
        transform: translateX(3px) rotate(2deg);
    }
    75% {
        transform: translateX(-2px) rotate(-1deg);
    }
}

@keyframes jello {
    from, 11.1%, to {
        transform: translate3d(0, 0, 0);
    }
    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }
    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg);
    }
    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }
    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }
    66.6% {
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }
    77.7% {
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }
    88.8% {
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}

/* ===== SPECIAL ANIMATIONS ===== */
@keyframes glow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(132, 86, 237, 0.5);
    }
    50% {
        text-shadow: 0 0 20px rgba(132, 86, 237, 0.8);
    }
}

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

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

@keyframes flip {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ===== ANIMATION CLASSES ===== */
.animate-fade-in {
    animation: entranceFadeIn 0.5s ease;
}

.animate-slide-up-sm {
    animation: entranceSlideUpSmall 0.5s ease;
}

.animate-slide-up-md {
    animation: entranceSlideUpMedium 0.6s ease;
}

.animate-slide-up-lg {
    animation: entranceSlideUpLarge 0.7s ease;
}

.animate-slide-down-sm {
    animation: entranceSlideDownSmall 0.5s ease;
}

.animate-slide-left-sm {
    animation: entranceSlideLeftSmall 0.5s ease;
}

.animate-slide-right-sm {
    animation: entranceSlideRightSmall 0.5s ease;
}

.animate-scale {
    animation: entranceScaleSmall 0.5s ease;
}

.animate-rotate {
    animation: entranceRotate 0.5s ease;
}

.animate-bounce {
    animation: bounce 1s infinite;
}

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

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

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

.animate-swing {
    animation: swing 1s ease-in-out;
    transform-origin: top center;
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

.animate-wobble {
    animation: wobble 0.8s ease-in-out;
}

.animate-jello {
    animation: jello 0.9s ease-in-out;
}

.animate-glow {
    animation: glow 1.5s ease-in-out infinite;
}

.animate-rotate-infinite {
    animation: rotate 2s linear infinite;
}

.animate-flip {
    animation: flip 1s ease-in-out;
}

/* ===== DELAY CLASSES ===== */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* ===== DURATION CLASSES ===== */
.duration-300 { animation-duration: 0.3s; }
.duration-500 { animation-duration: 0.5s; }
.duration-700 { animation-duration: 0.7s; }
.duration-1000 { animation-duration: 1s; }

/* ===== RESPONSIVE ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}