/*!
 * ============================================================================
 * RoopM-ScrollTrigger v2.3.0 — Final Production Build
 * Premium Pure CSS Scroll Animation Library — ZERO JavaScript
 *
 * ⚠ NEVER use overflow-x: hidden on html/body — use overflow-x: clip
 *
 * Author: RoopM | License: MIT
 * ============================================================================
 */


/* ============================================================================
   §1 — DESIGN TOKENS
   ============================================================================ */

:root {
    --roopm-duration: 0.85s;
    --roopm-delay: 0s;
    --roopm-easing: cubic-bezier(0.165, 0.84, 0.44, 1);
    --roopm-fill: both;
    --roopm-distance: 60px;
    --roopm-distance-x: var(--roopm-distance);
    --roopm-distance-y: var(--roopm-distance);
    --roopm-scale-from: 0.82;
    --roopm-scale-to: 1;
    --roopm-scale-down-from: 1.18;
    --roopm-rotate-deg: 12deg;
    --roopm-flip-deg: 80deg;
    --roopm-blur-amount: 14px;
    --roopm-parallax-slow: 0.25;
    --roopm-parallax-fast: 0.7;
    --roopm-parallax-bg-start: 30%;
    --roopm-parallax-bg-end: 70%;
    --roopm-pin-offset: 0px;
    --roopm-pin-height: 200vh;
    --roopm-h-panels: 4;
    --roopm-circle-from: 0%;
    --roopm-circle-to: 150%;
    --roopm-glow-color-a: rgba(0, 240, 255, 0);
    --roopm-glow-color-b: rgba(0, 240, 255, 0.55);
    --roopm-glow-size-from: 0px;
    --roopm-glow-size-to: 22px;
    --roopm-glass-blur-from: 0px;
    --roopm-glass-blur-to: 20px;
    --roopm-glass-bg-from: 0;
    --roopm-glass-bg-to: 0.85;
    --roopm-range-start: entry 0%;
    --roopm-range-end: cover 45%;
    --roopm-stagger: 0s;
    --roopm-stagger-index: 0;
    --roopm-progress-h: 3px;
    --roopm-accent-1: #00f0ff;
    --roopm-accent-2: #b400ff;
    --roopm-accent-3: #ff006a;
}


/* ============================================================================
   §2 — FALLBACK LAYER
   ============================================================================ */

.roopm-animate {
    --_dur: var(--roopm-duration);
    --_delay: calc(var(--roopm-delay) + (var(--roopm-stagger) * var(--roopm-stagger-index)));
    --_ease: var(--roopm-easing);
    --_dx: var(--roopm-distance-x, var(--roopm-distance));
    --_dy: var(--roopm-distance-y, var(--roopm-distance));
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.roopm-pin {
    position: -webkit-sticky;
    position: sticky;
    top: var(--roopm-pin-offset, 0px);
    z-index: 10;
}

.roopm-horizontal-track {
    display: flex;
    flex-direction: column;
}

.roopm-horizontal-panel {
    width: 100%;
    min-height: 80vh;
}


/* ============================================================================
   §3 — ALL KEYFRAMES
   ============================================================================ */

/* Fade */
@keyframes rm-fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes rm-fade-up {
    0% {
        opacity: 0;
        transform: translateY(var(--_dy));
    }

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

@keyframes rm-fade-down {
    0% {
        opacity: 0;
        transform: translateY(calc(var(--_dy) * -1));
    }

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

@keyframes rm-fade-left {
    0% {
        opacity: 0;
        transform: translateX(var(--_dx));
    }

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

@keyframes rm-fade-right {
    0% {
        opacity: 0;
        transform: translateX(calc(var(--_dx) * -1));
    }

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

@keyframes rm-fade-up-left {
    0% {
        opacity: 0;
        transform: translate(calc(var(--_dx) * 0.5), var(--_dy));
    }

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

@keyframes rm-fade-up-right {
    0% {
        opacity: 0;
        transform: translate(calc(var(--_dx) * -0.5), var(--_dy));
    }

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

/* Scale */
@keyframes rm-scale-up {
    0% {
        opacity: 0;
        transform: scale(var(--roopm-scale-from));
    }

    100% {
        opacity: 1;
        transform: scale(var(--roopm-scale-to));
    }
}

@keyframes rm-scale-down {
    0% {
        opacity: 0;
        transform: scale(var(--roopm-scale-down-from));
    }

    100% {
        opacity: 1;
        transform: scale(var(--roopm-scale-to));
    }
}

@keyframes rm-zoom-in {
    0% {
        opacity: 0;
        transform: scale(0.35);
    }

    55% {
        opacity: 1;
    }

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

/* Rotation */
@keyframes rm-rotate-left {
    0% {
        opacity: 0;
        transform: rotate(calc(var(--roopm-rotate-deg) * -1)) translateY(calc(var(--_dy) * 0.4));
    }

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

@keyframes rm-rotate-right {
    0% {
        opacity: 0;
        transform: rotate(var(--roopm-rotate-deg)) translateY(calc(var(--_dy) * 0.4));
    }

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

@keyframes rm-flip-x {
    0% {
        opacity: 0;
        transform: perspective(800px) rotateX(var(--roopm-flip-deg));
    }

    50% {
        opacity: 0.7;
    }

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

@keyframes rm-flip-y {
    0% {
        opacity: 0;
        transform: perspective(800px) rotateY(var(--roopm-flip-deg));
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
        transform: perspective(800px) rotateY(0deg);
    }
}

/* Blur */
@keyframes rm-blur-in {
    0% {
        opacity: 0;
        filter: blur(var(--roopm-blur-amount));
    }

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

@keyframes rm-focus-in {
    0% {
        opacity: 0;
        filter: blur(var(--roopm-blur-amount));
        transform: scale(1.04);
    }

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

/* Clip-path Reveals */
@keyframes rm-reveal-left {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes rm-reveal-right {
    0% {
        clip-path: inset(0 0 0 100%);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes rm-reveal-up {
    0% {
        clip-path: inset(100% 0 0 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes rm-reveal-down {
    0% {
        clip-path: inset(0 0 100% 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes rm-draw-in {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        opacity: 0.3;
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

/* Mask Reveals */
@keyframes rm-mask-circle {
    0% {
        clip-path: circle(var(--roopm-circle-from) at 50% 50%);
        opacity: 0.2;
    }

    100% {
        clip-path: circle(var(--roopm-circle-to) at 50% 50%);
        opacity: 1;
    }
}

@keyframes rm-mask-diamond {
    0% {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
        opacity: 0.15;
    }

    100% {
        clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
        opacity: 1;
    }
}

@keyframes rm-mask-wipe {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        opacity: 0.15;
    }

    35% {
        opacity: 1;
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

/* Neon Glow */
@keyframes rm-neon-glow {
    0% {
        opacity: 0.35;
        box-shadow: 0 0 var(--roopm-glow-size-from) var(--roopm-glow-color-a);
        transform: scale(0.97);
    }

    50% {
        opacity: 1;
        box-shadow:
            0 0 var(--roopm-glow-size-to) var(--roopm-glow-color-b),
            0 0 calc(var(--roopm-glow-size-to) * 2.5) var(--roopm-glow-color-b),
            inset 0 0 calc(var(--roopm-glow-size-to) * 0.35) var(--roopm-glow-color-b);
        transform: scale(1);
    }

    100% {
        opacity: 0.6;
        box-shadow: 0 0 calc(var(--roopm-glow-size-to) * 0.4) var(--roopm-glow-color-b);
        transform: scale(0.98);
    }
}

/* Parallax */
@keyframes rm-parallax-slow {
    0% {
        transform: translateY(calc(80px * var(--roopm-parallax-slow)));
    }

    100% {
        transform: translateY(calc(-80px * var(--roopm-parallax-slow)));
    }
}

@keyframes rm-parallax-fast {
    0% {
        transform: translateY(calc(80px * var(--roopm-parallax-fast)));
    }

    100% {
        transform: translateY(calc(-80px * var(--roopm-parallax-fast)));
    }
}

@keyframes rm-parallax-bg {
    0% {
        background-position: center var(--roopm-parallax-bg-start);
    }

    100% {
        background-position: center var(--roopm-parallax-bg-end);
    }
}

/* Scrub */
@keyframes rm-scrub-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rm-scrub-scale {
    0% {
        transform: scale(0.4);
        opacity: 0.15;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }

    100% {
        transform: scale(0.4);
        opacity: 0.15;
    }
}

@keyframes rm-scrub-slide-x {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Glass */
@keyframes rm-glass-in {
    0% {
        -webkit-backdrop-filter: blur(var(--roopm-glass-blur-from));
        backdrop-filter: blur(var(--roopm-glass-blur-from));
        background-color: rgba(10, 10, 14, var(--roopm-glass-bg-from));
    }

    100% {
        -webkit-backdrop-filter: blur(var(--roopm-glass-blur-to));
        backdrop-filter: blur(var(--roopm-glass-blur-to));
        background-color: rgba(10, 10, 14, var(--roopm-glass-bg-to));
    }
}

/* Horizontal */
@keyframes rm-h-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc((var(--roopm-h-panels) - 1) / var(--roopm-h-panels) * -100%));
    }
}

/* Progress */
@keyframes rm-progress {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
    }
}

/* Text */
@keyframes rm-text-slide-up {
    0% {
        transform: translateY(110%);
        opacity: 0;
    }

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


/* ============================================================================
   §4 — SCROLL ENGINE
   ============================================================================ */

@supports (animation-timeline: view()) {

    .roopm-animate {
        opacity: 0;
        will-change: opacity, transform;
        transition: none;
    }

    .roopm-animate:hover {
        transform: none;
    }

    .roopm-animate[data-roopm-effect="reveal-left"],
    .roopm-animate[data-roopm-effect="reveal-right"],
    .roopm-animate[data-roopm-effect="reveal-up"],
    .roopm-animate[data-roopm-effect="reveal-down"],
    .roopm-animate[data-roopm-effect="draw-in"],
    .roopm-animate[data-roopm-effect="mask-reveal-circle"],
    .roopm-animate[data-roopm-effect="mask-reveal-wipe"],
    .roopm-animate[data-roopm-effect="mask-reveal-diamond"] {
        opacity: 1;
        will-change: clip-path;
    }

    .roopm-animate[data-roopm-effect="parallax-slow"],
    .roopm-animate[data-roopm-effect="parallax-fast"],
    .roopm-animate[data-roopm-effect="scrub-rotate"] {
        opacity: 1;
    }

    .roopm-animate[data-roopm-effect="neon-glow"] {
        opacity: 0.35;
        will-change: opacity, box-shadow, transform;
    }

    /* Effect Map */
    .roopm-animate[data-roopm-effect="fade-in"] {
        animation: rm-fade-in var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="fade-up"] {
        animation: rm-fade-up var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="fade-down"] {
        animation: rm-fade-down var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="fade-left"] {
        animation: rm-fade-left var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="fade-right"] {
        animation: rm-fade-right var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="fade-up-left"] {
        animation: rm-fade-up-left var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="fade-up-right"] {
        animation: rm-fade-up-right var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="scale-up"] {
        animation: rm-scale-up var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="scale-down"] {
        animation: rm-scale-down var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="zoom-in"] {
        animation: rm-zoom-in var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="rotate-left"] {
        animation: rm-rotate-left var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="rotate-right"] {
        animation: rm-rotate-right var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="flip-x"] {
        animation: rm-flip-x var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
        transform-style: preserve-3d;
    }

    .roopm-animate[data-roopm-effect="flip-y"] {
        animation: rm-flip-y var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
        transform-style: preserve-3d;
    }

    .roopm-animate[data-roopm-effect="blur-in"] {
        animation: rm-blur-in var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
        will-change: opacity, filter;
    }

    .roopm-animate[data-roopm-effect="focus-in"] {
        animation: rm-focus-in var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="reveal-left"] {
        clip-path: inset(0 100% 0 0);
        animation: rm-reveal-left var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="reveal-right"] {
        clip-path: inset(0 0 0 100%);
        animation: rm-reveal-right var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="reveal-up"] {
        clip-path: inset(100% 0 0 0);
        animation: rm-reveal-up var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="reveal-down"] {
        clip-path: inset(0 0 100% 0);
        animation: rm-reveal-down var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="draw-in"] {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        animation: rm-draw-in var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="mask-reveal-circle"] {
        clip-path: circle(0% at 50% 50%);
        animation: rm-mask-circle var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="mask-reveal-diamond"] {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
        animation: rm-mask-diamond var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="mask-reveal-wipe"] {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        animation: rm-mask-wipe var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
    }

    .roopm-animate[data-roopm-effect="neon-glow"] {
        animation: rm-neon-glow 1ms linear var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start, entry 0%) var(--roopm-range-end, exit 0%);
    }

    .roopm-animate[data-roopm-effect="parallax-slow"] {
        animation: rm-parallax-slow 1ms linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }

    .roopm-animate[data-roopm-effect="parallax-fast"] {
        animation: rm-parallax-fast 1ms linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }

    .roopm-parallax-bg {
        background-size: cover;
        background-repeat: no-repeat;
        animation: rm-parallax-bg 1ms linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }

    .roopm-animate[data-roopm-effect="text-slide-up"] {
        animation: rm-text-slide-up var(--_dur) var(--_ease) var(--_delay) var(--roopm-fill);
        animation-timeline: view();
        animation-range: var(--roopm-range-start) var(--roopm-range-end);
        overflow: hidden;
    }

    .roopm-animate[data-roopm-effect="scrub-rotate"] {
        animation: rm-scrub-rotate 1ms linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 0%;
    }

    .roopm-animate[data-roopm-effect="scrub-scale"] {
        animation: rm-scrub-scale 1ms linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 0%;
    }

    .roopm-animate[data-roopm-effect="scrub-slide-x"] {
        animation: rm-scrub-slide-x 1ms linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 0%;
    }

    /* Scrub override */
    .roopm-animate[data-roopm-scrub="true"] {
        animation-timing-function: linear !important;
        animation-delay: 0s !important;
    }

    /* Range presets */
    .roopm-animate[data-roopm-start="entry 0%"] {
        --roopm-range-start: entry 0%;
    }

    .roopm-animate[data-roopm-start="entry 5%"] {
        --roopm-range-start: entry 5%;
    }

    .roopm-animate[data-roopm-start="entry 10%"] {
        --roopm-range-start: entry 10%;
    }

    .roopm-animate[data-roopm-start="entry 15%"] {
        --roopm-range-start: entry 15%;
    }

    .roopm-animate[data-roopm-start="entry 20%"] {
        --roopm-range-start: entry 20%;
    }

    .roopm-animate[data-roopm-start="entry 25%"] {
        --roopm-range-start: entry 25%;
    }

    .roopm-animate[data-roopm-start="entry 30%"] {
        --roopm-range-start: entry 30%;
    }

    .roopm-animate[data-roopm-start="entry 40%"] {
        --roopm-range-start: entry 40%;
    }

    .roopm-animate[data-roopm-start="entry 50%"] {
        --roopm-range-start: entry 50%;
    }

    .roopm-animate[data-roopm-start="cover 0%"] {
        --roopm-range-start: cover 0%;
    }

    .roopm-animate[data-roopm-start="cover 10%"] {
        --roopm-range-start: cover 10%;
    }

    .roopm-animate[data-roopm-start="cover 25%"] {
        --roopm-range-start: cover 25%;
    }

    .roopm-animate[data-roopm-start="cover 50%"] {
        --roopm-range-start: cover 50%;
    }

    .roopm-animate[data-roopm-end="cover 25%"] {
        --roopm-range-end: cover 25%;
    }

    .roopm-animate[data-roopm-end="cover 30%"] {
        --roopm-range-end: cover 30%;
    }

    .roopm-animate[data-roopm-end="cover 35%"] {
        --roopm-range-end: cover 35%;
    }

    .roopm-animate[data-roopm-end="cover 40%"] {
        --roopm-range-end: cover 40%;
    }

    .roopm-animate[data-roopm-end="cover 45%"] {
        --roopm-range-end: cover 45%;
    }

    .roopm-animate[data-roopm-end="cover 50%"] {
        --roopm-range-end: cover 50%;
    }

    .roopm-animate[data-roopm-end="cover 60%"] {
        --roopm-range-end: cover 60%;
    }

    .roopm-animate[data-roopm-end="cover 75%"] {
        --roopm-range-end: cover 75%;
    }

    .roopm-animate[data-roopm-end="cover 100%"] {
        --roopm-range-end: cover 100%;
    }

    .roopm-animate[data-roopm-end="exit 0%"] {
        --roopm-range-end: exit 0%;
    }

    .roopm-animate[data-roopm-end="exit 25%"] {
        --roopm-range-end: exit 25%;
    }

    .roopm-animate[data-roopm-end="exit 50%"] {
        --roopm-range-end: exit 50%;
    }

    .roopm-animate[data-roopm-end="exit 100%"] {
        --roopm-range-end: exit 100%;
    }

    /* Duration */
    .roopm-animate[data-roopm-duration="0.3s"] {
        --roopm-duration: 0.3s;
    }

    .roopm-animate[data-roopm-duration="0.5s"] {
        --roopm-duration: 0.5s;
    }

    .roopm-animate[data-roopm-duration="0.6s"] {
        --roopm-duration: 0.6s;
    }

    .roopm-animate[data-roopm-duration="0.8s"] {
        --roopm-duration: 0.8s;
    }

    .roopm-animate[data-roopm-duration="1s"] {
        --roopm-duration: 1s;
    }

    .roopm-animate[data-roopm-duration="1.2s"] {
        --roopm-duration: 1.2s;
    }

    .roopm-animate[data-roopm-duration="1.5s"] {
        --roopm-duration: 1.5s;
    }

    .roopm-animate[data-roopm-duration="2s"] {
        --roopm-duration: 2s;
    }

    .roopm-animate[data-roopm-duration="3s"] {
        --roopm-duration: 3s;
    }

    /* Delay */
    .roopm-animate[data-roopm-delay="0s"] {
        --roopm-delay: 0s;
    }

    .roopm-animate[data-roopm-delay="0.05s"] {
        --roopm-delay: 0.05s;
    }

    .roopm-animate[data-roopm-delay="0.1s"] {
        --roopm-delay: 0.1s;
    }

    .roopm-animate[data-roopm-delay="0.15s"] {
        --roopm-delay: 0.15s;
    }

    .roopm-animate[data-roopm-delay="0.2s"] {
        --roopm-delay: 0.2s;
    }

    .roopm-animate[data-roopm-delay="0.25s"] {
        --roopm-delay: 0.25s;
    }

    .roopm-animate[data-roopm-delay="0.3s"] {
        --roopm-delay: 0.3s;
    }

    .roopm-animate[data-roopm-delay="0.4s"] {
        --roopm-delay: 0.4s;
    }

    .roopm-animate[data-roopm-delay="0.5s"] {
        --roopm-delay: 0.5s;
    }

    .roopm-animate[data-roopm-delay="0.8s"] {
        --roopm-delay: 0.8s;
    }

    .roopm-animate[data-roopm-delay="1s"] {
        --roopm-delay: 1s;
    }

    /* Easing */
    .roopm-animate[data-roopm-easing="linear"] {
        --roopm-easing: linear;
    }

    .roopm-animate[data-roopm-easing="ease"] {
        --roopm-easing: ease;
    }

    .roopm-animate[data-roopm-easing="ease-in-out"] {
        --roopm-easing: ease-in-out;
    }

    .roopm-animate[data-roopm-easing="spring"] {
        --roopm-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .roopm-animate[data-roopm-easing="bounce"] {
        --roopm-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .roopm-animate[data-roopm-easing="snap"] {
        --roopm-easing: cubic-bezier(0.5, 0, 0.1, 1);
    }

    .roopm-animate[data-roopm-easing="expo-out"] {
        --roopm-easing: cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Stagger */
    .roopm-animate[data-roopm-stagger-index="0"] {
        --roopm-stagger-index: 0;
    }

    .roopm-animate[data-roopm-stagger-index="1"] {
        --roopm-stagger-index: 1;
    }

    .roopm-animate[data-roopm-stagger-index="2"] {
        --roopm-stagger-index: 2;
    }

    .roopm-animate[data-roopm-stagger-index="3"] {
        --roopm-stagger-index: 3;
    }

    .roopm-animate[data-roopm-stagger-index="4"] {
        --roopm-stagger-index: 4;
    }

    .roopm-animate[data-roopm-stagger-index="5"] {
        --roopm-stagger-index: 5;
    }

    .roopm-animate[data-roopm-stagger-index="6"] {
        --roopm-stagger-index: 6;
    }

    .roopm-animate[data-roopm-stagger-index="7"] {
        --roopm-stagger-index: 7;
    }

    .roopm-animate[data-roopm-stagger-index="8"] {
        --roopm-stagger-index: 8;
    }

    /* Pin */
    .roopm-pin-container {
        position: relative;
        height: var(--roopm-pin-height);
    }

    .roopm-pin {
        position: -webkit-sticky;
        position: sticky;
        top: var(--roopm-pin-offset, 0px);
        z-index: 10;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .roopm-pin[data-roopm-pin-progress="true"]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, var(--roopm-accent-1), var(--roopm-accent-2));
        transform-origin: left;
        transform: scaleX(0);
        animation: rm-progress 1ms linear both;
        animation-timeline: scroll();
        z-index: 20;
    }

    /* Horizontal */
    .roopm-horizontal-section {
        position: relative;
        height: calc(var(--roopm-h-panels, 4) * 100vh);
        overflow: clip;
    }

    .roopm-horizontal-sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100dvh;
        width: 100%;
        overflow: clip;
    }

    .roopm-horizontal-track {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 100%;
        width: calc(var(--roopm-h-panels, 4) * 100%);
        animation: rm-h-scroll 1ms linear both;
        animation-timeline: scroll();
    }

    .roopm-horizontal-panel {
        flex: 0 0 calc(100% / var(--roopm-h-panels, 4));
        width: calc(100% / var(--roopm-h-panels, 4));
        height: 100%;
        position: relative;
        overflow: clip;
    }

    /* Glass */
    .roopm-glass {
        animation: rm-glass-in 1ms linear both;
        animation-timeline: scroll(root);
        animation-range: 0% 5%;
    }

    .roopm-glass[data-roopm-glass="header"] {
        animation-range: 0% 3%;
    }

    .roopm-glass[data-roopm-glass="slow"] {
        animation-range: 0% 10%;
    }

    /* Progress */
    .roopm-progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--roopm-progress-h);
        background: linear-gradient(90deg, var(--roopm-accent-1), var(--roopm-accent-2), var(--roopm-accent-3));
        transform-origin: left;
        transform: scaleX(0);
        animation: rm-progress 1ms linear both;
        animation-timeline: scroll(root);
        z-index: 999999;
        pointer-events: none;
    }

}

/* END @supports */


/* ============================================================================
   §5 — REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .roopm-animate {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        will-change: auto !important;
        transition: none !important;
    }

    .roopm-progress-bar {
        animation: none !important;
        transform: scaleX(1) !important;
    }

    .roopm-horizontal-track {
        animation: none !important;
        transform: none !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .roopm-horizontal-panel {
        width: 100% !important;
        flex: 0 0 auto !important;
        min-height: 60vh !important;
    }

    .roopm-horizontal-section {
        height: auto !important;
    }

    .roopm-horizontal-sticky {
        position: relative !important;
        height: auto !important;
    }
}


/* ============================================================================
   §6 — UTILITIES
   ============================================================================ */

.roopm-distance-xs {
    --roopm-distance: 20px;
}

.roopm-distance-sm {
    --roopm-distance: 35px;
}

.roopm-distance-md {
    --roopm-distance: 60px;
}

.roopm-distance-lg {
    --roopm-distance: 120px;
}

.roopm-distance-xl {
    --roopm-distance: 200px;
}

.roopm-scale-subtle {
    --roopm-scale-from: 0.95;
}

.roopm-scale-medium {
    --roopm-scale-from: 0.75;
}

.roopm-scale-heavy {
    --roopm-scale-from: 0.4;
}

.roopm-blur-sm {
    --roopm-blur-amount: 5px;
}

.roopm-blur-md {
    --roopm-blur-amount: 14px;
}

.roopm-blur-lg {
    --roopm-blur-amount: 30px;
}

.roopm-stagger-group {
    --roopm-stagger: 0.08s;
}

.roopm-stagger-group-fast {
    --roopm-stagger: 0.04s;
}

.roopm-stagger-group-slow {
    --roopm-stagger: 0.16s;
}