/* ==========================================================================
   NX BLUR REVEAL — XPENG PREMIUM MOTION
   Elementor v4 Atomic
   ========================================================================== */

:root{
    /* Motion */
    --nx-blur-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --nx-blur-dur: 1s;

    /* Reveal effect */
    --nx-blur-amount: 7px;
    --nx-blur-shift: 24px;

    /* Stagger rhythm */
    --nx-blur-stagger: 0.09s;
}


/* ==========================================================================
   METHOD A
   Parent Container / Div Block
   Semua direct child akan muncul secara staggered
   ========================================================================== */

.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;
}


/* Stagger 1–10 */

.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);
}


/* Activated state */

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

    transform:
        translate3d(
            0,
            0,
            0
        );
}


/* ==========================================================================
   METHOD B
   Single Item / Div Block
   ========================================================================== */

.nx-reveal-item{
    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-item.nx-activated{
    opacity: 1;
    filter: blur(0);

    transform:
        translate3d(
            0,
            0,
            0
        );
}


/* ==========================================================================
   OPTIONAL VARIANTS
   ========================================================================== */

/* Reveal lebih lembut untuk body text */

.nx-reveal-soft{
    --nx-blur-amount: 4px;
    --nx-blur-shift: 16px;
    --nx-blur-dur: 0.9s;
}


/* Reveal lebih cinematic untuk heading besar */

.nx-reveal-cinematic{
    --nx-blur-amount: 10px;
    --nx-blur-shift: 32px;
    --nx-blur-dur: 1.15s;
}


/* Reveal tanpa blur, cocok untuk card atau button */

.nx-reveal-clean{
    --nx-blur-amount: 0px;
    --nx-blur-shift: 20px;
    --nx-blur-dur: 0.85s;
}


/* ==========================================================================
   ELEMENTOR EDITOR CANVAS OVERRIDE
   ========================================================================== */

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


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce){

    .nx-reveal-parent > *,
    .nx-reveal-item{
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
        transition-delay: 0s !important;
    }

}