/* ==========================================================================
   Animations & Reveal Effects
   ========================================================================== */

/* ── Scroll Reveal ── */
.reveal {
    opacity: 0; transform: translateY(40px); filter: blur(4px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

/* ── Directional ── */
.slide-left { transform: translateX(-40px); }
.slide-left.visible { transform: translateX(0); }

.slide-right { transform: translateX(40px); }
.slide-right.visible { transform: translateX(0); }

.scale-up { transform: scale(0.95); }
.scale-up.visible { transform: scale(1); }

.fade-in { opacity: 0; }
.fade-in.visible { opacity: 1; }

/* ── Stagger Delays ── */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

/* ── Keyframe Animations ── */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px var(--accent-glow); }
    50% { box-shadow: 0 0 20px var(--accent-glow-strong); }
}

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

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

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}