/* ==========================================================================
   TENKASIBROS - ANIMATIONS & KEYFRAMES (ANIMATIONS.CSS)
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 PRELOADER & SPINNER ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulseLogo {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 15px rgba(96, 165, 250, 0.5));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 35px rgba(96, 165, 250, 0.9));
    }
}

@keyframes progressShift {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

/* --------------------------------------------------------------------------
   02 LOGO ELEVATION ANIMATIONS (RING, SHINE, AURA & PARTICLES)
   -------------------------------------------------------------------------- */
@keyframes glowingRingRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes shineSweep {
    0% {
        left: -120%;
        opacity: 0;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        left: 140%;
        opacity: 0;
    }
}

@keyframes ambientGlowPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.55;
        filter: blur(35px);
    }
    50% {
        transform: scale(1.22);
        opacity: 0.85;
        filter: blur(45px);
    }
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-12px) translateX(8px) scale(1.3);
        opacity: 0.9;
    }
}

/* --------------------------------------------------------------------------
   03 FLOATING SHAPES & BADGES
   -------------------------------------------------------------------------- */
@keyframes floatY {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-16px) rotate(2deg); }
}

@keyframes floatYReverse {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(16px) rotate(-2deg); }
}

@keyframes floatSlow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(15px, -20px) scale(1.05); }
}

/* --------------------------------------------------------------------------
   04 GLOW, RIPPLE & MARQUEE
   -------------------------------------------------------------------------- */
@keyframes buttonGlowPulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4), 0 0 35px rgba(96, 165, 250, 0.25);
    }
    50% {
        box-shadow: 0 6px 30px rgba(59, 130, 246, 0.75), 0 0 55px rgba(96, 165, 250, 0.55);
    }
}

@keyframes tickerMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes rippleExpand {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0.6;
    }
    100% {
        width: 400px;
        height: 400px;
        opacity: 0;
    }
}

/* Helper Animation Classes */
.float-anim-1 {
    animation: floatY 6s ease-in-out infinite;
}

.float-anim-2 {
    animation: floatYReverse 7s ease-in-out infinite;
}

.ticker-content {
    animation: tickerMarquee 25s linear infinite;
    display: flex;
    white-space: nowrap;
}

.ticker-wrapper:hover .ticker-content {
    animation-play-state: paused;
}