/**
 * SellafuGas® Animation Preset System
 * Ultra-smooth, GPU-accelerated entrance and micro-animations
 * Easing: Custom spring-bezier for natural physical motion
 */

:root {
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --anim-duration-base: 700ms;
}

/* ==========================================================================
   1. Base Entrance Animation Initial States & Transitions
   ========================================================================== */

[data-animate] {
    opacity: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transition-property: transform, opacity, filter;
    transition-duration: var(--anim-duration-base);
    transition-timing-function: var(--ease-spring);
}

/* Fade Up (Default entrance) */
[data-animate="fade-up"] {
    transform: translate3d(0, 32px, 0);
}

/* Fade Down */
[data-animate="fade-down"] {
    transform: translate3d(0, -32px, 0);
}

/* Fade Left (Entering from Right) */
[data-animate="fade-left"] {
    transform: translate3d(36px, 0, 0);
}

/* Fade Right (Entering from Left) */
[data-animate="fade-right"] {
    transform: translate3d(-36px, 0, 0);
}

/* Fade Scale / Zoom In */
[data-animate="fade-scale"],
[data-animate="zoom-in"] {
    transform: scale(0.92) translate3d(0, 16px, 0);
}

/* Fade In Simple */
[data-animate="fade-in"] {
    transform: translate3d(0, 0, 0);
}

/* Flip Up (3D Perspective Card Tilt) */
[data-animate="flip-up"] {
    transform: perspective(1000px) rotateX(14deg) translate3d(0, 24px, 0);
    transform-origin: center bottom;
}

/* Glow Entrance */
[data-animate="glow-entrance"] {
    transform: scale(0.94);
    filter: drop-shadow(0 0 0 rgba(16, 185, 129, 0));
}

/* ==========================================================================
   2. Active / Visible States
   ========================================================================== */

[data-animate].is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg) !important;
}

[data-animate="flip-up"].is-visible {
    transform: perspective(1000px) rotateX(0deg) translate3d(0, 0, 0) !important;
}

[data-animate="glow-entrance"].is-visible {
    filter: drop-shadow(0 10px 25px rgba(16, 185, 129, 0.25)) !important;
}

/* ==========================================================================
   3. Transition Delay Utilities
   ========================================================================== */

[data-delay="50"]   { transition-delay: 50ms; }
[data-delay="100"]  { transition-delay: 100ms; }
[data-delay="150"]  { transition-delay: 150ms; }
[data-delay="200"]  { transition-delay: 200ms; }
[data-delay="250"]  { transition-delay: 250ms; }
[data-delay="300"]  { transition-delay: 300ms; }
[data-delay="350"]  { transition-delay: 350ms; }
[data-delay="400"]  { transition-delay: 400ms; }
[data-delay="450"]  { transition-delay: 450ms; }
[data-delay="500"]  { transition-delay: 500ms; }
[data-delay="600"]  { transition-delay: 600ms; }
[data-delay="700"]  { transition-delay: 700ms; }
[data-delay="800"]  { transition-delay: 800ms; }
[data-delay="1000"] { transition-delay: 1000ms; }

/* Duration modifiers */
[data-duration="fast"]   { transition-duration: 400ms; }
[data-duration="normal"] { transition-duration: 700ms; }
[data-duration="slow"]   { transition-duration: 1000ms; }
[data-duration="gentle"] { transition-duration: 1300ms; }

/* ==========================================================================
   4. Stagger Container System
   Auto-increments child delays for grids, lists and card decks
   ========================================================================== */

[data-stagger] > * {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    will-change: transform, opacity;
    transition: transform var(--anim-duration-base) var(--ease-spring), 
                opacity var(--anim-duration-base) var(--ease-spring);
}

[data-stagger].is-visible > *:nth-child(1)  { transition-delay: 40ms;  opacity: 1; transform: translate3d(0, 0, 0); }
[data-stagger].is-visible > *:nth-child(2)  { transition-delay: 120ms; opacity: 1; transform: translate3d(0, 0, 0); }
[data-stagger].is-visible > *:nth-child(3)  { transition-delay: 200ms; opacity: 1; transform: translate3d(0, 0, 0); }
[data-stagger].is-visible > *:nth-child(4)  { transition-delay: 280ms; opacity: 1; transform: translate3d(0, 0, 0); }
[data-stagger].is-visible > *:nth-child(5)  { transition-delay: 360ms; opacity: 1; transform: translate3d(0, 0, 0); }
[data-stagger].is-visible > *:nth-child(6)  { transition-delay: 440ms; opacity: 1; transform: translate3d(0, 0, 0); }
[data-stagger].is-visible > *:nth-child(7)  { transition-delay: 520ms; opacity: 1; transform: translate3d(0, 0, 0); }
[data-stagger].is-visible > *:nth-child(8)  { transition-delay: 600ms; opacity: 1; transform: translate3d(0, 0, 0); }
[data-stagger].is-visible > *:nth-child(9)  { transition-delay: 680ms; opacity: 1; transform: translate3d(0, 0, 0); }
[data-stagger].is-visible > *:nth-child(10) { transition-delay: 760ms; opacity: 1; transform: translate3d(0, 0, 0); }
[data-stagger].is-visible > *:nth-child(11) { transition-delay: 840ms; opacity: 1; transform: translate3d(0, 0, 0); }
[data-stagger].is-visible > *:nth-child(12) { transition-delay: 920ms; opacity: 1; transform: translate3d(0, 0, 0); }

/* ==========================================================================
   5. Interactive Micro-Animations & Hover Presets
   ========================================================================== */

/* Hover Lift Card */
.hover-lift {
    transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-spring), border-color 0.35s ease;
}
.hover-lift:hover {
    transform: translate3d(0, -6px, 0);
}

/* Hover Scale */
.hover-scale {
    transition: transform 0.3s var(--ease-spring);
}
.hover-scale:hover {
    transform: scale(1.04);
}

/* Neon Emerald Glow Hover */
.hover-glow-emerald:hover {
    box-shadow: 0 10px 30px -5px rgba(16, 185, 129, 0.45);
    border-color: rgba(16, 185, 129, 0.6) !important;
}

/* Neon Sky Glow Hover */
.hover-glow-sky:hover {
    box-shadow: 0 10px 30px -5px rgba(56, 189, 248, 0.45);
    border-color: rgba(56, 189, 248, 0.6) !important;
}

/* Neon Amber Glow Hover */
.hover-glow-amber:hover {
    box-shadow: 0 10px 30px -5px rgba(245, 158, 11, 0.45);
    border-color: rgba(245, 158, 11, 0.6) !important;
}

/* Floating Slow Continuous Keyframe */
@keyframes floatSlow {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -10px, 0);
    }
}
.animate-float-slow {
    animation: floatSlow 5s ease-in-out infinite;
}

/* Shimmer Light Reflection Effect */
@keyframes shimmerLight {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}
.animate-shimmer {
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: shimmerLight 3.5s infinite;
}

/* Pulse Beacon Glow */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 15px -2px rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 0 35px 4px rgba(16, 185, 129, 0.7);
    }
}
.animate-glow-pulse {
    animation: pulseGlow 3s ease-in-out infinite;
}

/* ==========================================================================
   6. Accessibility: Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    [data-animate],
    [data-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}