/* ========================================
   ANIMATIONS & EFFECTS
   ======================================== */

/* Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Cursor Glow Effect */
.cursor-glow {
    mix-blend-mode: screen;
}

/* Floating Animation */
@keyframes float {

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

    50% {
        transform: translateY(-20px);
    }
}

/* Pulse Animation */
@keyframes pulse {

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

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

/* Blink Animation */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Bounce Animation */
@keyframes bounce {

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

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

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

    to {
        opacity: 1;
    }
}

/* Zoom In Animation */
@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Slide In From Left */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

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

/* Slide In From Right */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

/* Rotate Animation */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

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

/* Glow Pulse */
@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(0, 217, 255, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 217, 255, 0.8);
    }
}

/* Smooth Transitions */
.smooth-transition {
    transition: all var(--transition-fast);
}

.smooth-transition-medium {
    transition: all var(--transition-medium);
}

.smooth-transition-slow {
    transition: all var(--transition-slow);
}