/* ============================================
   ANIMATIONS
   All @keyframes and animation utilities
   ============================================ */

/* --- Blob Animations --- */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: var(--blob-opacity);
    transition: background 0.8s ease, opacity 0.8s ease;
    animation: float 25s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.blob-1 {
    width: 70vw;
    height: 70vw;
    background: var(--blob-1);
    top: -15%;
    left: -15%;
    animation-delay: 0s;
}

.blob-2 {
    width: 80vw;
    height: 80vw;
    background: var(--blob-2);
    bottom: -25%;
    right: -25%;
    animation-delay: -5s;
    animation-duration: 30s;
}

.blob-3 {
    width: 60vw;
    height: 60vw;
    background: var(--blob-3);
    bottom: 10%;
    left: 10%;
    animation-delay: -10s;
    animation-duration: 28s;
}

@keyframes float {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(40px, 60px, 0) scale(1.05);
    }
}

/* --- Number Display Animations --- */
.animate-bounce {
    animation: bounceIn 0.6s var(--ease-spring) forwards;
}

@keyframes bounceIn {
    0% {
        transform: scale(0.8) translateY(-50px);
        filter: blur(10px);
        opacity: 0;
    }

    40% {
        transform: scale(1.15, 0.85) translateY(10px);
        filter: blur(0);
        opacity: 1;
    }

    70% {
        transform: scale(0.95, 1.05) translateY(-5px);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

/* --- Animal/Cat Animations --- */
.animal-block svg {
    width: 100%;
    height: auto;
    fill: var(--text-secondary);
    opacity: 0.8;
    animation: breathing 6s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes breathing {

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

    50% {
        transform: scale(1.05, 0.96);
    }
}

.z {
    font-size: 32px;
    bottom: 60%;
    right: 15%;
    animation: zzz 4s linear infinite;
}

.zz {
    font-size: 24px;
    bottom: 55%;
    right: 5%;
    animation: zzz-2 4s linear infinite 2s;
}

@keyframes zzz {
    0% {
        transform: translate(0, 0) scale(0.5);
        opacity: 0;
    }

    20% {
        transform: translate(-5px, -20px) scale(0.7);
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }

    80% {
        transform: translate(-15px, -60px) scale(1.2);
        opacity: 0.5;
    }

    100% {
        transform: translate(-20px, -80px) scale(1.5);
        opacity: 0;
    }
}

@keyframes zzz-2 {
    0% {
        transform: translate(0, 0) scale(0.5);
        opacity: 0;
    }

    20% {
        transform: translate(5px, -15px) scale(0.7);
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }

    80% {
        transform: translate(15px, -50px) scale(1.2);
        opacity: 0.5;
    }

    100% {
        transform: translate(20px, -70px) scale(1.5);
        opacity: 0;
    }
}

/* --- Dot Loading Animation --- */
@keyframes dot-flashing {
    0% {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.2;
    }
}

.dots span {
    animation: dot-flashing 1.4s infinite;
    animation-fill-mode: both;
}

.dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.dots span:nth-child(3) {
    animation-delay: 0.4s;
}

/* --- Glider/Switch Animations --- */
.switch-container:not(.auto-active) .glider.popping {
    animation: gliderBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes gliderBounce {
    0% {
        transform: translateX(50px) scale(1);
    }

    25% {
        transform: translateX(50px) scale(1.15);
    }

    50% {
        transform: translateX(50px) scale(0.95);
    }

    100% {
        transform: translateX(50px) scale(1);
    }
}

@keyframes springSlideToAuto {
    0% {
        transform: translateX(50px) scale(1);
    }

    30% {
        transform: translateX(20px) scale(1, 1.3);
    }

    60% {
        transform: translateX(-13px) scale(0.98);
    }

    100% {
        transform: translateX(0px) scale(1);
    }
}

@keyframes springSlideToPick {
    0% {
        transform: translateX(0px) scale(1);
    }

    30% {
        transform: translateX(30px) scale(1, 1.3);
    }

    60% {
        transform: translateX(63px) scale(0.98);
    }

    100% {
        transform: translateX(50px) scale(1);
    }
}

.switch-container:not(.auto-active) .glider {
    transform: translateX(50px);
    animation: springSlideToPick 0.35s linear forwards;
}

.switch-container.auto-active .glider {
    transform: translateX(0px);
    animation: springSlideToAuto 0.35s linear forwards;
}

.switch-container.auto-active .glider::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 15px var(--text-primary);
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.5;
    }
}

/* --- History Grid Animations --- */
.hist-ball.animate-in {
    animation: staggerFadeUp 0.5s var(--ease-spring) forwards;
}

.hist-ball.latest.animate-in {
    animation: popLatest 0.6s var(--ease-spring) forwards;
}

@keyframes staggerFadeUp {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.8);
    }

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

@keyframes popLatest {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        transform: scale(1.15);
    }

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

/* --- Lobby Animations --- */
#stage-lobby.open .lobby-card {
    animation: lobbyEnter 0.5s var(--ease-spring) forwards;
}

#stage-lobby.exiting .lobby-card {
    animation: lobbyExit 0.4s var(--ease-smooth) forwards;
}

@keyframes lobbyEnter {
    0% {
        transform: scale(0.9) translateY(20px);
        opacity: 0;
    }

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

@keyframes lobbyExit {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    100% {
        transform: scale(0.9) translateY(20px);
        opacity: 0;
    }
}

/* --- Player Badge Animations --- */
.player-badge.winner-glow {
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {

    0%,
    100% {
        box-shadow: 0 0 20px var(--accent-primary, var(--toggle-active, rgba(50, 215, 75, 0.6)));
    }

    50% {
        box-shadow: 0 0 40px var(--accent-primary, var(--toggle-active, rgba(50, 215, 75, 0.9)));
    }
}

/* --- Winner Reveal Animation --- */
.animate-winner {
    animation: winnerReveal 6s forwards cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes winnerReveal {
    0% {
        transform: scale(0.5) translateY(40px);
        opacity: 0;
        filter: blur(20px);
    }

    15% {
        transform: scale(1.1) translateY(0);
        opacity: 1;
        filter: blur(0);
    }

    80% {
        transform: scale(1) translateY(0);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform: scale(1.2) translateY(-40px);
        opacity: 0;
        filter: blur(30px);
    }
}

/* --- Dropdown Animations --- */
.player-action-dropdown {
    animation: dropdownEnter 0.2s var(--ease-spring);
}

@keyframes dropdownEnter {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

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

/* --- Spin Animation --- */
@keyframes loto-spin {
    from {
        transform: rotate(0deg);
    }

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

#btn-refresh-rooms.is-loading i {
    animation: loto-spin 1s linear infinite;
    display: inline-block;
}

/* --- Marquee Animation --- */
@keyframes seamlessLoop {
    0%, 20% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50%));
    }
}

#theme-custom-select .select-trigger .long-text {
    animation: seamlessLoop 6s linear infinite;
}

#theme-custom-select .select-option .long-text {
    animation: seamlessLoop 6s linear infinite;
}