/* ROVNXT Motion Directions */
/* Side entry animations for Home and General pages */

:root {
    --ease-slide: cubic-bezier(0.2, 0, 0.2, 1);
}

/* --- SLIDE RIGHT (Enter from Left) --- */
/* Usage: For left-aligned text or left-side grid items */
.mnc-slide-right:not(.is-visible) {
    opacity: 0;
    transform: translateX(-50px);
}

.mnc-slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
    animation: slideRightAnim 0.8s var(--ease-slide) forwards;
}

@keyframes slideRightAnim {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- SLIDE LEFT (Enter from Right) --- */
/* Usage: For right-aligned text or right-side grid items */
.mnc-slide-left:not(.is-visible) {
    opacity: 0;
    transform: translateX(50px);
}

.mnc-slide-left.is-visible {
    opacity: 1;
    transform: translateX(0);
    animation: slideLeftAnim 0.8s var(--ease-slide) forwards;
}

@keyframes slideLeftAnim {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- SAFETY VISIBILITY (Redundant but safe) --- */
body.js-animate-enabled .mnc-slide-right:not(.is-visible),
body.js-animate-enabled .mnc-slide-left:not(.is-visible) {
    opacity: 0;
    visibility: hidden;
}

.mnc-slide-right.is-visible,
.mnc-slide-left.is-visible {
    visibility: visible;
}

/* ==========================================================================
   PREMIUM MOTION EFFECTS v2.0
   ========================================================================== */

/* --- PARALLAX SCROLL EFFECT (Applied via JS) --- */
.parallax-slow {
    will-change: transform;
    transition: transform 0.1s linear;
}

.parallax-fast {
    will-change: transform;
    transition: transform 0.05s linear;
}

/* --- SCALE IN FROM CENTER --- */
@keyframes scaleInCenter {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.scale-in-center:not(.is-visible) {
    opacity: 0;
    transform: scale(0.5);
}

.scale-in-center.is-visible {
    animation: scaleInCenter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    visibility: visible;
}

/* --- WAVE STAGGER (Diagonal reveal for grids) --- */
.wave-stagger>*:nth-child(1) {
    transition-delay: 0s;
}

.wave-stagger>*:nth-child(2) {
    transition-delay: 0.05s;
}

.wave-stagger>*:nth-child(3) {
    transition-delay: 0.1s;
}

.wave-stagger>*:nth-child(4) {
    transition-delay: 0.15s;
}

.wave-stagger>*:nth-child(5) {
    transition-delay: 0.1s;
}

.wave-stagger>*:nth-child(6) {
    transition-delay: 0.15s;
}

.wave-stagger>*:nth-child(7) {
    transition-delay: 0.2s;
}

.wave-stagger>*:nth-child(8) {
    transition-delay: 0.25s;
}

.wave-stagger>*:nth-child(9) {
    transition-delay: 0.2s;
}

.wave-stagger>*:nth-child(10) {
    transition-delay: 0.25s;
}

.wave-stagger>*:nth-child(11) {
    transition-delay: 0.3s;
}

.wave-stagger>*:nth-child(12) {
    transition-delay: 0.35s;
}

/* --- SLIDE DIAGONAL (Premium entrance) --- */
@keyframes slideDiagonalIn {
    from {
        opacity: 0;
        transform: translate(-30px, 30px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

.slide-diagonal:not(.is-visible) {
    opacity: 0;
    transform: translate(-30px, 30px);
}

.slide-diagonal.is-visible {
    animation: slideDiagonalIn 0.8s var(--ease-slide) forwards;
    visibility: visible;
}

/* --- SLIDE DOWN (Enter from Top) --- */
@keyframes slideDownIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mnc-slide-down:not(.is-visible) {
    opacity: 0;
    transform: translateY(-30px);
}

.mnc-slide-down.is-visible {
    animation: slideDownIn 0.8s var(--ease-slide) forwards;
    visibility: visible;
}

/* --- ZOOM OUT REVEAL --- */
@keyframes zoomOutReveal {
    from {
        opacity: 0;
        transform: scale(1.2);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.zoom-out-reveal:not(.is-visible) {
    opacity: 0;
    transform: scale(1.2);
}

.zoom-out-reveal.is-visible {
    animation: zoomOutReveal 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    visibility: visible;
}

/* --- SPLIT LINE REVEAL --- */
@keyframes splitLineReveal {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.split-line-reveal::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--brand-primary, #395723), var(--brand-accent, #699E3C));
}

.split-line-reveal.is-visible::after {
    animation: splitLineReveal 0.8s ease forwards;
}

/* --- SAFETY VISIBILITY (New Motion Classes) --- */
body.js-animate-enabled .scale-in-center:not(.is-visible),
body.js-animate-enabled .slide-diagonal:not(.is-visible),
body.js-animate-enabled .mnc-slide-down:not(.is-visible),
body.js-animate-enabled .zoom-out-reveal:not(.is-visible) {
    opacity: 0;
    visibility: hidden;
}