/* ==========================================================================
   SCROLL AND HOVER ANIMATIONS SYSTEM
   ========================================================================== */

/* Keyframe animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Scroll trigger animation classes */
.reveal-on-scroll {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.slide-up {
    transform: translateY(30px);
}

.reveal-on-scroll.slide-left {
    transform: translateX(-30px);
}

.reveal-on-scroll.slide-right {
    transform: translateX(30px);
}

.reveal-on-scroll.zoom-in {
    transform: scale(0.95);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Background floating scroll bubbles */
.scroll-bubble {
    position: absolute;
    border-radius: 50%;
    background: var(--bubble-color);
    box-shadow: 0 0 15px var(--bubble-glow);
    z-index: 1;
    pointer-events: none;
    animation: floatUp 3s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes floatUp {
    0% {
        transform: translate(0, 0) scale(0.3);
        opacity: 0;
    }
    15% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.2;
    }
    100% {
        transform: translate(var(--dx), var(--dy)) scale(1.1);
        opacity: 0;
    }
}