/* 
   ==========================================================================
   SMARTSTEP AUTOMATION - ANIMATIONS & TRANSITIONS
   ==========================================================================
   Luxury Motion Design System
*/

/* 1. Scroll-Triggered Reveal Effects */
.reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition:
        opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    visibility: hidden;
    will-change: opacity, transform;
}

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

/* Stagger Helpers */
.reveal-delay-1 {
    transition-delay: 0.1s;
}

.reveal-delay-2 {
    transition-delay: 0.2s;
}

.reveal-delay-3 {
    transition-delay: 0.3s;
}

.reveal-delay-4 {
    transition-delay: 0.4s;
}

/* 2. Keyframes for Interactive Elements */

/* Gold Pulse - Used for Status Indicators and Prime CTAs */
@keyframes gold-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(224, 204, 167, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(224, 204, 167, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(224, 204, 167, 0);
    }
}

.pulse-gold {
    animation: gold-pulse 2s infinite;
}

/* Float - Subtle breathing effect for floating UI */
@keyframes float {

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

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

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

/* Glass Shine - Periodic highlight on cards */
@keyframes glass-shine {
    0% {
        left: -100%;
    }

    20% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

.shine-trigger:hover::after {
    animation: glass-shine 1s ease-in-out;
}

/* 3. Specialized Reveal Variations */

/* Left-to-Right Side Slide */
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

/* Right-to-Left Side Slide */
.reveal-right {
    opacity: 0;
    transform: translateX(40px);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* Glass Frost Reveal (Quick Blur Fade) */
.reveal-frost {
    opacity: 0;
    backdrop-filter: blur(20px);
    transition: opacity 1.2s ease, backdrop-filter 1.2s ease;
}

.reveal-frost.active {
    opacity: 1;
    backdrop-filter: blur(0px);
}

/* 4. Utility Animations */
.spin-slow {
    animation: spin 8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

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

/* 5. Mobile Optimized Transitions */
@media (max-width: 768px) {
    .reveal {
        transition-duration: 0.6s;
        /* Slightly faster for mobile snappiness */
        transform: translateY(20px);
        /* Reduced movement */
    }
}