/* =========================================================
   RATAVIE MOTION SYSTEM
   Version: 1.2

   IMPORTANT
   ---------------------------------------------------------
   Motion dùng transform nên ưu tiên gắn vào WRAPPER.

   Không gắn Ratavie transform animation trực tiếp vào
   element đang dùng Elementor:
   - Hover Transform
   - Motion Effects
   - Scale
   - Translate
   - Rotate
   - Entrance Animation

   AVAILABLE
   ---------------------------------------------------------
   ratavie-reveal-up
   ratavie-reveal-fade
   ratavie-image-reveal
   ratavie-scale-reveal

   ratavie-stagger
   ratavie-stagger-motion

   ratavie-parallax
   ratavie-parallax-slow
   ratavie-parallax-medium
   ratavie-parallax-fast

   Elementor Loop Grid:
   ratavie-loop-fadeup
   ratavie-loop-stagger-left
   ratavie-loop-card-motion

   Delay:
   ratavie-delay-1
   ratavie-delay-2
   ratavie-delay-3
   ratavie-delay-4
   ratavie-delay-5
========================================================= */


/* =========================================================
   00. GLOBAL VARIABLES
========================================================= */

:root {

    --ratavie-duration: .9s;

    --ratavie-ease:
        cubic-bezier(.22, .8, .2, 1);

    --ratavie-distance:
        42px;

    --ratavie-stagger-delay:
        90ms;

    --ratavie-loop-delay:
        120ms;

}


/* =========================================================
   01. REVEAL UP

   Nên gắn vào wrapper.
========================================================= */

.ratavie-reveal-up {

    opacity: 0;

    transform:
        translate3d(
            0,
            var(--ratavie-distance),
            0
        );

    transition:
        opacity
        var(--ratavie-duration)
        ease,

        transform
        var(--ratavie-duration)
        var(--ratavie-ease);

    will-change:
        opacity,
        transform;
}


.ratavie-reveal-up.is-visible {

    opacity: 1;

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


/* =========================================================
   02. REVEAL FADE

   Không dùng transform.
   An toàn hơn với Elementor.
========================================================= */

.ratavie-reveal-fade {

    opacity: 0;

    transition:
        opacity
        1s
        ease;

    will-change:
        opacity;
}


.ratavie-reveal-fade.is-visible {

    opacity: 1;
}


/* =========================================================
   03. IMAGE REVEAL

   Khuyên dùng:

   Container
   class: ratavie-image-reveal

   └── Image Widget

   Không gắn trực tiếp vào Image Widget nếu Image Widget
   đang có Elementor Transform/Hover.
========================================================= */

.ratavie-image-reveal {

    position: relative;

    opacity: 0;

    overflow: hidden;

    clip-path:
        inset(
            8%
            0
            8%
            0
        );

    transform:
        translate3d(
            0,
            24px,
            0
        );

    transition:
        opacity
        .9s
        ease,

        clip-path
        1.2s
        var(--ratavie-ease),

        transform
        1.1s
        var(--ratavie-ease);

    will-change:
        opacity,
        clip-path,
        transform;
}


/* Image bên trong */

.ratavie-image-reveal img {

    transform:
        scale(1.08);

    transition:
        transform
        1.4s
        var(--ratavie-ease);

    will-change:
        transform;
}


/* Visible */

.ratavie-image-reveal.is-visible {

    opacity: 1;

    clip-path:
        inset(
            0
            0
            0
            0
        );

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


.ratavie-image-reveal.is-visible img {

    transform:
        scale(1);
}


/* =========================================================
   04. SCALE REVEAL

   Nên gắn vào wrapper.
========================================================= */

.ratavie-scale-reveal {

    opacity: 0;

    transform:
        scale(.95);

    transition:
        opacity
        .9s
        ease,

        transform
        1s
        var(--ratavie-ease);

    will-change:
        opacity,
        transform;
}


.ratavie-scale-reveal.is-visible {

    opacity: 1;

    transform:
        scale(1);
}


/* =========================================================
   05. NORMAL STAGGER - SAFE VERSION

   Cấu trúc:

   Parent
   class: ratavie-stagger

   ├── Child
   │   └── Wrapper
   │       class: ratavie-stagger-motion
   │
   ├── Child
   │   └── Wrapper
   │       class: ratavie-stagger-motion

   JS hiện tại gán --ratavie-index cho Child.
   CSS Variable sẽ inherit xuống wrapper.
========================================================= */

.ratavie-stagger
.ratavie-stagger-motion {

    opacity: 0;

    transform:
        translate3d(
            0,
            30px,
            0
        );

    transition:
        opacity
        .8s
        ease,

        transform
        .9s
        var(--ratavie-ease);

    transition-delay:
        calc(
            var(--ratavie-index, 0)
            *
            var(--ratavie-stagger-delay)
        );

    will-change:
        opacity,
        transform;
}


.ratavie-stagger.is-visible
.ratavie-stagger-motion {

    opacity: 1;

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


/* =========================================================
   06. PARALLAX

   Nên dùng trên wrapper riêng.
========================================================= */

.ratavie-parallax {

    --ratavie-parallax-speed:
        .10;

    --ratavie-parallax-y:
        0px;

    transform:
        translate3d(
            0,
            var(--ratavie-parallax-y),
            0
        );

    will-change:
        transform;
}


/* Slow */

.ratavie-parallax-slow {

    --ratavie-parallax-speed:
        .06;
}


/* Medium */

.ratavie-parallax-medium {

    --ratavie-parallax-speed:
        .10;
}


/* Fast */

.ratavie-parallax-fast {

    --ratavie-parallax-speed:
        .16;
}


/* =========================================================
   07. ELEMENTOR LOOP GRID
   FADE UP
   LEFT -> RIGHT

   Loop Grid:
   class: ratavie-loop-fadeup

   Trong Loop Item:

   Wrapper animation:
   class: ratavie-loop-card-motion

   Card thật nằm bên trong wrapper animation.

   Ví dụ:

   Loop Item
   └── Motion Wrapper
       class: ratavie-loop-card-motion

       └── Service Card
           Elementor Hover / Transform
========================================================= */


/* ---------------------------------------------------------
   Initial state
--------------------------------------------------------- */

.ratavie-loop-fadeup
.e-loop-item
.ratavie-loop-card-motion {

    opacity: 0;

    transform:
        translate3d(
            0,
            32px,
            0
        );

    transition:
        opacity
        .8s
        ease,

        transform
        .95s
        var(--ratavie-ease);

    will-change:
        opacity,
        transform;
}


/* ---------------------------------------------------------
   DESKTOP
   2 COLUMNS

   Column 1: 0ms
   Column 2: 120ms
--------------------------------------------------------- */

.ratavie-loop-fadeup
.e-loop-item:nth-child(2n + 1)
.ratavie-loop-card-motion {

    transition-delay:
        0ms;
}


.ratavie-loop-fadeup
.e-loop-item:nth-child(2n + 2)
.ratavie-loop-card-motion {

    transition-delay:
        var(--ratavie-loop-delay);
}


/* ---------------------------------------------------------
   Visible
--------------------------------------------------------- */

.ratavie-loop-fadeup.is-visible
.e-loop-item
.ratavie-loop-card-motion {

    opacity: 1;

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


/* =========================================================
   08. LOOP GRID - STAGGER LEFT

   Cũng sử dụng ratavie-loop-card-motion.
========================================================= */

.ratavie-loop-stagger-left
.e-loop-item
.ratavie-loop-card-motion {

    opacity: 0;

    transform:
        translate3d(
            -30px,
            0,
            0
        );

    transition:
        opacity
        .75s
        ease,

        transform
        .9s
        var(--ratavie-ease);

    will-change:
        opacity,
        transform;
}


/* Column trái */

.ratavie-loop-stagger-left
.e-loop-item:nth-child(2n + 1)
.ratavie-loop-card-motion {

    transition-delay:
        0ms;
}


/* Column phải */

.ratavie-loop-stagger-left
.e-loop-item:nth-child(2n + 2)
.ratavie-loop-card-motion {

    transition-delay:
        var(--ratavie-loop-delay);
}


/* Visible */

.ratavie-loop-stagger-left.is-visible
.e-loop-item
.ratavie-loop-card-motion {

    opacity: 1;

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


/* =========================================================
   09. OPTIONAL DELAYS

   Dùng với:
   ratavie-reveal-up
   ratavie-reveal-fade
   ratavie-scale-reveal
========================================================= */

.ratavie-delay-1 {

    transition-delay:
        100ms !important;
}


.ratavie-delay-2 {

    transition-delay:
        200ms !important;
}


.ratavie-delay-3 {

    transition-delay:
        300ms !important;
}


.ratavie-delay-4 {

    transition-delay:
        400ms !important;
}


.ratavie-delay-5 {

    transition-delay:
        500ms !important;
}


/* =========================================================
   10. TABLET
========================================================= */

@media (max-width: 1024px) {

    :root {

        --ratavie-loop-delay:
            100ms;
    }


    /* Reveal */

    .ratavie-reveal-up {

        --ratavie-distance:
            32px;
    }


    /* Loop Fade Up */

    .ratavie-loop-fadeup
    .e-loop-item
    .ratavie-loop-card-motion {

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


    .ratavie-loop-fadeup.is-visible
    .e-loop-item
    .ratavie-loop-card-motion {

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

}


/* =========================================================
   11. MOBILE
========================================================= */

@media (max-width: 767px) {

    :root {

        --ratavie-duration:
            .75s;

        --ratavie-distance:
            26px;

        --ratavie-stagger-delay:
            70ms;

        --ratavie-loop-delay:
            0ms;
    }


    /* =====================================================
       PARALLAX
    ===================================================== */

    .ratavie-parallax {

        --ratavie-parallax-speed:
            .04;
    }


    /* =====================================================
       LOOP FADE UP
       Mobile = 1 column
    ===================================================== */

    .ratavie-loop-fadeup
    .e-loop-item
    .ratavie-loop-card-motion {

        transform:
            translate3d(
                0,
                24px,
                0
            );

        transition:
            opacity
            .7s
            ease,

            transform
            .8s
            var(--ratavie-ease);

        transition-delay:
            0ms;
    }


    .ratavie-loop-fadeup.is-visible
    .e-loop-item
    .ratavie-loop-card-motion {

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


    /* =====================================================
       LOOP LEFT
    ===================================================== */

    .ratavie-loop-stagger-left
    .e-loop-item
    .ratavie-loop-card-motion {

        transform:
            translate3d(
                -22px,
                0,
                0
            );

        transition-delay:
            0ms;
    }


    .ratavie-loop-stagger-left.is-visible
    .e-loop-item
    .ratavie-loop-card-motion {

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

}


/* =========================================================
   12. ELEMENTOR EDITOR

   Khi edit Elementor:
   luôn hiển thị element.
========================================================= */


/* Reveal */

.elementor-editor-active
.ratavie-reveal-up,

.elementor-editor-active
.ratavie-reveal-fade,

.elementor-editor-active
.ratavie-scale-reveal,

.elementor-editor-active
.ratavie-image-reveal {

    opacity:
        1 !important;

    transform:
        none !important;

    clip-path:
        none !important;
}


/* Image */

.elementor-editor-active
.ratavie-image-reveal img {

    transform:
        none !important;
}


/* Stagger */

.elementor-editor-active
.ratavie-stagger
.ratavie-stagger-motion {

    opacity:
        1 !important;

    transform:
        none !important;
}


/* Loop */

.elementor-editor-active
.ratavie-loop-fadeup
.ratavie-loop-card-motion,

.elementor-editor-active
.ratavie-loop-stagger-left
.ratavie-loop-card-motion {

    opacity:
        1 !important;

    transform:
        none !important;
}


/* =========================================================
   13. REDUCED MOTION
========================================================= */

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


    /* Basic */

    .ratavie-reveal-up,

    .ratavie-reveal-fade,

    .ratavie-scale-reveal,

    .ratavie-image-reveal {

        opacity:
            1 !important;

        transform:
            none !important;

        clip-path:
            none !important;

        transition:
            none !important;

        animation:
            none !important;
    }


    /* Image */

    .ratavie-image-reveal img {

        transform:
            none !important;

        transition:
            none !important;
    }


    /* Stagger */

    .ratavie-stagger
    .ratavie-stagger-motion {

        opacity:
            1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }


    /* Loop */

    .ratavie-loop-fadeup
    .ratavie-loop-card-motion,

    .ratavie-loop-stagger-left
    .ratavie-loop-card-motion {

        opacity:
            1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }


    /* Parallax */

    .ratavie-parallax {

        transform:
            none !important;
    }

}