/* ========================================
   ANIMATIONS.CSS - All Keyframes & Effects
   ======================================== */

/* Aurora Float */
@keyframes aurora-float {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    25% {
        transform: translate(5%, 8%) rotate(3deg) scale(1.05);
    }

    50% {
        transform: translate(10%, 5%) rotate(-2deg) scale(1.1);
    }

    75% {
        transform: translate(-5%, 10%) rotate(2deg) scale(1.02);
    }
}

/* Morph Animations */
@keyframes morph-in {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(12px);
        filter: blur(8px);
        border-radius: 28px;
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
        border-radius: var(--radius-lg);
    }
}

@keyframes morph-out {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(4px);
    }
}

@keyframes morph-pulse {

    0%,
    100% {
        transform: scale(1);
        border-radius: var(--radius-lg);
    }

    50% {
        transform: scale(1.015);
        border-radius: calc(var(--radius-lg) + 4px);
    }
}

@keyframes morph-blob {

    0%,
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    25% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    50% {
        border-radius: 50% 60% 30% 60% / 30% 70% 60% 40%;
    }

    75% {
        border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%;
    }
}

/* Float Animations */
@keyframes float-gentle {

    0%,
    100% {
        transform: translateY(0);
    }

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

@keyframes float-rotate {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-4px) rotate(1deg);
    }

    50% {
        transform: translateY(-8px) rotate(0deg);
    }

    75% {
        transform: translateY(-4px) rotate(-1deg);
    }
}

/* Text Effects */
@keyframes text-breathe {

    0%,
    100% {
        letter-spacing: -0.02em;
        opacity: 1;
    }

    50% {
        letter-spacing: 0;
        opacity: 0.92;
    }
}

@keyframes gradient-shift {

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

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

.kinetic-text {
    display: inline-block;
}

.gradient-text {
    background: var(--mesh-primary);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 8s ease infinite;
}

/* Modal Animations */
@keyframes modal-morph-in {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(24px);
        border-radius: 32px;
        filter: blur(12px);
    }

    50% {
        transform: scale(1.02) translateY(-4px);
        border-radius: 18px;
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        border-radius: var(--radius-lg);
        filter: blur(0);
    }
}

@keyframes modal-morph-out {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: scale(0.9) translateY(16px);
        filter: blur(8px);
    }
}

/* Shimmer Effect */
@keyframes shimmer-slide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.shimmer-effect {
    position: relative;
    overflow: hidden;
}

.shimmer-effect::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
    animation: shimmer-slide 3s ease-in-out infinite;
}

/* Basic Transitions */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

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

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

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

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

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

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
    }

    50% {
        box-shadow: 0 4px 24px rgba(102, 126, 234, 0.6);
    }
}

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

/* Button Shimmer */
@keyframes btn-shimmer {

    0%,
    100% {
        left: -100%;
    }

    50% {
        left: 150%;
    }
}

/* Brand Icon Pulse */
@keyframes brand-icon-pulse {

    0%,
    100% {
        box-shadow:
            0 0 12px rgba(99, 102, 241, 0.5),
            0 0 25px rgba(99, 102, 241, 0.2);
    }

    33% {
        box-shadow:
            0 0 12px rgba(139, 92, 246, 0.5),
            0 0 25px rgba(139, 92, 246, 0.2);
    }

    66% {
        box-shadow:
            0 0 12px rgba(59, 130, 246, 0.5),
            0 0 25px rgba(59, 130, 246, 0.2);
    }
}

/* AI Glow Effects */
@keyframes analyze-btn-glow {

    0%,
    100% {
        box-shadow:
            0 0 15px rgba(139, 92, 246, 0.5),
            0 0 30px rgba(139, 92, 246, 0.3),
            0 0 45px rgba(139, 92, 246, 0.1);
    }

    33% {
        box-shadow:
            0 0 15px rgba(59, 130, 246, 0.5),
            0 0 30px rgba(59, 130, 246, 0.3),
            0 0 45px rgba(59, 130, 246, 0.1);
    }

    66% {
        box-shadow:
            0 0 15px rgba(6, 182, 212, 0.5),
            0 0 30px rgba(6, 182, 212, 0.3),
            0 0 45px rgba(6, 182, 212, 0.1);
    }
}

@keyframes analyze-btn-glow-hover {

    0%,
    100% {
        box-shadow:
            0 0 20px rgba(139, 92, 246, 0.6),
            0 0 40px rgba(139, 92, 246, 0.35),
            0 0 60px rgba(139, 92, 246, 0.15),
            inset 0 0 15px rgba(139, 92, 246, 0.1);
    }

    33% {
        box-shadow:
            0 0 20px rgba(59, 130, 246, 0.6),
            0 0 40px rgba(59, 130, 246, 0.35),
            0 0 60px rgba(59, 130, 246, 0.15),
            inset 0 0 15px rgba(59, 130, 246, 0.1);
    }

    66% {
        box-shadow:
            0 0 20px rgba(6, 182, 212, 0.6),
            0 0 40px rgba(6, 182, 212, 0.35),
            0 0 60px rgba(6, 182, 212, 0.15),
            inset 0 0 15px rgba(6, 182, 212, 0.1);
    }
}

/* Thinking Animation */
@keyframes thinking-breath {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
}

/* Rainbow Border */
@keyframes rainbow-border {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Stage Pulse */
@keyframes current-stage-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.5);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 6px 24px rgba(102, 126, 234, 0.7);
    }
}

/* Panel Enter */
@keyframes panel-enter {
    from {
        opacity: 0;
        transform: translateX(8px);
    }

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

/* Card Reveal (Scroll-Driven) */
@keyframes card-reveal {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }

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

/* Fade utilities */
.fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
}

.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}