/* =========================================================
   RIDDHIX MOTION SYSTEM
   Version: 1.0
   Prefix: rx-
   ========================================================= */


/* =========================================================
   01. MOTION VARIABLES
   ========================================================= */

:root {
    --rx-motion-duration-fast: 0.35s;
    --rx-motion-duration: 0.7s;
    --rx-motion-duration-slow: 1s;

    --rx-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --rx-motion-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

    --rx-motion-distance: 40px;
}


/* =========================================================
   02. BASE REVEAL
   ========================================================= */

.rx-reveal {
    opacity: 0;
    transform: translate3d(0, var(--rx-motion-distance), 0);

    transition:
        opacity var(--rx-motion-duration) var(--rx-motion-ease),
        transform var(--rx-motion-duration) var(--rx-motion-ease);

    will-change: opacity, transform;
}

.rx-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    will-change: auto;
}


/* =========================================================
   03. REVEAL UP
   ========================================================= */

.rx-reveal-up {
    opacity: 0;
    transform: translate3d(0, 50px, 0);

    transition:
        opacity 0.8s var(--rx-motion-ease),
        transform 0.8s var(--rx-motion-ease);

    will-change: opacity, transform;
}

.rx-reveal-up.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    will-change: auto;
}


/* =========================================================
   04. REVEAL DOWN
   ========================================================= */

.rx-reveal-down {
    opacity: 0;
    transform: translate3d(0, -50px, 0);

    transition:
        opacity 0.8s var(--rx-motion-ease),
        transform 0.8s var(--rx-motion-ease);

    will-change: opacity, transform;
}

.rx-reveal-down.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    will-change: auto;
}


/* =========================================================
   05. REVEAL LEFT
   ========================================================= */

.rx-reveal-left {
    opacity: 0;
    transform: translate3d(50px, 0, 0);

    transition:
        opacity 0.8s var(--rx-motion-ease),
        transform 0.8s var(--rx-motion-ease);

    will-change: opacity, transform;
}

.rx-reveal-left.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    will-change: auto;
}


/* =========================================================
   06. REVEAL RIGHT
   ========================================================= */

.rx-reveal-right {
    opacity: 0;
    transform: translate3d(-50px, 0, 0);

    transition:
        opacity 0.8s var(--rx-motion-ease),
        transform 0.8s var(--rx-motion-ease);

    will-change: opacity, transform;
}

.rx-reveal-right.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    will-change: auto;
}


/* =========================================================
   07. SCALE REVEAL
   ========================================================= */

.rx-reveal-scale {
    opacity: 0;
    transform: scale(0.94);

    transition:
        opacity 0.8s var(--rx-motion-ease),
        transform 0.9s var(--rx-motion-ease);

    will-change: opacity, transform;
}

.rx-reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);

    will-change: auto;
}


/* =========================================================
   08. FADE ONLY
   ========================================================= */

.rx-fade {
    opacity: 0;

    transition:
        opacity 0.8s var(--rx-motion-ease);

    will-change: opacity;
}

.rx-fade.is-visible {
    opacity: 1;

    will-change: auto;
}


/* =========================================================
   09. STAGGER
   ========================================================= */

.rx-stagger > * {
    opacity: 0;
    transform: translate3d(0, 35px, 0);

    transition:
        opacity 0.7s var(--rx-motion-ease),
        transform 0.7s var(--rx-motion-ease);

    transition-delay: var(--rx-stagger-delay, 0ms);

    will-change: opacity, transform;
}

.rx-stagger.is-visible > * {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    will-change: auto;
}


/* =========================================================
   10. STAGGER ALTERNATIVE
   ========================================================= */

.rx-stagger-left > * {
    opacity: 0;
    transform: translate3d(35px, 0, 0);

    transition:
        opacity 0.7s var(--rx-motion-ease),
        transform 0.7s var(--rx-motion-ease);

    transition-delay: var(--rx-stagger-delay, 0ms);

    will-change: opacity, transform;
}

.rx-stagger-left.is-visible > * {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    will-change: auto;
}


/* =========================================================
   11. IMAGE REVEAL
   ========================================================= */

.rx-image-reveal {
    position: relative;
    overflow: hidden;
}

.rx-image-reveal img {
    opacity: 0;
    transform: scale(1.08);

    transition:
        opacity 0.8s ease,
        transform 1.2s var(--rx-motion-ease);

    will-change: opacity, transform;
}

.rx-image-reveal.is-visible img {
    opacity: 1;
    transform: scale(1);

    will-change: auto;
}


/* =========================================================
   12. IMAGE REVEAL WITH CLIP
   ========================================================= */

.rx-image-clip {
    clip-path: inset(0 100% 0 0);

    transition:
        clip-path 1s var(--rx-motion-ease);
}

.rx-image-clip.is-visible {
    clip-path: inset(0 0 0 0);
}


/* =========================================================
   13. TEXT REVEAL
   ========================================================= */

.rx-text-reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0);

    transition:
        opacity 0.75s var(--rx-motion-ease),
        transform 0.75s var(--rx-motion-ease);

    will-change: opacity, transform;
}

.rx-text-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);

    will-change: auto;
}


/* =========================================================
   14. DELAYS
   ========================================================= */

.rx-delay-1 {
    transition-delay: 100ms !important;
}

.rx-delay-2 {
    transition-delay: 200ms !important;
}

.rx-delay-3 {
    transition-delay: 300ms !important;
}

.rx-delay-4 {
    transition-delay: 400ms !important;
}

.rx-delay-5 {
    transition-delay: 500ms !important;
}

.rx-delay-6 {
    transition-delay: 600ms !important;
}


/* =========================================================
   15. DURATION UTILITIES
   ========================================================= */

.rx-duration-fast {
    transition-duration: 0.45s !important;
}

.rx-duration-normal {
    transition-duration: 0.7s !important;
}

.rx-duration-slow {
    transition-duration: 1s !important;
}


/* =========================================================
   16. BUTTON HOVER
   ========================================================= */

.rx-hover-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    transition:
        color 0.3s ease,
        gap 0.3s var(--rx-motion-ease);
}

.rx-hover-arrow:hover {
    gap: 13px;
}


/* =========================================================
   17. CARD HOVER
   ========================================================= */

.rx-hover-lift {
    transition:
        transform 0.4s var(--rx-motion-ease),
        box-shadow 0.4s ease;
}

.rx-hover-lift:hover {
    transform: translate3d(0, -8px, 0);
}


/* =========================================================
   18. IMAGE HOVER
   ========================================================= */

.rx-hover-image {
    overflow: hidden;
}

.rx-hover-image img {
    transition:
        transform 0.8s var(--rx-motion-ease);
}

.rx-hover-image:hover img {
    transform: scale(1.04);
}


/* =========================================================
   19. UNDERLINE HOVER
   ========================================================= */

.rx-hover-line {
    position: relative;
    display: inline-block;
}

.rx-hover-line::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -4px;

    width: 100%;
    height: 1px;

    background: currentColor;

    transform: scaleX(0);
    transform-origin: right;

    transition:
        transform 0.4s var(--rx-motion-ease);
}

.rx-hover-line:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}


/* =========================================================
   20. FLOATING ELEMENT
   ========================================================= */

.rx-float {
    animation: rxFloat 5s ease-in-out infinite;
}

@keyframes rxFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -8px, 0);
    }
}


/* =========================================================
   21. SUBTLE ROTATION
   ========================================================= */

.rx-rotate-slow {
    animation: rxRotateSlow 20s linear infinite;
}

@keyframes rxRotateSlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   22. PAGE LOAD
   ========================================================= */

.rx-page-reveal {
    opacity: 0;
    animation:
        rxPageReveal 0.8s var(--rx-motion-ease) forwards;
}

@keyframes rxPageReveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* =========================================================
   23. ACCESSIBILITY
   ========================================================= */

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

    .rx-reveal,
    .rx-reveal-up,
    .rx-reveal-down,
    .rx-reveal-left,
    .rx-reveal-right,
    .rx-reveal-scale,
    .rx-fade,
    .rx-stagger > *,
    .rx-stagger-left > *,
    .rx-image-reveal img,
    .rx-image-clip,
    .rx-text-reveal {

        opacity: 1;
        transform: none;
        clip-path: none;

        transition: none !important;
        animation: none !important;

        will-change: auto;
    }

    .rx-float,
    .rx-rotate-slow,
    .rx-page-reveal {
        animation: none !important;
    }

}


/* =========================================================
   24. MOBILE OPTIMIZATION
   ========================================================= */

@media (max-width: 767px) {

    .rx-reveal-up {
        transform: translate3d(0, 30px, 0);
    }

    .rx-reveal-down {
        transform: translate3d(0, -30px, 0);
    }

    .rx-reveal-left,
    .rx-reveal-right {
        transform: translate3d(0, 25px, 0);
    }

    .rx-reveal-scale {
        transform: scale(0.97);
    }

    .rx-stagger > *,
    .rx-stagger-left > * {
        transform: translate3d(0, 25px, 0);
    }

    .rx-hover-lift:hover {
        transform: none;
    }

    .rx-hover-image:hover img {
        transform: none;
    }

}