/* ============================================
   MOTION — SharpWebP
   Animations, transitions, scroll reveals
   ============================================ */

/* === Scroll Reveal === */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Staggered delays */
.reveal-delay-1 { transition-delay: 60ms; }
.reveal-delay-2 { transition-delay: 120ms; }
.reveal-delay-3 { transition-delay: 180ms; }
.reveal-delay-4 { transition-delay: 240ms; }
.reveal-delay-5 { transition-delay: 300ms; }
.reveal-delay-6 { transition-delay: 360ms; }
.reveal-delay-7 { transition-delay: 420ms; }
.reveal-delay-8 { transition-delay: 480ms; }

/* === Hover Micro-interactions === */
.hover-lift {
    transition: transform 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

.hover-glow {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(201, 169, 110, 0.1);
    border-color: rgba(201, 169, 110, 0.25);
}

/* === Gold Glow Pulse (CTAs) === */
@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(201, 169, 110, 0); }
    50% { box-shadow: 0 0 20px rgba(201, 169, 110, 0.15); }
}

.glow-pulse {
    animation: glow-pulse 3s ease-in-out infinite;
}

/* === Fade In === */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fade-in 0.5s ease forwards;
}

/* === Slide Up === */
@keyframes slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-up {
    animation: slide-up 0.5s ease forwards;
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .hover-lift,
    .hover-glow,
    .glow-pulse,
    .fade-in,
    .slide-up {
        animation: none;
        transition: none;
        opacity: 1;
        transform: none;
    }

    .bg-orb {
        animation: none;
    }
}