/* ==========================================================================
   NX BLUR REVEAL — BASE & MODIFIERS (BEM STYLE)
   ========================================================================== */

:root {
    --nx-blur-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --nx-blur-dur: 0.75s;
    --nx-blur-amount: 5px;
    --nx-blur-shift: 18px;
    --nx-blur-stagger: 0.07s;
}

/* Base Class untuk Item Tunggal */
.nx-reveal {
    opacity: 0;
    filter: blur(var(--nx-blur-amount));
    transform: translate3d(0, var(--nx-blur-shift), 0);
    transition:
        opacity var(--nx-blur-dur) var(--nx-blur-ease),
        transform var(--nx-blur-dur) var(--nx-blur-ease),
        filter var(--nx-blur-dur) var(--nx-blur-ease);
    will-change: opacity, transform, filter;
    backface-visibility: hidden;
}

/* Modifier Classes (Dipadukan dengan nx-reveal) */
.nx-reveal.cinematic,
.nx-reveal-parent.cinematic > * {
    --nx-blur-amount: 8px;
    --nx-blur-shift: 24px;
    --nx-blur-dur: 0.95s;
}

.nx-reveal.soft,
.nx-reveal-parent.soft > * {
    --nx-blur-amount: 3px;
    --nx-blur-shift: 12px;
    --nx-blur-dur: 0.65s;
}

.nx-reveal.clean,
.nx-reveal-parent.clean > * {
    --nx-blur-amount: 0px;
    --nx-blur-shift: 14px;
    --nx-blur-dur: 0.6s;
}

/* State Aktif Single Item */
.nx-reveal.nx-activated {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   PARENT CONTAINER (Untuk Efek Bertingkat / Stagger)
   ========================================================================== */

.nx-reveal-parent > * {
    opacity: 0;
    filter: blur(var(--nx-blur-amount));
    transform: translate3d(0, var(--nx-blur-shift), 0);
    transition:
        opacity var(--nx-blur-dur) var(--nx-blur-ease),
        transform var(--nx-blur-dur) var(--nx-blur-ease),
        filter var(--nx-blur-dur) var(--nx-blur-ease);
    will-change: opacity, transform, filter;
    backface-visibility: hidden;
}

.nx-reveal-parent.nx-activated > *:nth-child(1){ transition-delay: calc(var(--nx-blur-stagger) * 0); }
.nx-reveal-parent.nx-activated > *:nth-child(2){ transition-delay: calc(var(--nx-blur-stagger) * 1); }
.nx-reveal-parent.nx-activated > *:nth-child(3){ transition-delay: calc(var(--nx-blur-stagger) * 2); }
.nx-reveal-parent.nx-activated > *:nth-child(4){ transition-delay: calc(var(--nx-blur-stagger) * 3); }
.nx-reveal-parent.nx-activated > *:nth-child(5){ transition-delay: calc(var(--nx-blur-stagger) * 4); }
.nx-reveal-parent.nx-activated > *:nth-child(6){ transition-delay: calc(var(--nx-blur-stagger) * 5); }
.nx-reveal-parent.nx-activated > *:nth-child(7){ transition-delay: calc(var(--nx-blur-stagger) * 6); }
.nx-reveal-parent.nx-activated > *:nth-child(8){ transition-delay: calc(var(--nx-blur-stagger) * 7); }
.nx-reveal-parent.nx-activated > *:nth-child(9){ transition-delay: calc(var(--nx-blur-stagger) * 8); }
.nx-reveal-parent.nx-activated > *:nth-child(10){ transition-delay: calc(var(--nx-blur-stagger) * 9); }

.nx-reveal-parent.nx-activated > * {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

/* Editor & Accessibility */
body.elementor-editor-active .nx-reveal,
body.elementor-editor-active .nx-reveal-parent > * {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
    .nx-reveal,
    .nx-reveal-parent > * {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
        transition-delay: 0s !important;
    }
}