/* Animations */

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

    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.8s ease forwards;
}

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

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

.slide-up {
    opacity: 0;
    /* Hidden initially for IntersectionObserver */
}

.slide-up.visible {
    animation: slideUp 0.6s ease forwards;
}

/* Hero Bubbles */
@keyframes float {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(10px, -20px);
    }

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

.bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    backdrop-filter: blur(2px);
    animation: float 6s infinite ease-in-out;
    z-index: 0;
}

/* UI Feedback */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

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

.btn-pulse:active {
    animation: pulse 0.2s linear;
}

/* Toast Notification Animation */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

.toast {
    animation: slideInRight 0.3s ease forwards;
}

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

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 180, 216, 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}