/* ==========================================================================
   RINGVITATION CENTRALIZED MOTION & COMPONENT LIBRARY v1.0
   Standardized CSS Motion Presets, Layering Rules, & Easing Definitions
   ========================================================================== */

:root {
    --inv-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --inv-ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
    --inv-ease-bounce-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   1. ENTRANCE MOTION PRESETS (Applied on Outer Wrapper Containers)
   Uses CSS variables: --motion-delay, --motion-speed, --motion-distance
   ========================================================================== */

/* Scroll-Trigger Control: Pause animation until element enters viewport in Theme View */
.theme-preview-main [class*="inv-motion-"]:not(.inv-in-view),
.theme-container [class*="inv-motion-"]:not(.inv-in-view),
.inv-section [class*="inv-motion-"]:not(.inv-in-view) {
    animation-play-state: paused !important;
    opacity: 0 !important;
}

.theme-preview-main [class*="inv-motion-"].inv-in-view,
.theme-container [class*="inv-motion-"].inv-in-view,
.inv-section [class*="inv-motion-"].inv-in-view {
    animation-play-state: running !important;
}

.inv-motion-slide-left {
    opacity: 0;
    will-change: transform, opacity;
    animation: invMotionSlideLeft var(--motion-speed, 1.4s) var(--inv-ease-out-expo) var(--motion-delay, 0s) forwards;
}

.inv-motion-slide-right {
    opacity: 0;
    will-change: transform, opacity;
    animation: invMotionSlideRight var(--motion-speed, 1.4s) var(--inv-ease-out-expo) var(--motion-delay, 0s) forwards;
}

.inv-motion-slide-up {
    opacity: 0;
    will-change: transform, opacity;
    animation: invMotionSlideUp var(--motion-speed, 1.4s) var(--inv-ease-out-expo) var(--motion-delay, 0s) forwards;
}

.inv-motion-slide-down {
    opacity: 0;
    will-change: transform, opacity;
    animation: invMotionSlideDown var(--motion-speed, 1.4s) var(--inv-ease-out-expo) var(--motion-delay, 0s) forwards;
}

.inv-motion-zoom-reveal {
    opacity: 0;
    will-change: transform, opacity, filter;
    animation: invMotionZoomReveal var(--motion-speed, 1.4s) var(--inv-ease-out-expo) var(--motion-delay, 0s) forwards;
}

.inv-motion-curtain-drop {
    opacity: 0;
    will-change: transform, opacity;
    animation: invMotionCurtainDrop var(--motion-speed, 1.5s) var(--inv-ease-bounce-soft) var(--motion-delay, 0s) forwards;
}

.inv-motion-fade-in {
    opacity: 0;
    animation: invMotionFadeIn var(--motion-speed, 1.2s) ease var(--motion-delay, 0s) forwards;
}

.inv-motion-flip-up {
    opacity: 0;
    perspective: 1000px;
    will-change: transform, opacity;
    animation: invMotionFlipUp var(--motion-speed, 1.4s) var(--inv-ease-out-expo) var(--motion-delay, 0s) forwards;
}

.inv-motion-pop-in {
    opacity: 0;
    will-change: transform, opacity;
    animation: invMotionPopIn var(--motion-speed, 1.2s) var(--inv-ease-bounce-soft) var(--motion-delay, 0s) forwards;
}

.inv-motion-blur-slide {
    opacity: 0;
    will-change: transform, opacity, filter;
    animation: invMotionBlurSlide var(--motion-speed, 1.4s) var(--inv-ease-out-expo) var(--motion-delay, 0s) forwards;
}

.inv-motion-spin-reveal {
    opacity: 0;
    will-change: transform, opacity;
    animation: invMotionSpinReveal var(--motion-speed, 1.5s) var(--inv-ease-out-expo) var(--motion-delay, 0s) forwards;
}

/* ==========================================================================
   2. CONTINUOUS SWAY & FLOAT PRESETS (Applied on Inner <img> / Child Nodes)
   Uses CSS variables: --sway-delay, --sway-speed, --sway-tilt
   ========================================================================== */

.inv-sway-tilt-left {
    transform-origin: bottom left;
    animation: invSwayTiltLeft var(--sway-speed, 5.5s) var(--inv-ease-in-out-sine) var(--sway-delay, 0s) infinite alternate;
}

.inv-sway-tilt-right {
    transform-origin: bottom right;
    animation: invSwayTiltRight var(--sway-speed, 5.0s) var(--inv-ease-in-out-sine) var(--sway-delay, 0s) infinite alternate;
}

.inv-sway-float {
    animation: invSwayFloat var(--sway-speed, 4.5s) var(--inv-ease-in-out-sine) var(--sway-delay, 0s) infinite alternate;
}

.inv-sway-pulse {
    animation: invSwayPulse var(--sway-speed, 3.5s) var(--inv-ease-in-out-sine) var(--sway-delay, 0s) infinite alternate;
}

.inv-sway-swing {
    transform-origin: top center;
    animation: invSwaySwing var(--sway-speed, 4.0s) var(--inv-ease-in-out-sine) var(--sway-delay, 0s) infinite alternate;
}

.inv-sway-shimmer {
    animation: invSwayShimmer var(--sway-speed, 3.0s) ease-in-out var(--sway-delay, 0s) infinite alternate;
}

.inv-sway-wave {
    animation: invSwayWave var(--sway-speed, 5.0s) var(--inv-ease-in-out-sine) var(--sway-delay, 0s) infinite alternate;
}

/* ==========================================================================
   3. KEYFRAME DEFINITIONS
   ========================================================================== */

@keyframes invMotionSlideLeft {
    0% {
        opacity: 0;
        transform: translate3d(calc(-1 * var(--motion-distance, 80px)), 0, 0);
    }

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

@keyframes invMotionSlideRight {
    0% {
        opacity: 0;
        transform: translate3d(var(--motion-distance, 80px), 0, 0);
    }

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

@keyframes invMotionSlideUp {
    0% {
        opacity: 0;
        transform: translate3d(0, var(--motion-distance, 50px), 0);
    }

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

@keyframes invMotionSlideDown {
    0% {
        opacity: 0;
        transform: translate3d(0, calc(-1 * var(--motion-distance, 50px)), 0);
    }

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

@keyframes invMotionZoomReveal {
    0% {
        opacity: 0;
        transform: scale(1.18);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

@keyframes invMotionCurtainDrop {
    0% {
        opacity: 0;
        transform: translateY(-60px) scaleY(0.7);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

@keyframes invMotionFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes invMotionFlipUp {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateX(60deg) translate3d(0, var(--motion-distance, 40px), 0);
    }

    100% {
        opacity: 1;
        transform: perspective(1000px) rotateX(0deg) translate3d(0, 0, 0);
    }
}

@keyframes invMotionPopIn {
    0% {
        opacity: 0;
        transform: scale(0.65);
    }

    70% {
        transform: scale(1.04);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes invMotionBlurSlide {
    0% {
        opacity: 0;
        transform: translate3d(0, var(--motion-distance, 60px), 0);
        filter: blur(12px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes invMotionSpinReveal {
    0% {
        opacity: 0;
        transform: scale(0.75) rotate(-18deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Dedicated Sway Keyframe Rules Preserving Base Tilt Angles */
@keyframes invSwayTiltLeft {
    0% {
        transform: rotate(var(--sway-tilt, -16deg)) translateY(0);
    }

    100% {
        transform: rotate(calc(var(--sway-tilt, -16deg) + 4deg)) translateY(-7px);
    }
}

@keyframes invSwayTiltRight {
    0% {
        transform: rotate(var(--sway-tilt, -12deg)) translateY(0);
    }

    100% {
        transform: rotate(calc(var(--sway-tilt, -12deg) - 4deg)) translateY(-7px);
    }
}

@keyframes invSwayFloat {
    0% {
        transform: translateY(0) rotate(var(--sway-tilt, 0deg));
    }

    100% {
        transform: translateY(-10px) rotate(calc(var(--sway-tilt, 0deg) + 2deg));
    }
}

@keyframes invSwayPulse {
    0% {
        transform: scale(1) rotate(var(--sway-tilt, 0deg));
    }

    100% {
        transform: scale(1.05) rotate(var(--sway-tilt, 0deg));
    }
}

@keyframes invSwaySwing {
    0% {
        transform: rotate(calc(var(--sway-tilt, 0deg) - 6deg));
    }

    100% {
        transform: rotate(calc(var(--sway-tilt, 0deg) + 6deg));
    }
}

@keyframes invSwayShimmer {
    0% {
        opacity: 0.85;
        filter: brightness(1) drop-shadow(0 0 0px rgba(212, 175, 55, 0));
    }

    100% {
        opacity: 1;
        filter: brightness(1.15) drop-shadow(0 0 12px rgba(212, 175, 55, 0.45));
    }
}

@keyframes invSwayWave {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--sway-tilt, 0deg));
    }

    50% {
        transform: translate3d(6px, -8px, 0) rotate(calc(var(--sway-tilt, 0deg) + 3deg));
    }

    100% {
        transform: translate3d(-6px, -4px, 0) rotate(calc(var(--sway-tilt, 0deg) - 3deg));
    }
}

/* Reduced Motion Guard for Accessibility */
@media (prefers-reduced-motion: reduce) {

    .inv-motion-slide-left,
    .inv-motion-slide-right,
    .inv-motion-slide-up,
    .inv-motion-slide-down,
    .inv-motion-zoom-reveal,
    .inv-motion-curtain-drop,
    .inv-motion-fade-in,
    .inv-motion-flip-up,
    .inv-motion-pop-in,
    .inv-motion-blur-slide,
    .inv-motion-spin-reveal,
    .inv-sway-tilt-left,
    .inv-sway-tilt-right,
    .inv-sway-float,
    .inv-sway-pulse,
    .inv-sway-swing,
    .inv-sway-shimmer,
    .inv-sway-wave {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}