/**
 * GB-Motion - Styles
 * Performance optimizations, fallbacks, and accessibility
 * 
 * @version 2.2.3
 * @author JokersLab
 */

/* =========================================================================
   INITIAL STATE - Hide elements until GSAP takes over
   Uses opacity which works seamlessly with GSAP animations
   ========================================================================= */

[data-motion-entrance]:not(.motion-init),
[data-motion-parallax-y]:not(.motion-init),
[data-motion-parallax-x]:not(.motion-init),
[data-motion-zoom]:not(.motion-init),
[class*="anim-"]:not(.motion-init):not([class*="anim-delay"]):not([class*="anim-offset"]):not([class*="anim-fast"]):not([class*="anim-slow"]):not([class*="anim-repeat"]):not([class*="anim-stagger"]) {
    opacity: 0 !important;
}

/* Stagger children - hide until animation */
.anim-stagger > *:not(.motion-init) {
    opacity: 0 !important;
}

/* =========================================================================
   GPU ACCELERATION
   ========================================================================= */

[data-motion-parallax-y],
[data-motion-parallax-x],
[data-motion-zoom],
[data-motion-entrance],
[class*="anim-fade"],
[class*="anim-zoom"],
[class*="anim-rise"],
[class*="anim-slide"],
[class*="anim-scale"],
[class*="anim-flip"],
[class*="anim-rotate"],
[class*="anim-blur"],
[class*="anim-clip"],
[class*="anim-bounce"],
[class*="anim-elastic"],
[class*="anim-parallax"] {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform, opacity;
}

/* =========================================================================
   LAYOUT HELPERS
   ========================================================================= */

[data-motion-parallax-y],
[data-motion-parallax-x],
[class*="anim-parallax-y"],
[class*="anim-parallax-x"] {
    position: relative;
}

[data-motion-zoom],
.anim-zoom-parallax {
    overflow: hidden;
}

/* =========================================================================
   ACCESSIBILITY - Reduced Motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    [data-motion-parallax-y],
    [data-motion-parallax-x],
    [data-motion-zoom],
    [data-motion-entrance],
    [class*="anim-"],
    .anim-stagger > * {
        visibility: visible !important;
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        clip-path: none !important;
        filter: none !important;
        will-change: auto !important;
    }
}

/* =========================================================================
   ACCESSIBILITY - Focus Styles
   ========================================================================= */

[data-motion-entrance]:focus-visible,
[data-motion-parallax-y]:focus-visible,
[data-motion-parallax-x]:focus-visible,
[data-motion-zoom]:focus-visible,
[class*="anim-"]:focus-visible {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* =========================================================================
   PRINT
   ========================================================================= */

@media print {
    [data-motion-entrance],
    [data-motion-parallax-y],
    [data-motion-parallax-x],
    [data-motion-zoom],
    [class*="anim-"],
    .anim-stagger > * {
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        filter: none !important;
    }
}

/* =========================================================================
   NO-JS FALLBACK
   ========================================================================= */

.no-js [data-motion-entrance],
.no-js [data-motion-parallax-y],
.no-js [data-motion-parallax-x],
.no-js [data-motion-zoom],
.no-js [class*="anim-"],
.no-js .anim-stagger > * {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
}