/*!
 * ╔══════════════════════════════════════════════════════════════════════════════╗
 * ║         RoopM-ScrollTrigger  v20.0  |  Ultimate Edition                    ║
 * ║         Pure CSS Scroll Animation Library — All Features Unified           ║
 * ║                                                                            ║
 * ║  FEATURES:                                                                 ║
 * ║  ✦ Core Animation Engine (15+ effect variants)                             ║
 * ║  ✦ 10 Premium Text Reveal Effects                                          ║
 * ║  ✦ 8 Cinematic Mask Reveals                                                ║
 * ║  ✦ Parallax System (X/Y)                                                   ║
 * ║  ✦ Scrubbing Effects (rotate/blur/color)                                   ║
 * ║  ✦ Horizontal Scroll                                                       ║
 * ║  ✦ Stacking Cards                                                          ║
 * ║  ✦ Pin System                                                              ║
 * ║  ✦ 15 Advanced Typography Features:                                        ║
 * ║     01 · Liquid Typewriter                                                 ║
 * ║     02 · Apple-Style Word Wash                                             ║
 * ║     03 · Cinematic Stroke-to-Fill                                          ║
 * ║     04 · Multi-Layer Depth Parallax                                        ║
 * ║     05 · SVG Generative Pattern Draw                                       ║
 * ║     06 · Frosted Glass Refraction                                          ║
 * ║     07 · Cinematic Depth-of-Field Focus Rack                               ║
 * ║     08 · Isometric 3D Extrusion                                            ║
 * ║     09 · Text-to-Interface Zoom Reveal                                     ║
 * ║     10 · Aggressive Chromatic Aberration Glitch                            ║
 * ║     11 · Variable Font Morphing                                            ║
 * ║     12 · Kinetic Typography Drift                                          ║
 * ║     13 · Liquid Aurora Text Mask                                           ║
 * ║     14 · Scattered 3D Letter Re-Assembly                                   ║
 * ║     15 · Cinematic Media Mask Zoom                                         ║
 * ║  ✦ Ambient Background System                                               ║
 * ║  ✦ Navigation System                                                       ║
 * ║  ✦ Bento Grid Layout                                                       ║
 * ║  ✦ Card System + Badges                                                    ║
 * ║  ✦ Scroll Progress Bar                                                     ║
 * ║  ✦ Continuous Float Animations                                             ║
 * ║  ✦ Full Fallback Support                                                   ║
 * ║  ✦ Reduced Motion Support                                                  ║
 * ║  ✦ Responsive Breakpoints                                                  ║
 * ╚══════════════════════════════════════════════════════════════════════════════╝
 *
 *  Usage: <link rel="stylesheet" href="roopm-scrolltrigger.css">
 *  Fonts: Inter, Space Grotesk (load via Google Fonts or local)
 *
 *  HTML Usage Examples:
 *    <div class="roopm-animate" data-roopm-effect="fade-up">...</div>
 *    <h2 class="roopm-text-effect" data-tx-effect="liquid-morph"><span>Word</span></h2>
 *    <div class="roopm-animate" data-roopm-effect="mask-iris">...</div>
 *    <div class="roopm-parallax-wrapper"><div class="roopm-parallax-inner" data-parallax="y">...</div></div>
 */

/* ============================================================================
   SECTION 01 · DESIGN TOKENS & CUSTOM PROPERTIES
   ============================================================================ */
:root {
    /* Background Colors */
    --rm-bg-base: #060608;
    --rm-bg-card: #0e0e14;
    --rm-bg-card-2: #12121a;
    --rm-bg-glass: rgba(14, 14, 20, 0.85);

    /* Text Colors */
    --rm-text-main: #f0f0ff;
    --rm-text-muted: #6b7280;
    --rm-text-subtle: #374151;

    /* Accent Colors */
    --rm-accent-cyan: #00d4ff;
    --rm-accent-purple: #a855f7;
    --rm-accent-pink: #f472b6;
    --rm-accent-gold: #f59e0b;
    --rm-accent-green: #10b981;

    /* Gradients */
    --rm-gradient: linear-gradient(135deg, var(--rm-accent-cyan), var(--rm-accent-purple), var(--rm-accent-pink));
    --rm-gradient-gold: linear-gradient(135deg, #f59e0b, #ef4444, #a855f7);

    /* Borders & Shadows */
    --rm-border: rgba(255, 255, 255, 0.06);
    --rm-border-glow: rgba(0, 212, 255, 0.2);
    --rm-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 20px 60px -20px rgba(0, 0, 0, 0.8);
    --rm-shadow-glow: 0 0 40px -10px rgba(0, 212, 255, 0.15);

    /* Animation Defaults */
    --rm-dist: 70px;
    --rm-duration: 0.9s;
    --rm-ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Variable Font Properties */
    --rm2-wght: 300;
    --rm2-wdth: 75;
}

/* Register custom properties for smooth interpolation */
@property --rm2-wght {
    syntax: '<number>';
    inherits: false;
    initial-value: 300;
}

@property --rm2-wdth {
    syntax: '<number>';
    inherits: false;
    initial-value: 75;
}

/* ============================================================================
   SECTION 02 · GLOBAL RESET & BASE STYLES
   ============================================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
    scroll-padding-top: 100px;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--rm-bg-base);
    color: var(--rm-text-main);
    line-height: 1.6;
    overflow-x: clip;
}

img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================================
   SECTION 03 · TYPOGRAPHY SYSTEM
   ============================================================================ */
.roopm-display,
.roopm-h2,
.roopm-h3,
.roopm-h4 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.roopm-display {
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 1.0;
    margin-bottom: 1.5rem;
}

.roopm-h2 {
    font-size: clamp(1.8rem, 3.2vw, 3.2rem);
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.roopm-h3 {
    font-size: clamp(1.4rem, 2vw, 2rem);
    line-height: 1.2;
}

.roopm-h4 {
    font-size: clamp(1.1rem, 1.5vw, 1.5rem);
}

.roopm-body {
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    color: var(--rm-text-muted);
    max-width: 60ch;
    margin: 0 auto;
    line-height: 1.8;
}

/* Gradient Text Utility */
.roopm-text-gradient {
    background: var(--rm-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.roopm-text-gradient-gold {
    background: var(--rm-gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Utility Classes */
.roopm-text-center {
    text-align: center;
}

.roopm-mt-4 {
    margin-top: 1.5rem;
}

/* ============================================================================
   SECTION 04 · LAYOUT SYSTEM
   ============================================================================ */
.roopm-container {
    width: 100%;
    padding: 0 clamp(1.5rem, 5vw, 6rem);
    margin: 0 auto;
    max-width: 1400px;
}

.roopm-section {
    padding: clamp(6rem, 10vw, 12rem) 0;
    position: relative;
}

.roopm-section-header {
    text-align: center;
    margin-bottom: clamp(3rem, 6vw, 6rem);
}

.roopm-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 100px;
    position: relative;
}

/* --- Bento Grid --- */
.roopm-bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 22vw, 380px), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.roopm-span-2 {
    grid-column: span 2;
}

/* Bento Master (20-column asymmetric) */
.roopm-bento-master {
    display: grid;
    gap: 18px;
    width: 100%;
    grid-template-columns: repeat(20, 1fr);
}

.rm-c1 {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
    min-height: 400px;
}

.rm-c2 {
    grid-column: 8 / 14;
    grid-row: 1 / 2;
}

.rm-c3 {
    grid-column: 8 / 14;
    grid-row: 2 / 3;
}

.rm-c4 {
    grid-column: 14 / 21;
    grid-row: 1 / 4;
}

.rm-c5 {
    grid-column: 1 / 7;
    grid-row: 3 / 4;
    min-height: 180px;
}

.rm-c6 {
    grid-column: 7 / 14;
    grid-row: 3 / 4;
}

/* --- Card Large (for advanced features) --- */
.roopm-card-large {
    background: var(--rm-bg-card);
    border: 1px solid var(--rm-border);
    border-radius: 24px;
    padding: clamp(2rem, 4vw, 4rem);
    box-shadow: var(--rm-shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    min-height: 280px;
    overflow: clip;
}

/* ============================================================================
   SECTION 05 · CARD SYSTEM
   ============================================================================ */
.roopm-card {
    background: var(--rm-bg-card);
    border: 1px solid var(--rm-border);
    border-radius: 20px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: var(--rm-shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.roopm-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 60%);
    border-radius: inherit;
    pointer-events: none;
}

.roopm-card:hover {
    border-color: rgba(0, 212, 255, 0.2);
    box-shadow: var(--rm-shadow), 0 0 30px -10px rgba(0, 212, 255, 0.1);
}

/* ============================================================================
   SECTION 06 · BADGE SYSTEM
   ============================================================================ */
.roopm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.04);
    color: var(--rm-text-main);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 1.2rem;
}

/* Badge Color Variants */
.roopm-badge.badge-cyan,
.roopm-badge-cyan {
    background: rgba(0, 212, 255, 0.08);
    color: var(--rm-accent-cyan);
    border-color: rgba(0, 212, 255, 0.2);
}

.roopm-badge.badge-purple,
.roopm-badge-purple {
    background: rgba(168, 85, 247, 0.08);
    color: var(--rm-accent-purple);
    border-color: rgba(168, 85, 247, 0.2);
}

.roopm-badge.badge-pink,
.roopm-badge-pink {
    background: rgba(244, 114, 182, 0.08);
    color: var(--rm-accent-pink);
    border-color: rgba(244, 114, 182, 0.2);
}

.roopm-badge.badge-gold,
.roopm-badge-gold {
    background: rgba(245, 158, 11, 0.08);
    color: var(--rm-accent-gold);
    border-color: rgba(245, 158, 11, 0.2);
}

.roopm-badge.badge-green,
.roopm-badge-green {
    background: rgba(16, 185, 129, 0.08);
    color: var(--rm-accent-green);
    border-color: rgba(16, 185, 129, 0.2);
}

/* ============================================================================
   SECTION 07 · AMBIENT BACKGROUND SYSTEM
   ============================================================================ */
.roopm-bg-pattern {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.025) 1px, transparent 1px),
        radial-gradient(circle at 15% 15%, rgba(0, 212, 255, 0.02) 0%, transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(168, 85, 247, 0.02) 0%, transparent 40%);
    background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100%;
    pointer-events: none;
}

.roopm-bg-pattern::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.4;
    pointer-events: none;
    z-index: -2;
}

/* Glow Orbs */
.roopm-glow-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.12;
    animation: rm-pulse-orb 8s ease-in-out infinite alternate;
    z-index: -1;
    pointer-events: none;
}

.orb-1 {
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, var(--rm-accent-cyan) 0%, transparent 70%);
    top: -15%;
    left: -10%;
}

.orb-2 {
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle, var(--rm-accent-purple) 0%, transparent 70%);
    bottom: 5%;
    right: -10%;
    animation-delay: -4s;
}

.orb-3 {
    width: 30vw;
    height: 30vw;
    background: radial-gradient(circle, var(--rm-accent-pink) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -2s;
    opacity: 0.06;
}

@keyframes rm-pulse-orb {

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

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

/* ============================================================================
   SECTION 08 · SCROLL PROGRESS BAR
   ============================================================================ */
.roopm-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 1000;
    background: var(--rm-gradient);
    transform: scaleX(0);
    transform-origin: left;
    animation: rm-progress-grow linear both;
    animation-timeline: scroll(root);
    box-shadow: 0 0 20px var(--rm-accent-cyan), 0 0 40px rgba(0, 212, 255, 0.3);
}

@keyframes rm-progress-grow {
    to {
        transform: scaleX(1);
    }
}

/* ============================================================================
   SECTION 09 · NAVIGATION SYSTEM
   ============================================================================ */
.roopm-nav-wrapper {
    position: fixed;
    top: 20px;
    width: 100%;
    z-index: 100;
    display: flex;
    justify-content: center;
    padding: 0 20px;
    pointer-events: none;
}

.roopm-floating-nav {
    pointer-events: auto;
    background: rgba(6, 6, 8, 0.8);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid var(--rm-border);
    border-radius: 50px;
    padding: 0.9rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 820px;
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.05), 0 20px 40px rgba(0, 0, 0, 0.5);
}

.roopm-logo {
    font-size: 1.3rem;
    font-weight: 800;
    font-family: 'Space Grotesk', sans-serif;
    color: #fff;
    letter-spacing: -0.02em;
}

.roopm-nav-links {
    display: flex;
    gap: 2.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.roopm-nav-links a {
    color: var(--rm-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
    letter-spacing: 0.02em;
}

.roopm-nav-links a:hover {
    color: var(--rm-text-main);
}

/* ============================================================================
   SECTION 10 · CONTINUOUS ANIMATIONS (Always Active)
   ============================================================================ */

/* Float Animation */
.roopm-continuous-float {
    display: inline-block;
    animation: rm-float-anim 3s ease-in-out infinite alternate !important;
}

@keyframes rm-float-anim {
    from {
        transform: translateY(10px);
    }

    to {
        transform: translateY(-10px);
    }
}

@keyframes rm-float-bg {
    from {
        transform: translateY(0) scale(1);
    }

    to {
        transform: translateY(-50px) scale(1.1);
    }
}

/* ============================================================================
   SECTION 11 · CORE SCROLL-DRIVEN ANIMATION ENGINE
   ============================================================================ */
@supports (animation-timeline: view()) {

    /* --- Master Keyframe (handles all transform variants via CSS custom props) --- */
    @keyframes rm-master {
        0% {
            opacity: var(--rm-o, 0);
            transform: perspective(1200px) translate3d(var(--rm-x, 0px), var(--rm-y, 0px), 0px) scale(var(--rm-s, 1)) rotateX(var(--rm-rx, 0deg)) rotateY(var(--rm-ry, 0deg)) rotateZ(var(--rm-rz, 0deg)) skew(var(--rm-skx, 0deg), var(--rm-sky, 0deg));
            filter: blur(var(--rm-b, 0px));
        }

        100% {
            opacity: 1;
            transform: perspective(1200px) translate3d(0, 0, 0) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
            filter: blur(0px);
        }
    }

    /* --- Base Animate Class --- */
    .roopm-animate {
        animation: rm-master var(--rm-duration) var(--rm-ease) both;
        animation-timeline: view();
        animation-range: entry calc(8% + (var(--rm-idx, 0) * 4%)) cover calc(32% + (var(--rm-idx, 0) * 4%));
        transform-origin: var(--rm-origin, center);
    }

    /* --- Stagger Index System --- */
    .roopm-stagger> :nth-child(1) {
        --rm-idx: 0;
    }

    .roopm-stagger> :nth-child(2) {
        --rm-idx: 1;
    }

    .roopm-stagger> :nth-child(3) {
        --rm-idx: 2;
    }

    .roopm-stagger> :nth-child(4) {
        --rm-idx: 3;
    }

    .roopm-stagger> :nth-child(5) {
        --rm-idx: 4;
    }

    .roopm-stagger> :nth-child(6) {
        --rm-idx: 5;
    }

    .roopm-stagger> :nth-child(7) {
        --rm-idx: 6;
    }

    .roopm-stagger> :nth-child(8) {
        --rm-idx: 7;
    }

    .roopm-stagger> :nth-child(9) {
        --rm-idx: 8;
    }

    .roopm-stagger> :nth-child(10) {
        --rm-idx: 9;
    }

    .roopm-stagger> :nth-child(11) {
        --rm-idx: 10;
    }

    .roopm-stagger> :nth-child(12) {
        --rm-idx: 11;
    }

    /* ── Effect Variants via data-roopm-effect attribute ── */
    [data-roopm-effect="fade-up"] {
        --rm-y: var(--rm-dist);
    }

    [data-roopm-effect="fade-down"] {
        --rm-y: calc(var(--rm-dist) * -1);
    }

    [data-roopm-effect="fade-right"] {
        --rm-x: calc(var(--rm-dist) * -1);
    }

    [data-roopm-effect="fade-left"] {
        --rm-x: var(--rm-dist);
    }

    [data-roopm-effect="fade-up-left"] {
        --rm-y: var(--rm-dist);
        --rm-x: var(--rm-dist);
    }

    [data-roopm-effect="fade-up-right"] {
        --rm-y: var(--rm-dist);
        --rm-x: calc(var(--rm-dist) * -1);
    }

    [data-roopm-effect="scale-up"] {
        --rm-s: 0.75;
    }

    [data-roopm-effect="scale-down"] {
        --rm-s: 1.4;
    }

    [data-roopm-effect="zoom-in"] {
        --rm-s: 1.6;
        --rm-b: 20px;
    }

    [data-roopm-effect="rotate-right"] {
        --rm-rz: 20deg;
        --rm-y: 40px;
    }

    [data-roopm-effect="rotate-left"] {
        --rm-rz: -20deg;
        --rm-y: 40px;
    }

    [data-roopm-effect="flip-x"] {
        --rm-rx: 90deg;
    }

    [data-roopm-effect="flip-y"] {
        --rm-ry: 90deg;
    }

    [data-roopm-effect="skew-up"] {
        --rm-y: var(--rm-dist);
        --rm-sky: 12deg;
    }

    [data-roopm-effect="swing-in"] {
        --rm-rx: -120deg;
        --rm-origin: top;
    }

    [data-roopm-effect="unfold-bottom"] {
        --rm-rx: 90deg;
        --rm-origin: bottom;
    }

    [data-roopm-effect="blur-in"] {
        --rm-b: 24px;
        --rm-y: 20px;
    }

    [data-roopm-effect="blur-scale"] {
        --rm-s: 1.3;
        --rm-b: 20px;
    }

    /* ============================================================================
       SECTION 12 · 10 PREMIUM TEXT REVEAL EFFECTS
       Usage: <h2 class="roopm-text-effect" data-tx-effect="liquid-morph">
                  <span>Word</span><span>by</span><span>Word</span>
              </h2>
       Note:  Each parent card must have view-timeline set. See Section 19.
       ============================================================================ */

    /* Parent card view-timeline hook */
    #text .roopm-card {
        view-timeline: --text-card-timeline block;
    }

    .roopm-text-effect {
        overflow: visible;
        position: relative;
    }

    .roopm-text-effect span {
        display: inline-block;
        position: relative;
        animation-duration: 1.1s !important;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
        animation-fill-mode: both !important;
        animation-timeline: --text-card-timeline !important;
        animation-range: entry 15% cover 55% !important;
    }

    /* ── TX01. LIQUID MORPH ──────────────────────────────────────────────────── */
    [data-tx-effect="liquid-morph"] span {
        animation-name: tx-liquid-morph !important;
        animation-duration: 1.4s !important;
    }

    @keyframes tx-liquid-morph {
        0% {
            opacity: 0;
            transform: scaleX(0.3) scaleY(2.8) translateY(30px);
            filter: blur(12px);
            border-radius: 50%;
        }

        40% {
            opacity: 1;
            transform: scaleX(1.15) scaleY(0.85) translateY(-6px);
            filter: blur(0px);
        }

        65% {
            transform: scaleX(0.96) scaleY(1.06) translateY(3px);
        }

        82% {
            transform: scaleX(1.02) scaleY(0.98);
        }

        100% {
            transform: scaleX(1) scaleY(1) translateY(0);
            border-radius: 0;
        }
    }

    /* ── TX02. GLITCH SHATTER ────────────────────────────────────────────────── */
    [data-tx-effect="glitch-shatter"] span {
        animation-name: tx-glitch-shatter !important;
        animation-duration: 1.2s !important;
        animation-timing-function: steps(1, end) !important;
    }

    @keyframes tx-glitch-shatter {
        0% {
            opacity: 0;
            transform: translate(-8px, 0) skewX(20deg);
            filter: hue-rotate(90deg) saturate(3) blur(4px);
            color: #00ffff;
            text-shadow: 4px 0 #ff00ff, -4px 0 #00ff00;
        }

        12% {
            transform: translate(6px, -3px) skewX(-12deg);
            filter: hue-rotate(-90deg) saturate(4) blur(2px);
            color: #ff00ff;
            text-shadow: -6px 0 #00ffff, 6px 0 #ffff00;
            opacity: 1;
        }

        24% {
            transform: translate(-4px, 2px) scaleX(1.08);
            filter: hue-rotate(180deg) blur(1px);
            color: #ffff00;
            text-shadow: 3px 0 #ff0000;
        }

        38% {
            transform: translate(3px, 0) skewX(6deg);
            filter: saturate(2) blur(0.5px);
            color: var(--rm-accent-cyan);
            text-shadow: 0 0 8px var(--rm-accent-cyan);
        }

        55% {
            transform: translate(-1px, 0) skewX(-2deg);
            filter: saturate(1.2) blur(0px);
            color: inherit;
            text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
        }

        100% {
            transform: translate(0) skewX(0);
            filter: none;
            color: inherit;
            text-shadow: none;
            opacity: 1;
        }
    }

    /* ── TX03. MAGNETIC PULL ─────────────────────────────────────────────────── */
    [data-tx-effect="magnetic-pull"] span {
        animation-name: tx-magnetic-pull !important;
        animation-duration: 1.3s !important;
    }

    @keyframes tx-magnetic-pull {
        0% {
            opacity: 0;
            transform: perspective(800px) translateZ(-600px) rotateX(45deg) scale(0.1);
            filter: blur(30px);
        }

        50% {
            opacity: 1;
            transform: perspective(800px) translateZ(30px) rotateX(-8deg) scale(1.08);
            filter: blur(0);
        }

        70% {
            transform: perspective(800px) translateZ(-15px) rotateX(4deg) scale(0.97);
        }

        85% {
            transform: perspective(800px) translateZ(8px) rotateX(-2deg) scale(1.01);
        }

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

    /* ── TX04. NEON STRIKE ───────────────────────────────────────────────────── */
    [data-tx-effect="neon-strike"] span {
        animation-name: tx-neon-strike !important;
        animation-duration: 1.0s !important;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    @keyframes tx-neon-strike {
        0% {
            opacity: 0;
            clip-path: inset(0 100% 0 0);
            text-shadow:
                0 0 6px var(--rm-accent-cyan),
                0 0 20px var(--rm-accent-cyan),
                0 0 60px var(--rm-accent-cyan);
            color: #fff;
        }

        30% {
            opacity: 1;
            clip-path: inset(0 40% 0 0);
            text-shadow: 0 0 10px var(--rm-accent-cyan), 0 0 40px var(--rm-accent-cyan);
        }

        70% {
            clip-path: inset(0 0% 0 0);
            text-shadow: 0 0 6px var(--rm-accent-cyan), 0 0 15px var(--rm-accent-cyan);
        }

        100% {
            clip-path: inset(0 0% 0 0);
            text-shadow: none;
            opacity: 1;
        }
    }

    /* ── TX05. HOLOGRAPHIC RISE ──────────────────────────────────────────────── */
    [data-tx-effect="holo-rise"] span {
        animation-name: tx-holo-rise !important;
        animation-duration: 1.5s !important;
    }

    @keyframes tx-holo-rise {
        0% {
            opacity: 0;
            transform: translateY(60px) scaleY(0.6);
            filter: hue-rotate(0deg) saturate(4) brightness(2);
            color: #00ffff;
            text-shadow: 0 -10px 30px rgba(0, 255, 255, 0.8);
        }

        25% {
            opacity: 1;
            transform: translateY(20px) scaleY(0.85);
            filter: hue-rotate(120deg) saturate(3) brightness(1.8);
            color: #ff00ff;
        }

        50% {
            transform: translateY(-8px) scaleY(1.05);
            filter: hue-rotate(240deg) saturate(2) brightness(1.4);
            color: #ffff00;
        }

        75% {
            transform: translateY(4px) scaleY(0.98);
            filter: hue-rotate(360deg) saturate(1.2) brightness(1.1);
        }

        100% {
            opacity: 1;
            transform: translateY(0) scaleY(1);
            filter: none;
            text-shadow: none;
        }
    }

    /* ── TX06. SHOCKWAVE BLAST ───────────────────────────────────────────────── */
    [data-tx-effect="shockwave"] span {
        animation-name: tx-shockwave !important;
        animation-duration: 1.0s !important;
        animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    @keyframes tx-shockwave {
        0% {
            opacity: 0;
            transform: scale(3.5);
            filter: blur(16px) brightness(3);
            letter-spacing: 0.5em;
        }

        35% {
            opacity: 1;
            transform: scale(0.9);
            filter: blur(0) brightness(1.3);
            letter-spacing: -0.02em;
        }

        55% {
            transform: scale(1.04);
            letter-spacing: -0.01em;
        }

        100% {
            opacity: 1;
            transform: scale(1);
            filter: none;
            letter-spacing: inherit;
        }
    }

    /* ── TX07. PHANTOM TYPEWRITER ────────────────────────────────────────────── */
    [data-tx-effect="phantom-type"] span {
        animation-name: tx-phantom-type !important;
        animation-duration: 1.4s !important;
        animation-timing-function: steps(14, end) !important;
    }

    @keyframes tx-phantom-type {
        0% {
            clip-path: inset(0 100% 0 0);
            opacity: 0.6;
            text-shadow: 2px 0 12px var(--rm-accent-cyan);
            color: var(--rm-accent-cyan);
        }

        80% {
            clip-path: inset(0 0% 0 0);
            opacity: 1;
            text-shadow: 0 0 8px var(--rm-accent-cyan);
            color: var(--rm-accent-cyan);
        }

        100% {
            clip-path: inset(0 0% 0 0);
            opacity: 1;
            text-shadow: none;
            color: inherit;
        }
    }

    /* ── TX08. GRAVITY COLLAPSE ──────────────────────────────────────────────── */
    [data-tx-effect="gravity-drop"] span {
        animation-name: tx-gravity-drop !important;
        animation-duration: 1.2s !important;
        animation-timing-function: cubic-bezier(0.55, 0, 0.45, 1) !important;
    }

    @keyframes tx-gravity-drop {
        0% {
            opacity: 0;
            transform: translateY(-120px) rotateZ(-8deg) scaleX(0.8);
        }

        40% {
            opacity: 1;
            transform: translateY(16px) rotateZ(3deg) scaleX(1.04);
        }

        58% {
            transform: translateY(-8px) rotateZ(-1.5deg) scaleX(0.99);
        }

        74% {
            transform: translateY(5px) rotateZ(0.8deg) scaleX(1.01);
        }

        88% {
            transform: translateY(-2px) rotateZ(0deg);
        }

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

    /* ── TX09. VOID EMERGE ───────────────────────────────────────────────────── */
    [data-tx-effect="void-emerge"] span {
        animation-name: tx-void-emerge !important;
        animation-duration: 1.3s !important;
        transform-style: preserve-3d;
    }

    @keyframes tx-void-emerge {
        0% {
            opacity: 0;
            transform: perspective(600px) translateZ(-1200px) scale(0);
            filter: brightness(4) blur(20px);
            letter-spacing: -0.3em;
        }

        45% {
            opacity: 1;
            transform: perspective(600px) translateZ(20px) scale(1.05);
            filter: brightness(1.5) blur(0);
            letter-spacing: 0.05em;
        }

        70% {
            transform: perspective(600px) translateZ(-8px) scale(0.99);
            letter-spacing: 0.01em;
        }

        100% {
            opacity: 1;
            transform: perspective(600px) translateZ(0) scale(1);
            filter: none;
            letter-spacing: inherit;
        }
    }

    /* ── TX10. AURORA WIPE ───────────────────────────────────────────────────── */
    [data-tx-effect="aurora-wipe"] span {
        animation-name: tx-aurora-wipe !important;
        animation-duration: 1.5s !important;
        position: relative;
        background: linear-gradient(135deg,
                #00d4ff 0%, #a855f7 25%, #f472b6 50%, #f59e0b 75%, #10b981 100%);
        background-size: 400%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    @keyframes tx-aurora-wipe {
        0% {
            opacity: 0;
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            background-position: 0% 50%;
            transform: skewX(-15deg);
        }

        40% {
            opacity: 1;
            clip-path: polygon(0 0, 110% 0, 110% 100%, 0 100%);
            background-position: 100% 50%;
            transform: skewX(0deg);
        }

        100% {
            opacity: 1;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            background-position: 50% 50%;
            transform: skewX(0deg);
        }
    }

    /* ============================================================================
       SECTION 13 · 8 CINEMATIC MASK REVEAL EFFECTS
       Usage: <div class="roopm-animate" data-roopm-effect="mask-iris">...</div>
       ============================================================================ */
    [data-roopm-effect^="mask-"],
    [data-roopm-effect^="reveal-"] {
        animation-duration: 1.2s;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
        animation-fill-mode: both;
        animation-timeline: view();
        animation-range: entry 5% cover 45%;
    }

    /* ── M1. IRIS CINEMATIC ────────────────────────────────────────────────── */
    [data-roopm-effect="mask-iris"] {
        animation-name: mask-iris;
        animation-duration: 1.4s;
    }

    @keyframes mask-iris {
        0% {
            clip-path: circle(0% at 50% 50%);
            opacity: 0;
            filter: brightness(2);
        }

        30% {
            filter: brightness(1.6);
            opacity: 1;
        }

        100% {
            clip-path: circle(150% at 50% 50%);
            opacity: 1;
            filter: brightness(1);
        }
    }

    /* ── M2. VENETIAN BLINDS ───────────────────────────────────────────────── */
    [data-roopm-effect="mask-venetian"] {
        animation-name: mask-venetian;
        animation-duration: 1.1s;
        animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    }

    @keyframes mask-venetian {
        0% {
            clip-path: polygon(0 0%, 10% 0%, 10% 0%, 0 0%,
                    0 20%, 10% 20%, 10% 20%, 0 20%,
                    0 40%, 10% 40%, 10% 40%, 0 40%,
                    0 60%, 10% 60%, 10% 60%, 0 60%,
                    0 80%, 10% 80%, 10% 80%, 0 80%);
            opacity: 0;
        }

        60% {
            opacity: 1;
        }

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

    /* ── M3. PORTAL FRACTURE ───────────────────────────────────────────────── */
    [data-roopm-effect="mask-portal"] {
        animation-name: mask-portal;
        animation-duration: 1.3s;
    }

    @keyframes mask-portal {
        0% {
            clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
            opacity: 0;
            filter: brightness(3) saturate(2);
        }

        30% {
            filter: brightness(1.8) saturate(1.5);
            opacity: 1;
        }

        70% {
            clip-path: polygon(0% 0%, 34% 0%, 50% 15%, 66% 0%, 100% 0%, 100% 50%, 85% 66%, 100% 100%, 50% 100%, 0% 100%, 15% 66%, 0% 50%);
            filter: brightness(1.2);
        }

        100% {
            clip-path: polygon(0% 0%, 33% 0%, 50% 0%, 66% 0%, 100% 0%, 100% 50%, 100% 66%, 100% 100%, 50% 100%, 0% 100%, 0% 66%, 0% 50%);
            opacity: 1;
            filter: brightness(1);
        }
    }

    /* ── M4. INK BLEED ─────────────────────────────────────────────────────── */
    [data-roopm-effect="mask-ink"] {
        animation-name: mask-ink;
        animation-duration: 1.6s;
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes mask-ink {
        0% {
            clip-path: ellipse(0% 0% at 48% 52%);
            opacity: 0;
            filter: blur(8px);
        }

        15% {
            clip-path: ellipse(12% 8% at 48% 52%);
            opacity: 1;
            filter: blur(4px);
        }

        40% {
            clip-path: ellipse(45% 35% at 52% 48%);
            filter: blur(2px);
        }

        65% {
            clip-path: ellipse(75% 65% at 50% 50%);
            filter: blur(0.5px);
        }

        100% {
            clip-path: ellipse(150% 150% at 50% 50%);
            opacity: 1;
            filter: blur(0);
        }
    }

    /* ── M5. SPLIT CURTAIN ─────────────────────────────────────────────────── */
    [data-roopm-effect="mask-curtain"] {
        animation-name: mask-curtain;
        animation-duration: 1.1s;
        animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    }

    @keyframes mask-curtain {
        0% {
            clip-path: polygon(25% 0%, 75% 0%, 75% 100%, 25% 100%);
            opacity: 0;
        }

        40% {
            opacity: 1;
        }

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

    /* ── M6. SPOTLIGHT SWEEP ───────────────────────────────────────────────── */
    [data-roopm-effect="mask-spotlight"] {
        animation-name: mask-spotlight;
        animation-duration: 1.3s;
    }

    @keyframes mask-spotlight {
        0% {
            clip-path: ellipse(10% 80% at -10% 50%);
            opacity: 0.3;
            filter: brightness(2);
        }

        40% {
            clip-path: ellipse(25% 100% at 40% 50%);
            opacity: 1;
            filter: brightness(1.6);
        }

        70% {
            clip-path: ellipse(60% 120% at 70% 50%);
            filter: brightness(1.2);
        }

        100% {
            clip-path: ellipse(200% 200% at 50% 50%);
            opacity: 1;
            filter: brightness(1);
        }
    }

    /* ── M7. QUANTUM GRID ──────────────────────────────────────────────────── */
    [data-roopm-effect="mask-quantum"] {
        animation-name: mask-quantum;
        animation-duration: 1.2s;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }

    @keyframes mask-quantum {
        0% {
            clip-path: polygon(0 100%, 0 100%, 0 100%);
            opacity: 0;
            filter: blur(6px) brightness(2);
        }

        25% {
            clip-path: polygon(0 60%, 40% 0%, 40% 0%, 0 60%);
            opacity: 1;
            filter: blur(2px) brightness(1.5);
        }

        55% {
            clip-path: polygon(0 20%, 100% 0%, 100% 60%, 0 100%);
            filter: blur(0.5px) brightness(1.1);
        }

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

    /* ── M8. VORTEX EXPAND ─────────────────────────────────────────────────── */
    [data-roopm-effect="mask-vortex"] {
        animation-name: mask-vortex;
        animation-duration: 1.4s;
    }

    @keyframes mask-vortex {
        0% {
            clip-path: polygon(50% 40%, 60% 50%, 50% 60%, 40% 50%);
            opacity: 0;
            filter: blur(12px) brightness(3) saturate(2);
            transform: rotate(-20deg) scale(0.5);
        }

        30% {
            opacity: 1;
            filter: blur(4px) brightness(1.8) saturate(1.5);
            transform: rotate(-8deg) scale(0.85);
        }

        65% {
            clip-path: polygon(0% 20%, 80% 0%, 100% 80%, 20% 100%);
            filter: blur(1px) brightness(1.2);
            transform: rotate(-2deg) scale(1.02);
        }

        100% {
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            opacity: 1;
            filter: blur(0) brightness(1) saturate(1);
            transform: rotate(0deg) scale(1);
        }
    }

    /* ============================================================================
       SECTION 14 · PARALLAX SYSTEM
       Usage: <div class="roopm-parallax-wrapper" style="height:400px">
                  <div class="roopm-parallax-inner" data-parallax="y">
                      <img src="..." alt="">
                  </div>
              </div>
       ============================================================================ */
    .roopm-parallax-wrapper {
        overflow: clip;
        border-radius: 20px;
        position: relative;
    }

    .roopm-parallax-inner {
        width: 100%;
        height: 100%;
        transform: translateZ(0);
        will-change: transform;
        animation-timeline: view();
        animation-timing-function: linear;
        animation-fill-mode: both;
    }

    .roopm-parallax-inner[data-parallax="y"] {
        animation-name: rm-para-y;
        animation-range: entry 0% exit 100%;
    }

    @keyframes rm-para-y {
        0% {
            transform: translateZ(0) scale(1.4) translateY(60px);
        }

        50% {
            transform: translateZ(0) scale(1.3) translateY(0);
        }

        100% {
            transform: translateZ(0) scale(1.4) translateY(-60px);
        }
    }

    .roopm-parallax-inner[data-parallax="x"] {
        animation-name: rm-para-x;
        animation-range: entry 0% exit 100%;
    }

    @keyframes rm-para-x {
        0% {
            transform: translateZ(0) scale(1.4) translateX(60px);
        }

        50% {
            transform: translateZ(0) scale(1.3) translateX(0);
        }

        100% {
            transform: translateZ(0) scale(1.4) translateX(-60px);
        }
    }

    /* ============================================================================
       SECTION 15 · SCRUBBING EFFECTS
       Usage: add class directly to element
       ============================================================================ */
    .roopm-scrub-rotate {
        display: inline-block;
        animation: scrub-rot linear both !important;
        animation-timeline: view() !important;
        animation-range: cover 0% cover 100% !important;
    }

    @keyframes scrub-rot {
        to {
            transform: rotate(360deg);
        }
    }

    .roopm-scrub-blur {
        display: inline-block;
        animation: scrub-blur linear both !important;
        animation-timeline: view() !important;
        animation-range: cover 0% cover 100% !important;
    }

    @keyframes scrub-blur {

        0%,
        100% {
            filter: blur(20px);
            opacity: 0.1;
        }

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

    .roopm-scrub-color {
        animation: scrub-col linear both !important;
        animation-timeline: view() !important;
        animation-range: cover 0% cover 100% !important;
    }

    @keyframes scrub-col {
        0% {
            background-color: var(--rm-bg-card);
            color: var(--rm-text-muted);
        }

        50% {
            background-color: rgba(0, 212, 255, 0.12);
            color: var(--rm-accent-cyan);
            border-color: var(--rm-accent-cyan);
        }

        100% {
            background-color: var(--rm-bg-card);
            color: var(--rm-text-muted);
        }
    }

    /* ============================================================================
       SECTION 16 · HORIZONTAL SCROLL SYSTEM
       Usage:
         <section class="roopm-horizontal-section">
           <div class="roopm-horizontal-sticky">
             <div class="roopm-horizontal-track">
               <div class="roopm-card roopm-horizontal-panel">...</div>
             </div>
           </div>
         </section>
       ============================================================================ */
    .roopm-horizontal-section {
        height: 400vh;
        view-timeline-name: --hz-scroll;
        position: relative;
    }

    .roopm-horizontal-sticky {
        position: sticky;
        top: 100px;
        height: calc(100vh - 100px);
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .roopm-horizontal-track {
        display: flex;
        gap: clamp(1.5rem, 3vw, 3rem);
        padding: 0 clamp(2rem, 5vw, 5rem);
        width: max-content;
        animation: hz-move linear both;
        animation-timeline: --hz-scroll;
        animation-range: contain 0% contain 100%;
    }

    @keyframes hz-move {
        to {
            transform: translateX(min(0px, calc(-100% + 100vw)));
        }
    }

    .roopm-horizontal-panel {
        width: clamp(320px, 60vw, 900px);
        height: 65vh;
        text-align: center;
        align-items: center;
        border: 1px solid var(--rm-border);
    }

    /* ============================================================================
       SECTION 17 · STACKING CARDS SYSTEM
       Usage:
         <div class="roopm-stack-wrap">
           <div class="roopm-stack-card">...</div>
           <div class="roopm-stack-card">...</div>
         </div>
       ============================================================================ */
    .roopm-stack-wrap {
        display: flex;
        flex-direction: column;
        padding-bottom: 20vh;
        gap: 2rem;
    }

    .roopm-stack-card {
        position: sticky;
        top: 15vh;
        min-height: 35vh;
        border-radius: 20px;
        background: var(--rm-bg-card);
        border: 1px solid var(--rm-border);
        padding: clamp(2rem, 4vw, 4rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
        transform-origin: top center;
        box-shadow: var(--rm-shadow);
        animation: stack-compress linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 100%;
    }

    @keyframes stack-compress {
        to {
            transform: scale(0.90);
            opacity: 0.5;
            filter: blur(3px);
        }
    }

    /* ============================================================================
       SECTION 18 · PIN SYSTEM
       Usage:
         <div class="roopm-pin-container">
           <div class="roopm-pin">
             <!-- your pinned content -->
           </div>
         </div>
       ============================================================================ */
    .roopm-pin-container {
        height: 300vh;
        position: relative;
        view-timeline-name: --roopm-pin;
    }

    .roopm-pin {
        height: 100vh;
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    /* ============================================================================
       SECTION 19 · 15 ADVANCED TYPOGRAPHY FEATURES
       Each uses view-timeline on .roopm-card-large parent via --rm2-card-tl
       ============================================================================ */

    /* Establish card timeline for advanced features */
    .roopm-card-large {
        view-timeline: --rm2-card-tl block;
    }

    /* ──────────────────────────────────────────────────────────────────────────
       FEATURE 01 · LIQUID TYPEWRITER
       Usage:
         <div class="roopm-typewriter-container">
           <div class="roopm-typewriter">
             Hello,&nbsp;
             <span class="roopm-tw-viewport">
               <span class="roopm-tw-word" style="--order:0;--chars:7">Creators</span>
               <span class="roopm-tw-word" style="--order:1;--chars:8">Builders</span>
               <span class="roopm-tw-word" style="--order:2;--chars:8">Dreamers</span>
             </span>
             <span class="roopm-tw-caret"></span>
           </div>
         </div>
    ────────────────────────────────────────────────────────────────────────── */
    .roopm-typewriter-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .roopm-typewriter {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.1ch;
        font-family: ui-monospace, 'Courier New', monospace;
        font-size: clamp(1.2rem, 2.5vw, 1.8rem);
        font-weight: 600;
        line-height: 1.2;
    }

    .roopm-tw-viewport {
        display: inline-grid;
        align-items: center;
    }

    .roopm-tw-word {
        grid-area: 1 / 1;
        overflow: hidden;
        white-space: nowrap;
        width: 0ch;
        color: var(--rm-accent-cyan);
        font-weight: 700;
        animation: rm-type-cycle 9s steps(var(--chars, 7), jump-end) infinite;
        animation-delay: calc(var(--order) * -3s);
    }

    @keyframes rm-type-cycle {
        0% {
            width: 0ch;
        }

        8% {
            width: calc(var(--chars) * 1ch);
        }

        27% {
            width: calc(var(--chars) * 1ch);
        }

        35% {
            width: 0ch;
        }

        100% {
            width: 0ch;
        }
    }

    .roopm-tw-caret {
        display: inline-block;
        width: 3px;
        height: 1.25em;
        background: var(--rm-accent-cyan);
        margin-left: 4px;
        border-radius: 1px;
        box-shadow: 0 0 8px var(--rm-accent-cyan), 0 0 20px rgba(0, 212, 255, 0.4);
        animation: rm-caret-blink 0.8s steps(1) infinite;
    }

    @keyframes rm-caret-blink {
        50% {
            opacity: 0;
        }
    }

    /* ──────────────────────────────────────────────────────────────────────────
       FEATURE 02 · APPLE-STYLE WORD WASH
       Usage:
         <p class="roopm-scrub-words">
           <span style="--rm-i:0">Your</span>
           <span style="--rm-i:1">words</span>
           <span style="--rm-i:2">light</span>
           <span style="--rm-i:3">up</span>
           <span style="--rm-i:4">as</span>
           <span style="--rm-i:5">you</span>
           <span style="--rm-i:6">scroll.</span>
         </p>
    ────────────────────────────────────────────────────────────────────────── */
    .roopm-scrub-words {
        font-size: clamp(1.4rem, 2.8vw, 2.2rem);
        font-weight: 600;
        line-height: 1.5;
        max-width: 25ch;
        text-align: center;
    }

    .roopm-scrub-words span {
        display: inline-block;
        color: var(--rm-text-main);
        opacity: 0.15;
        animation: rm2-word-light linear both;
        animation-timeline: --rm2-card-tl;
        animation-range-start: calc(10% + (var(--rm-i) * 2.8%));
        animation-range-end: calc(20% + (var(--rm-i) * 2.8%));
    }

    @keyframes rm2-word-light {
        to {
            opacity: 1;
            color: var(--rm-accent-cyan);
        }
    }

    /* ──────────────────────────────────────────────────────────────────────────
       FEATURE 03 · CINEMATIC STROKE-TO-FILL
       Usage:
         <div class="roopm-stroke-fill">
           <span class="roopm-sf-outline">CINEMA</span>
           <span class="roopm-sf-fill" data-text="CINEMA">CINEMA</span>
         </div>
    ────────────────────────────────────────────────────────────────────────── */
    .roopm-stroke-fill {
        position: relative;
        display: inline-block;
        font-size: clamp(1.5rem, 3vw, 2.8rem);
        font-weight: 800;
    }

    .roopm-sf-outline {
        color: transparent;
        -webkit-text-stroke: 1.5px rgba(240, 240, 255, 0.4);
    }

    .roopm-sf-fill {
        position: absolute;
        inset: 0;
        color: var(--rm-accent-cyan);
        background: var(--rm-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        clip-path: inset(100% 0 0 0);
        animation: rm2-sf-wipe linear both;
        animation-timeline: --rm2-card-tl;
        animation-range: entry 10% cover 55%;
    }

    @keyframes rm2-sf-wipe {
        to {
            clip-path: inset(0% 0 0 0);
        }
    }

    /* ──────────────────────────────────────────────────────────────────────────
       FEATURE 04 · MULTI-LAYER DEPTH PARALLAX
       Usage:
         <div class="roopm-depth-wrap">
           <div class="roopm-depth-layer depth-back">DEPTH</div>
           <div class="roopm-depth-layer depth-mid">DEPTH</div>
           <div class="roopm-depth-layer depth-front">DEPTH</div>
         </div>
    ────────────────────────────────────────────────────────────────────────── */
    .roopm-depth-wrap {
        position: relative;
        min-height: 350px;
        width: 100%;
        perspective: 900px;
    }

    .roopm-depth-layer {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 800;
        letter-spacing: 0.3em;
        white-space: nowrap;
        animation: rm2-depth-drift linear both;
        animation-timeline: --rm2-card-tl;
        animation-range: cover 0% cover 100%;
    }

    .depth-back {
        font-size: clamp(3rem, 11vw, 8rem);
        color: rgba(0, 212, 255, 0.05);
        --rm2-dz: 70px;
    }

    .depth-mid {
        font-size: clamp(2rem, 7vw, 4.5rem);
        color: rgba(168, 85, 247, 0.15);
        --rm2-dz: 35px;
    }

    .depth-front {
        font-size: clamp(1.2rem, 4vw, 2.5rem);
        color: var(--rm-text-main);
        --rm2-dz: 0px;
    }

    @keyframes rm2-depth-drift {
        0% {
            transform: translateY(calc(var(--rm2-dz) * 1.5)) scale(0.95);
        }

        100% {
            transform: translateY(calc(var(--rm2-dz) * -1.5)) scale(1.05);
        }
    }

    /* ──────────────────────────────────────────────────────────────────────────
       FEATURE 05 · SVG GENERATIVE PATTERN DRAW
       Usage:
         <div class="roopm-generative-wrap">
           <svg class="roopm-gen-svg" viewBox="0 0 550 80">
             <text class="roopm-gen-text" x="50%" y="70" text-anchor="middle"
                   font-family="Space Grotesk" font-size="72" font-weight="800">
               DRAW
             </text>
           </svg>
         </div>
    ────────────────────────────────────────────────────────────────────────── */
    .roopm-generative-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .roopm-gen-svg {
        width: min(95%, 550px);
        overflow: visible;
    }

    .roopm-gen-text {
        fill: transparent;
        stroke: var(--rm-accent-cyan);
        stroke-width: 1.5;
        stroke-dasharray: 400;
        stroke-dashoffset: 400;
        animation-name: rm2-gen-draw, rm2-gen-fill;
        animation-duration: auto, auto;
        animation-timing-function: linear, linear;
        animation-fill-mode: both, both;
        animation-timeline: --rm2-card-tl, --rm2-card-tl;
        animation-range: entry 5% cover 50%, cover 40% cover 80%;
    }

    @keyframes rm2-gen-draw {
        to {
            stroke-dashoffset: 0;
        }
    }

    @keyframes rm2-gen-fill {
        to {
            fill: var(--rm-text-main);
            stroke: none;
        }
    }

    /* ──────────────────────────────────────────────────────────────────────────
       FEATURE 06 · FROSTED GLASS REFRACTION
       Usage:
         <div class="roopm-frost-wrap">
           <div class="roopm-frost-bg"></div>
           <span class="roopm-frost-static">FROSTED</span>
           <div class="roopm-frost-pane"></div>
         </div>
    ────────────────────────────────────────────────────────────────────────── */
    .roopm-frost-wrap {
        position: relative;
        width: 100%;
        min-height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #040406;
        overflow: hidden;
        border-radius: 16px;
    }

    .roopm-frost-bg {
        position: absolute;
        inset: -20%;
        background: conic-gradient(from 0deg,
                var(--rm-accent-cyan),
                var(--rm-accent-purple),
                var(--rm-accent-pink),
                var(--rm-accent-cyan));
        filter: blur(60px);
        opacity: 0.25;
        animation: rm2-frost-bg-spin 10s linear infinite;
    }

    @keyframes rm2-frost-bg-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .roopm-frost-static {
        position: relative;
        z-index: 2;
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 800;
        font-size: clamp(1.8rem, 4vw, 3.2rem);
        letter-spacing: 0.4em;
        text-indent: 0.4em;
        color: var(--rm-text-main);
    }

    .roopm-frost-pane {
        position: absolute;
        top: -10%;
        bottom: -10%;
        left: -30%;
        width: 25%;
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(14px) saturate(160%);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        transform: skewX(-12deg);
        z-index: 3;
        animation: rm2-frost-sweep linear both;
        animation-timeline: --rm2-card-tl;
        animation-range: cover 0% cover 100%;
    }

    @keyframes rm2-frost-sweep {
        to {
            left: 110%;
        }
    }

    /* ──────────────────────────────────────────────────────────────────────────
       FEATURE 07 · CINEMATIC DEPTH-OF-FIELD FOCUS RACK
       Usage:
         <div class="roopm-dof-wrap">
           <span class="roopm-dof roopm-text-gradient">FOCUS</span>
         </div>
    ────────────────────────────────────────────────────────────────────────── */
    .roopm-dof-wrap {
        view-timeline: --dof-tl block;
        display: inline-block;
    }

    .roopm-dof {
        display: inline-block;
        font-size: clamp(1.8rem, 4.5vw, 3.8rem);
        animation: rm2-dof-focus linear both;
        animation-timeline: --dof-tl;
        animation-range: entry 10% cover 60%;
    }

    @keyframes rm2-dof-focus {
        0% {
            transform: scale(2.4);
            filter: blur(20px);
            opacity: 0.2;
        }

        60% {
            transform: scale(1.08);
            filter: blur(2px);
            opacity: 1;
        }

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

    /* ──────────────────────────────────────────────────────────────────────────
       FEATURE 08 · ISOMETRIC 3D EXTRUSION
       Usage:
         <div class="roopm-iso-wrap">
           <span class="roopm-iso">ISO</span>
         </div>
    ────────────────────────────────────────────────────────────────────────── */
    .roopm-iso-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 900px;
    }

    .roopm-iso {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 800;
        font-size: clamp(2.2rem, 5.5vw, 4.2rem);
        color: var(--rm-accent-gold);
        transform-style: preserve-3d;
        animation: rm2-iso-extrude linear both;
        animation-timeline: --rm2-card-tl;
        animation-range: entry 0% cover 75%;
    }

    @keyframes rm2-iso-extrude {
        0% {
            transform: rotateX(0deg) rotateZ(0deg);
            text-shadow: none;
        }

        100% {
            transform: rotateX(50deg) rotateZ(-30deg);
            text-shadow:
                1px 1px 0 #d97706, 2px 2px 0 #d97706, 3px 3px 0 #d97706,
                4px 4px 0 #b45309, 5px 5px 0 #b45309, 6px 6px 0 #b45309,
                7px 7px 10px rgba(0, 0, 0, 0.6);
        }
    }

    /* ──────────────────────────────────────────────────────────────────────────
       FEATURE 09 · TEXT-TO-INTERFACE ZOOM REVEAL
       Usage:
         <div class="roopm-t2i-wrap">
           <span class="roopm-t2i-label">ZOOM</span>
           <div class="roopm-t2i-ui">
             <div class="roopm-t2i-mock-grid">
               <span></span><span></span><span></span>
               <span></span><span></span><span></span>
             </div>
           </div>
         </div>
    ────────────────────────────────────────────────────────────────────────── */
    .roopm-t2i-wrap {
        position: relative;
        width: 100%;
        min-height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #050507;
        border-radius: 16px;
        overflow: hidden;
    }

    .roopm-t2i-label {
        position: absolute;
        z-index: 2;
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 800;
        font-size: clamp(2.5rem, 6vw, 5rem);
        letter-spacing: 0.3em;
        text-indent: 0.3em;
        background: var(--rm-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: rm2-t2i-zoom linear both;
        animation-timeline: --rm2-card-tl;
        animation-range: cover 0% cover 55%;
    }

    @keyframes rm2-t2i-zoom {
        0% {
            transform: scale(0);
            opacity: 1;
            filter: blur(0);
        }

        60% {
            transform: scale(2.2);
            opacity: 0;
            filter: blur(5px);
        }

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

    .roopm-t2i-ui {
        position: absolute;
        inset: 15px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.01);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        animation: rm2-t2i-reveal linear both;
        animation-timeline: --rm2-card-tl;
        animation-range: cover 45% cover 75%;
    }

    @keyframes rm2-t2i-reveal {
        from {
            opacity: 0;
            transform: scale(0.92);
        }

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

    .roopm-t2i-mock-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        width: 90%;
        max-width: 500px;
    }

    .roopm-t2i-mock-grid span {
        height: 50px;
        background: rgba(0, 212, 255, 0.05);
        border: 1px solid rgba(0, 212, 255, 0.15);
        border-radius: 8px;
    }

    /* ──────────────────────────────────────────────────────────────────────────
       FEATURE 10 · AGGRESSIVE CHROMATIC ABERRATION GLITCH
       Usage:
         <div class="roopm-glitch-wrap">
           <span class="roopm-glitch-text" data-text="GLITCH">GLITCH</span>
         </div>
    ────────────────────────────────────────────────────────────────────────── */
    .roopm-glitch-wrap {
        display: inline-block;
        position: relative;
    }

    .roopm-glitch-text {
        font-family: 'Space Grotesk', sans-serif;
        font-size: clamp(2rem, 5vw, 4.5rem);
        font-weight: 800;
        letter-spacing: 0.05em;
        color: var(--rm-text-main);
        position: relative;
        animation: rm2-glitch-main linear both;
        animation-timeline: --rm2-card-tl;
        animation-range: entry 10% cover 60%;
    }

    .roopm-glitch-text::before,
    .roopm-glitch-text::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--rm-bg-card);
    }

    .roopm-glitch-text::before {
        color: #0ff;
        z-index: -1;
        animation: rm2-glitch-cyan linear both;
        animation-timeline: --rm2-card-tl;
        animation-range: entry 10% cover 60%;
    }

    .roopm-glitch-text::after {
        color: #f0f;
        z-index: -2;
        animation: rm2-glitch-magenta linear both;
        animation-timeline: --rm2-card-tl;
        animation-range: entry 10% cover 60%;
    }

    @keyframes rm2-glitch-main {
        0% {
            opacity: 0;
            transform: skewX(20deg);
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
        }

        20% {
            opacity: 1;
            transform: skewX(-10deg);
        }

        40% {
            transform: skewX(5deg);
        }

        60% {
            transform: skewX(0deg);
            filter: drop-shadow(0 0 0px transparent);
        }

        100% {
            transform: skewX(0deg);
        }
    }

    @keyframes rm2-glitch-cyan {
        0% {
            clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
            transform: translate(-15px, 5px);
            opacity: 1;
        }

        20% {
            clip-path: polygon(0 20%, 100% 20%, 100% 60%, 0 60%);
            transform: translate(10px, -5px);
        }

        40% {
            clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
            transform: translate(-5px, 2px);
        }

        60% {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            transform: translate(0, 0);
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes rm2-glitch-magenta {
        0% {
            clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%);
            transform: translate(15px, -5px);
            opacity: 1;
        }

        20% {
            clip-path: polygon(0 40%, 100% 40%, 100% 80%, 0 80%);
            transform: translate(-10px, 5px);
        }

        40% {
            clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
            transform: translate(5px, -2px);
        }

        60% {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            transform: translate(0, 0);
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }

    /* ──────────────────────────────────────────────────────────────────────────
       FEATURE 11 · VARIABLE FONT MORPHING
       Usage:
         <div class="rm2-varfont-scene">
           <div class="rm2-varfont-stage">
             <span class="rm2-vf-bg-text">MORPH</span>
             <span class="rm2-varfont">MORPH</span>
             <span class="rm2-vf-particle p1"></span>
             <span class="rm2-vf-particle p2"></span>
             <span class="rm2-vf-particle p3"></span>
             <span class="rm2-vf-particle p4"></span>
             <span class="rm2-vf-particle p5"></span>
             <span class="rm2-vf-particle p6"></span>
           </div>
         </div>
    ────────────────────────────────────────────────────────────────────────── */
    .rm2-varfont-scene {
        view-timeline: --vf-scene-tl block;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2em;
        padding: 1rem 0;
    }

    .rm2-vf-label {
        font-family: 'Space Grotesk', sans-serif;
        font-size: clamp(1.2rem, 2vw, 1.6rem);
        font-weight: 500;
        color: var(--rm-text-muted);
        letter-spacing: -0.01em;
        animation: rm2-vf-label-in linear both;
        animation-timeline: --vf-scene-tl;
        animation-range: entry 0% cover 30%;
    }

    .rm2-vf-dot {
        color: var(--rm-accent-cyan);
        font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    }

    @keyframes rm2-vf-label-in {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

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

    .rm2-varfont-stage {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.3em 0.1em;
    }

    .rm2-vf-bg-text {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 800;
        font-size: clamp(3rem, 7vw, 6rem);
        letter-spacing: -0.04em;
        background: linear-gradient(135deg, var(--rm-accent-cyan), var(--rm-accent-purple));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: blur(28px);
        opacity: 0;
        animation: rm2-vf-glow-pulse linear both;
        animation-timeline: --vf-scene-tl;
        animation-range: cover 25% cover 80%;
        pointer-events: none;
        user-select: none;
    }

    @keyframes rm2-vf-glow-pulse {
        0% {
            opacity: 0;
            transform: scale(0.8);
        }

        40% {
            opacity: 0.9;
            transform: scale(1.15);
        }

        70% {
            opacity: 0.7;
            transform: scale(1.05);
        }

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

    .rm2-varfont {
        font-family: 'Space Grotesk', sans-serif;
        font-variation-settings: "wght" 300;
        font-size: clamp(3rem, 7vw, 6rem);
        letter-spacing: 0.12em;
        display: inline-block;
        position: relative;
        z-index: 2;
        animation: rm2-varfont-morph linear both;
        animation-timeline: --vf-scene-tl;
        animation-range: cover 20% cover 75%;
    }

    @keyframes rm2-varfont-morph {
        0% {
            font-variation-settings: "wght" 200;
            letter-spacing: 0.22em;
            color: rgba(107, 114, 128, 0.5);
            text-shadow: none;
            transform: scaleY(0.88);
            opacity: 0.5;
        }

        30% {
            font-variation-settings: "wght" 500;
            letter-spacing: 0.08em;
            color: var(--rm-text-main);
            transform: scaleY(1);
            opacity: 1;
        }

        65% {
            font-variation-settings: "wght" 750;
            letter-spacing: -0.02em;
            color: var(--rm-accent-cyan);
            text-shadow: 0 0 30px rgba(0, 212, 255, 0.6), 0 0 80px rgba(0, 212, 255, 0.2);
            transform: scaleY(1.04);
        }

        100% {
            font-variation-settings: "wght" 800;
            letter-spacing: -0.04em;
            color: #fff;
            text-shadow:
                0 0 20px rgba(0, 212, 255, 0.8),
                0 0 60px rgba(168, 85, 247, 0.5),
                0 0 120px rgba(0, 212, 255, 0.2);
            transform: scaleY(1.06);
        }
    }

    /* VF Particles */
    .rm2-vf-particle {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--rm-accent-cyan);
        opacity: 0;
        z-index: 1;
        animation: rm2-vf-particle-fly linear both;
        animation-timeline: --vf-scene-tl;
        animation-range: cover 40% cover 85%;
    }

    .rm2-vf-particle.p1 {
        top: 10%;
        left: 5%;
        background: var(--rm-accent-cyan);
        --vfp-tx: -25px;
        --vfp-ty: -20px;
        width: 6px;
        height: 6px;
    }

    .rm2-vf-particle.p2 {
        top: 20%;
        right: 8%;
        background: var(--rm-accent-purple);
        --vfp-tx: 20px;
        --vfp-ty: -25px;
        width: 4px;
        height: 4px;
    }

    .rm2-vf-particle.p3 {
        bottom: 15%;
        left: 10%;
        background: var(--rm-accent-pink);
        --vfp-tx: -20px;
        --vfp-ty: 20px;
        width: 5px;
        height: 5px;
    }

    .rm2-vf-particle.p4 {
        bottom: 10%;
        right: 5%;
        background: var(--rm-accent-gold);
        --vfp-tx: 25px;
        --vfp-ty: 18px;
        width: 4px;
        height: 4px;
    }

    .rm2-vf-particle.p5 {
        top: 50%;
        left: 2%;
        background: rgba(0, 212, 255, 0.7);
        --vfp-tx: -30px;
        --vfp-ty: -5px;
        width: 3px;
        height: 3px;
    }

    .rm2-vf-particle.p6 {
        top: 50%;
        right: 2%;
        background: rgba(168, 85, 247, 0.7);
        --vfp-tx: 30px;
        --vfp-ty: -5px;
        width: 3px;
        height: 3px;
    }

    @keyframes rm2-vf-particle-fly {
        0% {
            opacity: 0;
            transform: translate(0, 0) scale(0);
        }

        30% {
            opacity: 1;
            transform: translate(calc(var(--vfp-tx) * 0.3), calc(var(--vfp-ty) * 0.3)) scale(1.4);
        }

        100% {
            opacity: 0;
            transform: translate(var(--vfp-tx), var(--vfp-ty)) scale(0.5);
        }
    }

    /* ──────────────────────────────────────────────────────────────────────────
       FEATURE 12 · KINETIC TYPOGRAPHY DRIFT (Marquee)
       Usage:
         <div class="roopm-kinetic-wrap">
           <div class="roopm-kinetic-track">
             KINETIC&nbsp;·&nbsp;KINETIC&nbsp;·&nbsp;KINETIC&nbsp;·&nbsp;KINETIC&nbsp;·&nbsp;
             KINETIC&nbsp;·&nbsp;KINETIC&nbsp;·&nbsp;KINETIC&nbsp;·&nbsp;KINETIC&nbsp;·&nbsp;
           </div>
         </div>
    ────────────────────────────────────────────────────────────────────────── */
    .roopm-kinetic-wrap {
        position: relative;
        min-height: 180px;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: linear-gradient(135deg, #07070c, #0a0a14);
        border-radius: 16px;
    }

    .roopm-kinetic-track {
        display: flex;
        white-space: nowrap;
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 800;
        font-size: clamp(3rem, 10vw, 7rem);
        color: transparent;
        -webkit-text-stroke: 1.5px rgba(0, 212, 255, 0.35);
        animation: rm2-kinetic-drift 12s linear infinite;
        will-change: transform;
    }

    @keyframes rm2-kinetic-drift {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-50%);
        }
    }

    /* ──────────────────────────────────────────────────────────────────────────
       FEATURE 13 · LIQUID AURORA TEXT MASK
       Usage:
         <div class="roopm-aurora-wrap">
           <span class="roopm-aurora-text" data-text="AURORA">AURORA</span>
         </div>
    ────────────────────────────────────────────────────────────────────────── */
    .roopm-aurora-wrap {
        position: relative;
        width: 100%;
        min-height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .roopm-aurora-text {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 800;
        font-size: clamp(3rem, 8vw, 6.5rem);
        letter-spacing: -0.02em;
        background: linear-gradient(-45deg,
                #ff0055, #00d4ff, #a855f7, #ffb800, #00d4ff, #ff0055);
        background-size: 400% 400%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        position: relative;
        z-index: 2;
        filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.3));
        animation: rm2-aurora-flow linear both;
        animation-timeline: --rm2-card-tl;
        animation-range: entry 0% cover 100%;
    }

    /* Glowing aura layer behind text */
    .roopm-aurora-text::before {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        z-index: -1;
        background: inherit;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        filter: blur(30px);
        opacity: 0.8;
    }

    @keyframes rm2-aurora-flow {
        0% {
            background-position: 0% 50%;
            transform: scale(0.95);
        }

        50% {
            background-position: 100% 50%;
            transform: scale(1.05);
            filter: drop-shadow(0 0 40px rgba(168, 85, 247, 0.6));
        }

        100% {
            background-position: 0% 50%;
            transform: scale(1);
        }
    }

    /* ──────────────────────────────────────────────────────────────────────────
       FEATURE 14 · SCATTERED 3D LETTER RE-ASSEMBLY
       Usage:
         <div style="text-align:center">
           <span class="roopm-scatter-assemble">
             <span style="--rm-i:1">S</span>
             <span style="--rm-i:2">C</span>
             <span style="--rm-i:3">A</span>
             <span style="--rm-i:4">T</span>
             <span style="--rm-i:5">T</span>
             <span style="--rm-i:6">E</span>
             <span style="--rm-i:7">R</span>
           </span>
         </div>
    ────────────────────────────────────────────────────────────────────────── */
    .roopm-scatter-assemble {
        display: inline-flex;
        perspective: 800px;
        font-size: clamp(2.5rem, 6.5vw, 5rem);
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 800;
    }

    .roopm-scatter-assemble span {
        display: inline-block;
        transform-style: preserve-3d;
        animation: rm2-scatter-scroll linear both;
        animation-timeline: --rm2-card-tl;
        animation-range: entry 10% cover 65%;
    }

    .roopm-scatter-assemble span:nth-child(odd) {
        --rm-sign: 1;
    }

    .roopm-scatter-assemble span:nth-child(even) {
        --rm-sign: -1;
    }

    @keyframes rm2-scatter-scroll {
        0% {
            transform:
                translate3d(calc(var(--rm-i, 1) * 14px * var(--rm-sign, 1)),
                    calc(var(--rm-i, 1) * -12px),
                    calc(var(--rm-i, 1) * -90px)) rotateY(calc(var(--rm-i, 1) * 22deg));
            opacity: 0.1;
        }

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

    /* ──────────────────────────────────────────────────────────────────────────
       FEATURE 15 · CINEMATIC MEDIA MASK ZOOM
       Usage:
         <div class="roopm-cinematic-mask-wrap">
           <span class="roopm-cinematic-mask">CINEMA</span>
         </div>
    ────────────────────────────────────────────────────────────────────────── */
    .roopm-cinematic-mask-wrap {
        width: 100%;
        min-height: 350px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 16px;
        background: var(--rm-bg-base);
    }

    .roopm-cinematic-mask {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 800;
        font-size: clamp(3rem, 10vw, 8rem);
        line-height: 1;
        letter-spacing: -0.02em;
        background-image: url("https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1200");
        background-size: 150% 150%;
        background-position: center;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.8));
        transform-origin: center;
        animation: rm2-cinematic-zoom linear both;
        animation-timeline: --rm2-card-tl;
        animation-range: entry 0% cover 80%;
    }

    @keyframes rm2-cinematic-zoom {
        0% {
            transform: scale(4) translateY(20px);
            background-position: 0% 0%;
            filter: brightness(1.5) contrast(1.2) drop-shadow(0 0 0 transparent);
        }

        100% {
            transform: scale(1) translateY(0);
            background-position: 100% 100%;
            filter: brightness(1) contrast(1) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.8));
        }
    }

}

/* end @supports (animation-timeline: view()) */

/* ============================================================================
   SECTION 20 · RESPONSIVE BREAKPOINTS
   ============================================================================ */
@media (max-width: 900px) {
    .roopm-bento-master {
        grid-template-columns: repeat(10, 1fr);
        gap: 14px
    }

    .rm-c1 {
        grid-column: 1 / 7;
        grid-row: 1 / 3;
        min-height: 280px;
    }

    .rm-c2 {
        grid-column: 7 / 11;
        grid-row: 1;
        min-height: 135px;
    }

    .rm-c3 {
        grid-column: 7 / 11;
        grid-row: 2;
        min-height: 135px;
    }

    .rm-c4 {
        grid-column: 1 / 11;
        grid-row: 4;
        min-height: 200px;
    }

    .rm-c5 {
        grid-column: 1 / 5;
        grid-row: 3;
        min-height: 140px;
    }

    .rm-c6 {
        grid-column: 5 / 11;
        grid-row: 3;
        min-height: 140px;
    }
}

@media (max-width: 768px) {
    .roopm-nav-links {
        display: none;
    }

    .roopm-span-2 {
        grid-column: span 1;
    }

    .roopm-horizontal-panel {
        width: 85vw;
    }

    .roopm-parallax-wrapper {
        height: 300px !important;
    }
}

@media (min-width: 2500px) {
    .roopm-horizontal-section {
        height: auto;
    }

    .roopm-horizontal-sticky {
        position: relative;
        height: auto;
        top: 0;
    }

    .roopm-horizontal-track {
        animation: none;
        transform: none !important;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        padding: 4rem 0;
    }
}


/* ============================================================================
   SECTION 21 · REDUCED MOTION SUPPORT
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {

    /* Stop continuous infinite animations for motion-sensitive users */
    .roopm-tw-word,
    .roopm-tw-caret,
    .roopm-frost-bg,
    .roopm-kinetic-track,
    .roopm-glow-orb,
    .roopm-continuous-float {
        animation: none !important;
    }

    /* Show hidden elements in a visible resting state */
    .roopm-tw-word:first-child {
        width: auto;
    }

    .roopm-tw-word:not(:first-child) {
        display: none;
    }

    /* Disable scroll-driven animations via simplification */
    .roopm-animate,
    .roopm-text-effect span,
    [data-roopm-effect^="mask-"],
    [data-roopm-effect^="reveal-"],
    .roopm-scrub-rotate,
    .roopm-scrub-blur,
    .roopm-scrub-color {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
}

/* ============================================================================
   SECTION 22 · BROWSER FALLBACK (@supports NOT view())
   Ensures content is visible in Firefox/older browsers
   ============================================================================ */
@supports not (animation-timeline: view()) {

    /* --- Core animations: show all content --- */
    .roopm-animate,
    .roopm-text-effect span,
    [data-roopm-effect^="mask-"],
    [data-roopm-effect^="reveal-"] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        animation: none !important;
    }

    /* --- Aurora wipe: fix invisible gradient text --- */
    [data-tx-effect="aurora-wipe"] span {
        -webkit-text-fill-color: var(--rm-text-main) !important;
    }

    /* --- Typewriter: show first word only --- */
    .roopm-tw-word {
        animation: none;
        width: auto;
        position: static;
    }

    .roopm-tw-word:not(:first-child) {
        display: none;
    }

    .roopm-tw-caret {
        animation: none;
    }

    /* --- Advanced Typography Features: show in resting state --- */
    .roopm-scrub-words span,
    .roopm-sf-fill,
    .roopm-depth-layer,
    .roopm-frost-pane,
    .roopm-dof,
    .roopm-iso,
    .roopm-t2i-label,
    .roopm-t2i-ui,
    .roopm-glitch-text,
    .rm2-varfont,
    .rm2-vf-bg-text,
    .rm2-vf-particle,
    .roopm-aurora-text,
    .roopm-scatter-assemble span,
    .roopm-cinematic-mask {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        stroke-dashoffset: 0 !important;
    }

    /* Specific fallback overrides */
    .roopm-gen-text {
        fill: var(--rm-text-main);
        stroke: none;
    }

    .roopm-glitch-text::before,
    .roopm-glitch-text::after {
        display: none;
    }

    .roopm-t2i-ui {
        opacity: 1;
    }

    .rm2-varfont {
        font-variation-settings: "wght" 700;
        color: var(--rm-text-main);
    }

    .roopm-sf-fill {
        clip-path: none;
    }

    .roopm-scrub-words span {
        opacity: 1;
        color: var(--rm-text-main);
    }

    /* --- Parallax: static scale so image fills container --- */
    .roopm-parallax-inner {
        transform: translateZ(0) scale(1.15);
        animation: none;
    }

    /* --- Layout: collapse scroll-based layouts --- */
    .roopm-horizontal-section,
    .roopm-pin-container {
        height: auto;
    }

    .roopm-horizontal-sticky,
    .roopm-pin {
        position: relative;
        height: auto;
        top: 0;
        overflow: visible;
    }

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

    .roopm-horizontal-panel,
    .roopm-stack-card {
        width: 100%;
        margin-bottom: 1rem;
        position: relative;
        top: 0;
        animation: none;
    }
}

/*! ═══════════════════════════════════════════════════════════════════════════
    RoopM-ScrollTrigger v20.0 | End of Library
    All 30+ features unified. Zero JavaScript. Pure CSS Power.
    ═══════════════════════════════════════════════════════════════════════════ */


/* ============================================================================
   SECTION 23 · NEXT-GEN SCROLL-MORPHING NAVIGATION SYSTEM (OPTIMIZED)
   ============================================================================ */
:root {
    --rm-nav-h: 74px;
    --rm-nav-glass: rgba(10, 10, 15, 0.75);
    --rm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --rm-ease-3d: cubic-bezier(0.25, 1, 0.5, 1);
    --rm-z-page: 1;
    --rm-z-overlay: 800;
    --rm-z-header: 900;
}

/* ── 1. 3D CINEMATIC PAGE PUSH ── */
.roopm-page-content {
    position: relative;
    z-index: var(--rm-z-page);
    transition: transform 0.6s var(--rm-ease-3d), filter 0.6s var(--rm-ease-3d), border-radius 0.6s var(--rm-ease-3d);
    transform-origin: left center;
    background: var(--rm-bg-base);
    min-height: 100vh;
    will-change: transform, filter;
    /* GPU Acceleration */
}

body.rm-sidebar-active .roopm-page-content {
    transform: perspective(1500px) translateZ(-120px) translateX(-40px) rotateY(-3deg);
    filter: blur(10px) brightness(0.4);
    border-radius: 24px;
    pointer-events: none;
    overflow: hidden;
}

html.rm-sidebar-lock,
body.rm-sidebar-active {
    overflow: hidden;
}

/* ── 2. HEADER SCROLL-MORPHING (Pure CSS Scroll Timeline) ── */
.rm-header {
    position: fixed;
    top: 24px;
    left: 0;
    width: 100%;
    z-index: var(--rm-z-header);
    padding: 0 clamp(1.5rem, 6vw, 8rem);
    pointer-events: none;
    transition: top 0.4s var(--rm-ease-out), padding 0.4s var(--rm-ease-out);
}

.rm-bar {
    pointer-events: auto;
    position: relative;
    background: var(--rm-nav-glass);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    border-radius: 18px;
    height: var(--rm-nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    box-shadow: var(--rm-shadow), 0 20px 50px -20px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: height 0.4s var(--rm-ease-out), background 0.4s, box-shadow 0.4s, border-color 0.4s;
}

/* Laser Border Beam */
.rm-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--rm-beam-angle, 0deg), transparent 20%, #00d4ff 40%, #a855f7 60%, transparent 80%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: rm-beam 5s linear infinite;
    opacity: 0.6;
}

@property --rm-beam-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes rm-beam {
    to {
        --rm-beam-angle: 360deg;
    }
}

/* Scroll Timeline animations */
@supports (animation-timeline: scroll()) {
    .rm-header {
        animation: header-shrink linear both;
        animation-timeline: scroll(root);
        animation-range: 0px 120px;
    }

    .rm-bar {
        animation: bar-shrink linear both;
        animation-timeline: scroll(root);
        animation-range: 0px 120px;
    }
}

@keyframes header-shrink {
    to {
        top: 12px;
        padding: 0 clamp(1rem, 5vw, 7rem);
    }
}

@keyframes bar-shrink {
    to {
        height: 62px;
        background: rgba(8, 8, 12, 0.92);
        border-color: rgba(255, 255, 255, 0.12);
    }
}

/* JS Fallbacks */
body.rm-scrolled .rm-header {
    top: 12px;
    padding: 0 clamp(1rem, 5vw, 7rem);
}

body.rm-scrolled .rm-bar {
    height: 62px;
    background: rgba(8, 8, 12, 0.92);
}

/* ── 3. ADAPTIVE MENU ── */
.rm-nav {
    height: 100%;
    display: flex;
    align-items: center;
}

.rm-mobile-top {
    display: none;
}

.rm-list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    height: 100%;
    position: relative;
}

/* Hover tracker pill */
.rm-tracker {
    position: absolute;
    height: 38px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transform: translateX(0) scale(0.9);
    transition: opacity 0.3s var(--rm-ease-out), transform 0.4s var(--rm-ease-out), width 0.4s var(--rm-ease-out);
}

.rm-item {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
}

.rm-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--rm-text-muted);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: color 0.3s;
    user-select: none;
}

.rm-item:hover .rm-link,
.rm-item.desktop-active .rm-link {
    color: var(--rm-text-main);
}

/* SVG Arrow */
.rm-arrow {
    transition: transform 0.3s var(--rm-ease-out);
    display: inline-block;
}

.rm-item:hover .rm-arrow,
.rm-item.desktop-active .rm-arrow {
    transform: rotate(180deg);
}

/* Dropdowns */
.rm-sub {
    position: absolute;
    top: calc(var(--rm-nav-h) - 10px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(12, 12, 18, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    width: 220px;
    padding: 0.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--rm-ease-out), transform 0.3s var(--rm-ease-out);
    z-index: 1000;
    will-change: transform, opacity;
}

.rm-item:hover .rm-sub,
.rm-item.desktop-active .rm-sub {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Rapid Smooth Collapse on Option click */
.rm-item.rm-dropdown-closed .rm-sub {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(12px) !important;
    transition: opacity 0.25s var(--rm-ease-out), transform 0.25s var(--rm-ease-out) !important;
}

.rm-sub-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rm-sub a {
    display: block;
    color: var(--rm-text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    transition: all 0.2s;
}

.rm-sub a:hover {
    color: var(--rm-accent-cyan);
    background: rgba(0, 212, 255, 0.05);
    padding-left: 1rem;
}

/* ── 4. MOBILE SIDEBAR ── */
@media (max-width: 1024px) {
    .rm-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(320px, 86vw);
        height: 100vh;
        height: 100dvh;
        background: rgba(8, 8, 12, 0.98);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: -30px 0 80px rgba(0, 0, 0, 0.9);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 2.5rem 2rem;
        overflow-y: auto;
        z-index: 5;
        pointer-events: auto;
        transition: right 0.5s var(--rm-ease-3d);
        touch-action: pan-y;
        user-select: none;
    }

    body.rm-sidebar-active .rm-nav {
        right: 0;
    }

    .rm-mobile-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 2.5rem;
    }

    .rm-close {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #fff;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        cursor: pointer;
    }

    .rm-list {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        height: auto;
        gap: 0.5rem;
    }

    .rm-item {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        height: auto;
    }

    .rm-link {
        width: 100%;
        padding: 1rem 0;
        justify-content: space-between;
        font-size: 1.15rem;
        color: rgba(255, 255, 255, 0.85);
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .rm-item.active .rm-link {
        color: var(--rm-accent-cyan);
    }

    .rm-tracker {
        display: none !important;
    }

    /* Mobile Accordion Toggle */
    .rm-sub {
        position: static;
        transform: none !important;
        opacity: 1;
        pointer-events: auto;
        width: 100%;
        padding: 0;
        box-shadow: none;
        background: transparent;
        border: none;
        border-radius: 0;
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.35s var(--rm-ease-out);
    }

    .rm-item.active .rm-sub {
        grid-template-rows: 1fr;
    }

    .rm-sub-inner {
        overflow: hidden;
        padding-left: 1.2rem;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        padding-top: 0.4rem;
    }

    .rm-sub-inner a {
        padding: 0.7rem 0;
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.6);
        border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    }

    .rm-item.active .rm-arrow {
        transform: rotate(180deg);
        color: var(--rm-accent-cyan);
    }
}

/* --- Mobile Hamburger Toggle --- */
.rm-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 2;
}

.rm-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    transition: transform 0.3s var(--rm-ease-out), opacity 0.3s;
}

body.rm-sidebar-active .rm-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

body.rm-sidebar-active .rm-toggle span:nth-child(2) {
    opacity: 0;
}

body.rm-sidebar-active .rm-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 1024px) {
    .rm-toggle {
        display: flex;
    }
}

/* --- Sidebar Overlay --- */
.rm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    z-index: var(--rm-z-overlay);
    transition: opacity 0.5s ease;
}

body.rm-sidebar-active .rm-overlay {
    opacity: 1;
    pointer-events: auto;
}