/* ============================================================ FX LAYER — dot-matrix ambience for the Monako mirror Loaded after the app bundle; everything lives in overlay elements appended to , never inside #root, so React reconciliation is untouched. ============================================================ */ /* ---- scroll progress hairline ---- */ #fx-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #ffffff 0%, #8b76ff 55%, #5cf2e6 100%); transform-origin: 0 50%; transform: scaleX(0); z-index: 2147483640; pointer-events: none; mix-blend-mode: screen; box-shadow: 0 0 12px rgba(139, 118, 255, 0.55); } /* ---- interactive dot-matrix field ---- */ #fx-field { position: fixed; inset: 0; z-index: 2147483620; pointer-events: none; mix-blend-mode: screen; } /* ---- cinematic vignette ---- */ #fx-vignette { position: fixed; inset: 0; z-index: 2147483610; pointer-events: none; background: radial-gradient( ellipse at 50% 45%, transparent 62%, rgba(0, 0, 0, 0.38) 100% ); } /* ---- animated film grain ---- */ #fx-grain { position: fixed; inset: -100%; width: 300%; height: 300%; z-index: 2147483615; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: fx-grain-shift 1.2s steps(6) infinite; } @keyframes fx-grain-shift { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -2%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } } @media (prefers-reduced-motion: reduce) { #fx-grain { animation: none; } } /* ---- custom cursor (fine pointers only; JS adds .fx-cursor) ---- */ html.fx-cursor, html.fx-cursor * { cursor: none !important; } html.fx-cursor input, html.fx-cursor textarea, html.fx-cursor select, html.fx-cursor [contenteditable] { cursor: auto !important; } #fx-dot, #fx-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: difference; will-change: transform; } #fx-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #ffffff; z-index: 2147483646; } #fx-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgba(255, 255, 255, 0.7); z-index: 2147483645; transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease, border-color 0.25s ease, opacity 0.3s ease; } #fx-ring.fx-hover { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-color: rgba(139, 118, 255, 0.95); box-shadow: 0 0 18px rgba(139, 118, 255, 0.4); } #fx-dot.fx-hidden, #fx-ring.fx-hidden { opacity: 0; } /* ---- selection + scrollbar, matched to the accent ---- */ ::selection { background: #8b76ff; color: #000000; } ::-webkit-scrollbar { width: 10px; background: #000000; } ::-webkit-scrollbar-thumb { background: #232323; border: 2px solid #000000; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #8b76ff; }