/* ============================================================ crt.css — authentic phosphor-CRT enclosure for cyberdeck Effects live on non-text overlay layers so the prose stays crisp. Intensity is gated by (default full). ============================================================ */ :root { --crt-grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44MiIgbnVtT2N0YXZlcz0iMiIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjbikiLz48L3N2Zz4="); --crt-phosphor: 25, 247, 194; /* rgb of the neon green, for glows */ } /* ---- the monitor enclosure ---------------------------------------------- * * A single fixed stack of pointer-events:none layers painted above the page. * Each layer is a child of #crt so we can blend them independently. */ #crt { position: fixed; inset: 0; z-index: 9000; pointer-events: none; overflow: hidden; } #crt > * { position: absolute; inset: 0; } /* 1 — fine scanlines (the horizontal raster) */ .crt-scanlines { background: repeating-linear-gradient( 0deg, rgba(0,0,0,0.32) 0, rgba(0,0,0,0.32) 1px, rgba(0,0,0,0.00) 1px, rgba(0,0,0,0.00) 3px); mix-blend-mode: multiply; } /* 2 — aperture-grille / shadow-mask (subtle vertical RGB triads) */ .crt-mask { background: repeating-linear-gradient( 90deg, rgba(255,0,60,0.05) 0, rgba(255,0,60,0.05) 1px, rgba(0,255,170,0.05) 1px, rgba(0,255,170,0.05) 2px, rgba(60,120,255,0.05) 2px, rgba(60,120,255,0.05) 3px); mix-blend-mode: screen; opacity: 0.6; } /* 3 — phosphor bloom (overall green glow blooming from the center) */ .crt-bloom { background: radial-gradient(ellipse at 50% 45%, rgba(var(--crt-phosphor), 0.10), rgba(var(--crt-phosphor), 0.03) 45%, transparent 70%); mix-blend-mode: screen; } /* 4 — glass curvature: vignette + corner darkening + top sheen. * Sells the bulged-screen look without geometrically warping text. */ .crt-glass { background: radial-gradient(120% 120% at 50% 50%, transparent 58%, rgba(0,0,0,0.45) 88%, rgba(0,0,0,0.75) 100%), radial-gradient(80% 50% at 50% 6%, rgba(255,255,255,0.05), transparent 60%); box-shadow: inset 0 0 120px rgba(0,0,0,0.55), inset 0 0 40px rgba(0,0,0,0.5); } /* 5 — chunky monitor bezel framing the viewport edges */ .crt-bezel { border-radius: 18px; box-shadow: inset 0 0 0 2px rgba(var(--crt-phosphor), 0.10), inset 0 0 0 14px #0a0d0c, inset 0 0 0 16px #05100c, inset 0 0 30px 16px rgba(0,0,0,0.8); } /* 6 — animated film grain */ .crt-grain { background-image: var(--crt-grain); background-size: 180px 180px; opacity: 0.05; mix-blend-mode: overlay; animation: crt-grain 0.6s steps(3) infinite; } @keyframes crt-grain { 0% { transform: translate(0,0); } 33% { transform: translate(-6px, 4px); } 66% { transform: translate(5px, -5px); } 100% { transform: translate(0,0); } } /* 7 — refresh roll: a faint bright bar slowly sweeping down the screen */ .crt-roll { background: linear-gradient(180deg, transparent 0%, rgba(var(--crt-phosphor), 0.05) 48%, rgba(var(--crt-phosphor), 0.09) 50%, rgba(var(--crt-phosphor), 0.05) 52%, transparent 100%); height: 40%; inset: -40% 0 auto 0; mix-blend-mode: screen; animation: crt-roll 7s linear infinite; } @keyframes crt-roll { 0% { transform: translateY(0); } 100% { transform: translateY(360%); } } /* 8 — global brightness flicker + a faint horizontal jitter */ .crt-flicker { background: rgba(var(--crt-phosphor), 0.015); animation: crt-flicker 5.5s infinite steps(1); } @keyframes crt-flicker { 0%, 96%, 100% { opacity: 0.12; } 97% { opacity: 0.28; } 98% { opacity: 0.06; } 99% { opacity: 0.22; } } /* ---- phosphor text treatment -------------------------------------------- * * Applied to the document, not an overlay — gives letters a soft halo and a * faint chromatic-aberration fringe. Kept light enough to stay readable. */ html.booting[data-crt="full"] body, html.booting[data-crt="subtle"] body { animation: crt-power 1.1s ease-out 1; } [data-crt="full"] .gh-content, [data-crt="full"] .post-card, [data-crt="full"] .site-head, [data-crt="full"] .site-foot { text-shadow: 0 0 1px rgba(var(--crt-phosphor), 0.55), -0.4px 0 0 rgba(255,0,80,0.18), 0.4px 0 0 rgba(0,160,255,0.18); } /* power-on flash + vertical unfurl */ @keyframes crt-power { 0% { filter: brightness(4) saturate(0); transform: scaleY(0.004); opacity: 0; } 8% { filter: brightness(4) saturate(0); transform: scaleY(0.004); opacity: 1; } 18% { transform: scaleY(1); } 30% { filter: brightness(1.6); } 100% { filter: brightness(1); transform: scaleY(1); } } /* ---- intensity modes ---------------------------------------------------- */ /* OFF: hide the whole enclosure, no text fringe, no animations */ [data-crt="off"] #crt { display: none; } [data-crt="off"] body { animation: none !important; } /* FULL: bow the static light layers through the SVG displacement filter so the scanlines/grille curve like real tube glass (text layers are untouched). */ [data-crt="full"] .crt-scanlines, [data-crt="full"] .crt-mask { filter: url(#crt-warp); } /* SUBTLE: keep static scanlines + vignette, drop the busy animated layers */ [data-crt="subtle"] .crt-mask, [data-crt="subtle"] .crt-grain, [data-crt="subtle"] .crt-roll, [data-crt="subtle"] .crt-flicker { display: none; } [data-crt="subtle"] .crt-scanlines { opacity: 0.5; } /* ---- the CRT toggle control --------------------------------------------- */ #crt-toggle { position: fixed; right: 14px; bottom: 14px; z-index: 9500; pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-family: "DOS", monospace; font-size: 13px; letter-spacing: 1px; color: #04140f; background: var(--neon, #19f7c2); border: 0; box-shadow: 0 0 12px rgba(var(--crt-phosphor), 0.6); } #crt-toggle:hover { background: #5cffd8; } #crt-toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: #04140f; box-shadow: 0 0 6px #04140f; } /* ---- scroll navigation buttons (back-to-top / jump-to-bottom) ----------- */ .scroll-nav-btn { position: fixed; z-index: 9500; pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; cursor: pointer; color: var(--neon, #19f7c2); background: rgba(5, 16, 13, 0.82); border: 1px solid var(--neon-dim, #0e8f73); box-shadow: 0 0 10px rgba(25, 247, 194, 0.18), inset 0 0 10px rgba(25, 247, 194, 0.06); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .22s ease, transform .22s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease; } .scroll-nav-btn svg { display: block; filter: drop-shadow(0 0 3px rgba(25, 247, 194, .5)); } .scroll-nav-btn:hover { color: #04140f; background: var(--neon, #19f7c2); border-color: var(--neon, #19f7c2); box-shadow: 0 0 16px rgba(25, 247, 194, 0.55); } .scroll-nav-btn:hover svg { filter: none; } .scroll-nav-btn:focus-visible { outline: 2px solid var(--neon, #19f7c2); outline-offset: 2px; } .scroll-nav-btn.show { opacity: 1; visibility: visible; transform: translateY(0); } /* back-to-top: bottom-right, above the CRT toggle. bottom:104px also clears the Ghost Portal trigger button (a ~98px-tall iframe pinned to this corner) so real clicks land on the arrow, not the Portal frame. */ #scroll-top { right: 14px; bottom: 104px; } /* jump-to-bottom: pinned bottom-center */ #scroll-bottom { left: 50%; bottom: 14px; transform: translateX(-50%) translateY(6px); } #scroll-bottom.show { transform: translateX(-50%) translateY(0); } @media (prefers-reduced-motion: reduce) { .scroll-nav-btn { transition: opacity .12s linear, visibility .12s linear; transform: none; } #scroll-bottom, #scroll-bottom.show { transform: translateX(-50%); } } /* ---- respect reduced-motion: kill animation, keep static texture -------- */ @media (prefers-reduced-motion: reduce) { .crt-grain, .crt-roll, .crt-flicker { animation: none; } .crt-roll, .crt-flicker { display: none; } [data-crt] body { animation: none !important; } } /* ── easter egg: bottom-left "relay" drop-box terminal ──────────────────── */ #egg-cursor { position: fixed; left: 13px; bottom: 11px; z-index: 9400; width: 11px; height: 17px; padding: 0; border: 0; cursor: pointer; background: var(--neon-dim, #0e8f73); box-shadow: 0 0 6px rgba(25, 247, 194, .45); opacity: .4; animation: egg-blink 1.15s steps(1, end) infinite; } #egg-cursor:hover, #egg-cursor:focus-visible { opacity: 1; background: var(--neon, #19f7c2); outline: none; box-shadow: 0 0 13px rgba(25, 247, 194, .85); animation: none; } @keyframes egg-blink { 0%, 55% { opacity: .4; } 56%, 100% { opacity: .07; } } #egg-term { position: fixed; left: 13px; bottom: 36px; z-index: 9460; width: min(560px, 92vw); height: min(366px, 62vh); display: flex; flex-direction: column; background: #02100c; border: 1px solid var(--neon, #19f7c2); box-shadow: 0 0 22px rgba(25, 247, 194, .28), inset 0 0 40px rgba(0, 0, 0, .55); } .egg-term-bar { display: flex; align-items: center; justify-content: space-between; padding: 5px 6px 5px 10px; background: rgba(25, 247, 194, .08); border-bottom: 1px solid var(--neon-dim, #0e8f73); font-family: "DOS", monospace; font-size: 12px; letter-spacing: 1px; color: var(--neon, #19f7c2); text-shadow: 0 0 5px rgba(25, 247, 194, .5); } .egg-term-close { background: 0; border: 0; padding: 0 6px; cursor: pointer; line-height: 1; font-size: 18px; color: var(--neon, #19f7c2); } .egg-term-close:hover { color: var(--magenta, #ff2a6d); } .egg-term-body { flex: 1 1 auto; min-height: 0; padding: 6px 4px 2px 8px; overflow: hidden; } .egg-term-body .xterm, .egg-term-body .xterm-viewport { height: 100% !important; } .egg-term-body .xterm-viewport::-webkit-scrollbar { width: 8px; } .egg-term-body .xterm-viewport::-webkit-scrollbar-thumb { background: var(--neon-dim, #0e8f73); } @media (prefers-reduced-motion: reduce) { #egg-cursor { animation: none; opacity: .42; } }