/* ============================================================================ marquee-canvas.css Add to AFTER your main styles.css: ============================================================================ */ #mc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; border-radius: inherit; cursor: default; } #mc-canvas .m-item { position: absolute; border-radius: 6px; overflow: hidden; will-change: transform; transform-origin: center center; } #mc-canvas .m-item img, #mc-canvas .m-item video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; } #mc-lines { display: none; } /* ---------------------------------------------------------------------------- Scrim — light directional vignette. Particles are small so heavy darkening isn't needed. Bump opacity values if text becomes hard to read. ---------------------------------------------------------------------------- */ .mc-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: linear-gradient( 135deg, rgba(8, 8, 8, 0.55) 0%, rgba(8, 8, 8, 0.0) 50% ), linear-gradient( to top, rgba(8, 8, 8, 0.50) 0%, rgba(8, 8, 8, 0.0) 40% ), linear-gradient( to left, rgba(8, 8, 8, 0.40) 0%, rgba(8, 8, 8, 0.0) 40% ); } #marquee .overlay-content { position: relative; z-index: 3; } #mc-cursor { display: none; } /* ---------------------------------------------------------------------------- Reduced-motion: canvas stays visible, animation stops (handled in JS) ---------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .mc-scrim { background: rgba(8, 8, 8, 0.55); } } #marquee .overlay-content h1 { text-shadow: 0 2px 20px rgba(0,0,0,0.5); } #marquee .overlay-content a, #marquee .overlay-content p { text-shadow: 0 1px 8px rgba(0,0,0,0.8); } #marquee .overlay-content ul a { text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 0 20px rgba(0,0,0,0.8); }