/* MONUM Animate — Frontend base styles v1.2.3 */

/*
 * FOUC prevention strategy (v1.2.2):
 *
 * 1. Inline <style id="monum-anim-critical"> in wp_head (priority 1)
 *    uses opacity:0 !important — hides elements from first paint.
 *    This beats Kadence inline style="opacity:1" thanks to !important.
 *
 * 2. Opacity guardian MutationObserver (priority 2) catches any Kadence
 *    attempts to set opacity:1 inline before GSAP takes over.
 *
 * 3. GSAP init: gsap.set(el, {opacity:0}) sets inline style WITHOUT !important.
 *    Then the critical <style> is removed — GSAP now owns opacity via inline.
 *
 * 4. ScrollTrigger fires → gsap.to(el, {opacity:1}) — inline style wins over
 *    this stylesheet because inline specificity > external stylesheet.
 *
 * THIS FILE must NOT use !important on opacity — it would permanently block
 * GSAP from animating opacity above 0 (stylesheet !important > inline no-!important).
 * The !important lives ONLY in the critical inline <style> which is removed by JS.
 */

/* Data-attribute driven animations — performance hints only */
[data-monum-anim]:not([data-monum-anim="none"]):not([data-monum-anim="hoverOnly"]):not([data-monum-anim="parallax"]):not([data-monum-text]):not(.monum-anim-done) {
    will-change: transform, opacity;
}

/* CSS-class driven elements — performance hints only */
[class*="monum-fade-"]:not(.monum-anim-done),
.monum-zoom-in:not(.monum-anim-done),
.monum-rotate-in:not(.monum-anim-done),
.monum-blur-in:not(.monum-anim-done),
.monum-flip-up:not(.monum-anim-done),
.monum-slide-up:not(.monum-anim-done),
.monum-clip-reveal:not(.monum-anim-done) {
    will-change: transform, opacity;
}

/* Stagger: performance hints for children */
.monum-stagger:not([data-monum-anim]) > *:not(.monum-anim-done) {
    will-change: transform, opacity;
}

/* Text animation: parent stays visible, individual units hidden via inline style by JS */
[data-monum-text] .monum-anim-unit {
    will-change: transform, opacity;
}

/* Hover transitions base */
[data-monum-hover],
[class*="monum-hover-"] {
    transition: box-shadow 0.3s ease;
    will-change: transform;
}

/* Parallax performance hint */
[data-monum-parallax="1"],
.monum-parallax {
    will-change: transform;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-monum-anim],
    [class*="monum-fade-"],
    [class*="monum-zoom"],
    [class*="monum-rotate"],
    [class*="monum-blur"],
    [class*="monum-flip"],
    [class*="monum-slide"],
    [class*="monum-clip"],
    .monum-stagger > *,
    .monum-anim-unit {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        animation: none !important;
        will-change: auto !important;
    }
}