/* ==========================================================================
   ANIMATION.CSS - 60 FPS ANIMATIONS & EFFECTS
   ========================================================================== */

/* Keyframe Animations */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spinDisc {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-12px); }
    60% { transform: translateX(-50%) translateY(-6px); }
}

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.floating {
    animation: floatY 3.5s ease-in-out infinite;
}

/* Scroll Reveal Base Classes */
.reveal-fade {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

.reveal-slide-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.reveal-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.reveal-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.reveal-zoom {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

/* Active State Triggered by IntersectionObserver */
.active.reveal-fade { opacity: 1; }
.active.reveal-slide-up { opacity: 1; transform: translateY(0); }
.active.reveal-slide-left { opacity: 1; transform: translateX(0); }
.active.reveal-slide-right { opacity: 1; transform: translateX(0); }
.active.reveal-zoom { opacity: 1; transform: scale(1); }

/* Canvas Particle Overlay */
#effects-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: var(--z-effects);
}