/* ============================================
   ANIMATIONS
   Keyframes, Transitions, Animation Classes
   ============================================ */

/* ---- Floating Animation ---- */
@keyframes float {

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

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

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

/* ---- Pulse Glow ---- */
@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(42, 42, 42, 0.1);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(42, 42, 42, 0);
    }
}

[data-theme="dark"] .pulse-glow {
    animation: pulseGlowDark 3s ease-in-out infinite;
}

@keyframes pulseGlowDark {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(232, 228, 223, 0.1);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(232, 228, 223, 0);
    }
}

.pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite;
}

/* ---- Marquee ---- */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

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

.marquee-track {
    display: flex;
    gap: var(--space-4xl);
    animation: marquee 25s linear infinite;
    width: max-content;
}

.marquee-track:hover {
    animation-play-state: paused;
}

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

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

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

.gradient-animated {
    background-size: 200% 200%;
    animation: gradientShift 6s ease infinite;
}

/* ---- Text Shimmer ---- */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

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

.text-shimmer {
    background: linear-gradient(90deg,
            var(--text-primary) 0%,
            var(--text-tertiary) 45%,
            var(--text-primary) 55%,
            var(--text-primary) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
    will-change: background-position;
}

/* ---- Rotate ---- */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

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

.rotate-slow {
    animation: rotate 20s linear infinite;
}

/* ---- Bounce In ---- */
@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.95);
    }

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

/* ---- Slide Up ---- */
@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

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

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

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

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

    to {
        opacity: 1;
    }
}

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

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

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

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

/* ---- Line draw ---- */
@keyframes drawLine {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

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

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

/* ---- Magnetic button effect ---- */
.magnetic {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Tilt Effect ---- */
.tilt {
    transition: transform 0.3s ease;
    transform-style: preserve-3d;
}

/* ---- Word reveal animation class ---- */
.word-reveal .word {
    display: inline-block;
    overflow: hidden;
    margin-right: 0.2em;
}

.word-reveal .word-inner {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.word-reveal.active .word-inner {
    transform: translateY(0);
}

/* Stagger each word */
.word-reveal.active .word:nth-child(1) .word-inner {
    transition-delay: 0.0s;
}

.word-reveal.active .word:nth-child(2) .word-inner {
    transition-delay: 0.05s;
}

.word-reveal.active .word:nth-child(3) .word-inner {
    transition-delay: 0.1s;
}

.word-reveal.active .word:nth-child(4) .word-inner {
    transition-delay: 0.15s;
}

.word-reveal.active .word:nth-child(5) .word-inner {
    transition-delay: 0.2s;
}

.word-reveal.active .word:nth-child(6) .word-inner {
    transition-delay: 0.25s;
}

.word-reveal.active .word:nth-child(7) .word-inner {
    transition-delay: 0.3s;
}

.word-reveal.active .word:nth-child(8) .word-inner {
    transition-delay: 0.35s;
}

.word-reveal.active .word:nth-child(9) .word-inner {
    transition-delay: 0.4s;
}

.word-reveal.active .word:nth-child(10) .word-inner {
    transition-delay: 0.45s;
}