/* Animations for Premium Vibe */

/* Intersection Observer Classes */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-delayed-1 { transition-delay: 0.1s; }
.fade-in-delayed-2 { transition-delay: 0.2s; }
.fade-in-delayed-3 { transition-delay: 0.3s; }

/* Float Animation for UI Elements */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Glow Pulse for Accent Elements */
@keyframes glowPulse {
    0% { box-shadow: 0 0 10px var(--accent-glow); }
    50% { box-shadow: 0 0 25px var(--accent-glow); }
    100% { box-shadow: 0 0 10px var(--accent-glow); }
}

.glow-pulse {
    animation: glowPulse 3s infinite;
}

/* Slide in from right (for modals/drawers) */
@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Gradient Text Shift */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.gradient-text-animated {
    background: linear-gradient(270deg, var(--accent-primary), var(--accent-tertiary), var(--accent-primary));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 5s ease infinite;
}

/* Tech Grid Background */
.tech-grid {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}