/* ═══════════════════════════════════════════════════ Rolling Prompt — Desert Hero Scene | hero-desert-scene.css Include this after style.css in your ═══════════════════════════════════════════════════ */ /* ── Scene wrapper ───────────────────────────────── */ #rp-desert-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0 !important; } /* ── Foreground wrapper ──────────────────────────── */ #rp-desert-foreground { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1 !important; } #rp-desert-tumbleweeds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3 !important; } /* Restore inversion layer and push above fixed frame (1200) */ .mil-banner.mil-dark-bg::before { z-index: 1300 !important; } .mil-banner.mil-dark-bg .mi-invert-fix { position: relative; z-index: 1400 !important; /* Protect content/video from inversion */ } /* ── Video Background ──────────────────────────── */ .rp-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; /* Behind everything else in the scene */ pointer-events: none; } .rp-video-bg video { width: 100%; height: 100%; min-width: 100%; min-height: 100%; object-fit: cover; object-position: center bottom; } .rp-video-overlay { position: absolute; inset: 0; z-index: 2; /* Between video and particles */ background: #000; opacity: 0; display: none; } @media (max-width: 768px) { .rp-video-pc { display: none !important; } .rp-video-mb { display: block !important; } .rp-video-bg video { object-position: right center !important; } } @media (min-width: 769px) { .rp-video-pc { display: block !important; } .rp-video-mb { display: none !important; } } /* ── Film-grain noise overlay ────────────────────── */ #rp-grain { position: absolute; inset: -10%; /* slightly oversized so edge clipping isn't visible */ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; opacity: 0.045; mix-blend-mode: overlay; animation: rp-grain-jitter 0.12s steps(1) infinite; z-index: 1; will-change: transform; } @keyframes rp-grain-jitter { 0% { transform: translate(0, 0); } 10% { transform: translate(-3%, -2%); } 20% { transform: translate(2%, 3%); } 30% { transform: translate(-1%, 4%); } 40% { transform: translate(3%, -2%); } 50% { transform: translate(-2%, 2%); } 60% { transform: translate(4%, -3%); } 70% { transform: translate(-3%, 1%); } 80% { transform: translate(2%, -4%); } 90% { transform: translate(-4%, 3%); } 100% { transform: translate(0, 0); } } /* ── Desert silhouette ground strip ─────────────── */ /* ── Wind stream layers ──────────────────────────── */ .rp-wind-layer { position: absolute; width: clamp(260px, 28vw, 380px); pointer-events: none; z-index: 1; /* opacity/x animation driven by GSAP */ } /* ── Dust particle canvas ────────────────────────── */ #rp-dust-canvas { position: absolute; inset: 0; z-index: 1; opacity: 0.6; } /* ── Tumbleweeds ─────────────────────────────────── */ .rp-tumbleweed { position: absolute; bottom: clamp(60px, 9vh, 110px); /* left/transform driven by GSAP */ z-index: 1; will-change: transform; } .rp-tumbleweed svg { display: block; filter: drop-shadow(0 3px 12px rgba(255, 152, 0, 0.3)); } .rp-tumbleweed svg * { fill: #a46200 !important; stroke: #a46200 !important; } /* ── Subtle warm horizon glow ────────────────────── */ .mil-banner.mil-dark-bg::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient( to top, rgba(255, 120, 0, 0.06) 0%, transparent 100% ); z-index: 1; pointer-events: none; } /* ── Ensure the banner itself is position:relative ─ */ .mil-banner.mil-dark-bg { position: relative; overflow: hidden; /* clip tumbleweeds that roll off-screen */ }