/**
 * GSAP & Custom Animations
 */

/* Fade Up Reveal */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up {
    animation: fadeUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Gradient Animation */
@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.gradient-animated {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

/* Pulse Glow */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 217, 255, 0.6);
    }
}

.pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite;
}

/* Float Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.float {
    animation: float 6s ease-in-out infinite;
}

/* Rotate Slow */
@keyframes rotateSlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate-slow {
    animation: rotateSlow 30s linear infinite;
}

/* Shimmer Effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 3s infinite;
}

/* Smooth Scroll Snap */
.scroll-snap-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

.scroll-snap-item {
    scroll-snap-align: start;
    min-height: 100vh;
}

/* Custom Cursor (Optional) */
.custom-cursor {
    cursor: none;
}

.custom-cursor-dot {
    width: 8px;
    height: 8px;
    background: var(--accent-primary);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    transition: transform 0.2s ease;
}

.custom-cursor-outline {
    width: 40px;
    height: 40px;
    border: 2px solid var(--accent-primary);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 99998;
    transition: all 0.15s ease-out;
}
