/* * tty-portfolio — matrix-overlay * * Standalone stylesheet for the full-screen matrix entrance effect. * Enqueue independently so other templates can opt-in without loading it globally. * * Uses theme CSS tokens (--accent, --accent-2, --bg, --fg-dim, --font-mono) * so it automatically adapts to both dark and light modes. * * Trigger via JS: window.ttyMatrix.run({ countFrom: element, onDone: fn }) * Required class: .matrix-overlay (created by matrix.js, appended to ) */ /* ── Overlay container ──────────────────────────────────────── */ .matrix-overlay { position: fixed; inset: 0; z-index: 9999; display: grid; grid-template-columns: repeat(var(--mtx-cols), var(--mtx-fs)); font-family: var(--font-mono); font-size: var(--mtx-fs); line-height: var(--mtx-lh); /* theme accent (dark: #6ee7b7 mint / light: #16a34a green) */ color: var(--accent); /* matches site background so the seam is invisible */ background: var(--bg); overflow: hidden; pointer-events: none; user-select: none; /* background dissolve + opacity fade are driven by JS */ transition: background 0.45s ease, opacity 0.5s ease; } /* ── Individual glyph cells ─────────────────────────────────── */ .matrix-overlay span { display: inline-block; text-align: center; opacity: 0.8; } /* Cell just written — flash in accent-2 (cyan) with glow */ .matrix-overlay span.bright { color: var(--accent-2); text-shadow: 0 0 10px var(--accent), 0 0 4px var(--accent-2); opacity: 1; } /* Background depth: dimmer cells recede visually */ .matrix-overlay span.dim { color: var(--fg-dim); opacity: 0.28; } /* Light mode: suppress the glow — it looks harsh on pale backgrounds */ @media (prefers-color-scheme: light) { :root:not([data-theme]) .matrix-overlay span.bright { text-shadow: none; } } [data-theme="light"] .matrix-overlay span.bright { text-shadow: none; }