/* ===================================================================== JEREMYOS — CRT / SCREEN EFFECTS All effects are toggled by classes on : .fx-scanlines .fx-flicker .fx-crt .fx-glow .fx-cursor Absence of a class = that effect off. Everything degrades safely. ===================================================================== */ /* Overlay layer sits above content but ignores pointer events. */ .crt-overlay { position: fixed; inset: 0; z-index: 800; pointer-events: none; display: none; } .fx-scanlines .crt-overlay, .fx-crt .crt-overlay, .fx-flicker .crt-overlay { display: block; } /* Scanlines */ .fx-scanlines .crt-overlay::before { content:""; position:absolute; inset:0; background: repeating-linear-gradient( 0deg, rgba(0,0,0,.16) 0 1px, rgba(0,0,0,0) 1px 3px); mix-blend-mode: multiply; } /* Vignette + curvature */ .fx-crt .crt-overlay::after { content:""; position:absolute; inset:0; background: radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0,0,0,.55) 100%); box-shadow: inset 0 0 120px rgba(0,0,0,.5); } .fx-crt body { } /* Flicker (very light) */ @keyframes jos-flicker { 0%,100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .94; } 94% { opacity: 1; } 97% { opacity: .97; } } .fx-flicker.motion-ok .crt-overlay { animation: jos-flicker 6s infinite steps(60); } /* Phosphor glow on accent headings */ .fx-glow .pagehead h1, .fx-glow .sysline { text-shadow: var(--glow); } /* Custom cursor (non-touch only; applied by JS which also checks pointer) */ .fx-cursor, .fx-cursor * { cursor: url("assets/cursors/pointer.svg") 4 2, auto; } .fx-cursor a, .fx-cursor button, .fx-cursor .icon, .fx-cursor [role="button"], .fx-cursor .filterbtn, .fx-cursor summary { cursor: url("assets/cursors/link.svg") 8 2, pointer; } .fx-cursor input, .fx-cursor textarea { cursor: url("assets/cursors/text.svg") 4 8, text; } html.busy, html.busy * { cursor: url("assets/cursors/busy.svg") 8 8, progress !important; } /* CRT power-off easter egg */ @keyframes jos-crtoff { 0% { transform: scale(1,1); opacity:1; filter:brightness(1); } 55% { transform: scale(1,0.006); opacity:1; filter:brightness(3); } 70% { transform: scale(1,0.006); } 100% { transform: scale(0,0.0006); opacity:0; filter:brightness(6); } } @keyframes jos-crton { 0% { transform: scale(0,0.0006); opacity:0; filter:brightness(6); } 40% { transform: scale(1,0.006); opacity:1; filter:brightness(3);} 100% { transform: scale(1,1); opacity:1; filter:brightness(1);} } .crt-power-off { animation: jos-crtoff .5s forwards; overflow:hidden; } .crt-power-on { animation: jos-crton .5s forwards; } /* Boot + entry screens */ .overlay-screen { position: fixed; inset:0; z-index: 2000; background:#04070a; color:var(--ink); display:flex; align-items:center; justify-content:center; padding:24px; } .overlay-screen[hidden] { display:none; } .boot { font-family:var(--font-mono); color:var(--accent); font-size:clamp(.8rem,2.4vw,1rem); width:100%; max-width:680px; white-space:pre-wrap; line-height:1.7; } .boot .cursor-blink::after { content:"\2588"; animation: jos-blink 1s steps(1) infinite; } @keyframes jos-blink { 50% { opacity:0; } } .boot .skip { margin-top:22px; } .entry { text-align:center; max-width:560px; } .entry h1 { font-family:var(--font-mono); color:var(--accent); font-size:clamp(1.8rem,7vw,3.4rem); letter-spacing:.06em; text-shadow: var(--glow); margin:.1em 0; } .entry .who { color:var(--ink-dim); font-family:var(--font-mono); margin-bottom:26px; } .entry .who b { color:var(--ink); } .entry .choices { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .entry .foot { margin-top:26px; color:var(--ink-faint); font-size:.85rem; font-family:var(--font-mono); } /* ------------------------------------------------------------------ */ /* DESKTOP (homepage) */ /* ------------------------------------------------------------------ */ .desktop { position:relative; min-height: calc(100vh - var(--taskbar-h) - 2px); padding: 22px; } .desktop__icons { display:grid; grid-template-columns: repeat(auto-fill, 104px); gap: 6px 4px; align-content:start; } .icon { display:flex; flex-direction:column; align-items:center; gap:6px; width:104px; padding:10px 6px; text-decoration:none; color:var(--ink); border:1px solid transparent; text-align:center; cursor:pointer; background:none; font: inherit; } .icon:hover, .icon:focus-visible { background: rgba(51,255,136,.10); border:1px dotted var(--accent); color:var(--ink); } .icon .glyph { width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:1.4rem; color:#05120a; background:var(--accent); border:2px solid; box-shadow: var(--glow); border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); } .icon .glyph.alt { background: var(--accent-2); } .icon .glyph.mut { background: var(--bevel-face); color:#111; box-shadow:none; } .icon .label { font-family:var(--font-mono); font-size:.72rem; line-height:1.25; word-break:break-word; } /* Floating draggable windows spawned from icons */ .deskwin { position:absolute; z-index:600; width:min(440px, 86vw); background:var(--panel); border:2px solid; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); box-shadow: 6px 6px 0 rgba(0,0,0,.5); } .deskwin .win__bar { cursor:move; } .deskwin[hidden] { display:none; } /* The CRT TV on the desktop */ .tvset { display:flex; flex-direction:column; gap:0; } .tvset .screen { position:relative; aspect-ratio:4/3; background:#05070a; overflow:hidden; border:8px solid #16110c; border-radius:8px; } @keyframes jos-static { 0%{transform:translate(0,0)} 20%{transform:translate(-2%,1%)} 40%{transform:translate(1%,-2%)} 60%{transform:translate(-1%,2%)} 80%{transform:translate(2%,-1%)} 100%{transform:translate(0,0)} } .tvset .static { position:absolute; inset:-20%; background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px), repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 3px, transparent 3px 6px); opacity:.5; } .motion-ok .tvset .static { animation: jos-static .4s steps(5) infinite; } .tvset .playbtn { position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; background:rgba(5,18,10,.7); border:2px solid var(--accent); color:var(--accent); font-size:1.4rem; display:flex; align-items:center; justify-content:center; cursor:pointer; } /* Audio dock (mini player) */ .audio-dock { position: fixed; right: 14px; bottom: 14px; z-index: 700; width: 268px; background:var(--panel); border:2px solid; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); box-shadow: 4px 4px 0 rgba(0,0,0,.5); font-family:var(--font-mono); } .audio-dock[hidden]{ display:none; } .audio-dock.min .audio-dock__body { display:none; } .audio-dock__body { padding:10px; } .audio-dock .track { font-size:.72rem; color:var(--accent); height:1.2em; overflow:hidden; white-space:nowrap; } .audio-dock .vis { display:flex; gap:2px; align-items:flex-end; height:18px; margin:6px 0; } .audio-dock .vis i { width:4px; background:var(--accent); height:20%; display:block; } .motion-ok .audio-dock.playing .vis i { animation: jos-eq .8s ease-in-out infinite; } .audio-dock .vis i:nth-child(2){animation-delay:.1s} .audio-dock .vis i:nth-child(3){animation-delay:.2s} .audio-dock .vis i:nth-child(4){animation-delay:.3s} .audio-dock .vis i:nth-child(5){animation-delay:.15s} @keyframes jos-eq { 0%,100%{height:20%} 50%{height:100%} } .audio-dock .ctrls { display:flex; gap:4px; margin-top:6px; } .audio-dock .ctrls button { flex:1; cursor:pointer; font-family:var(--font-mono); font-size:.8rem; padding:5px 0; background:var(--bevel-face); color:#111; border:2px solid; min-height:34px; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); } .audio-dock input[type=range]{ width:100%; margin-top:8px; } /* Settings panel */ .settings-panel { position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.7); padding:20px; } .settings-panel[hidden]{ display:none; } .settings-panel .box { width:100%; max-width:440px; } .toggle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line); } .toggle-row:last-child { border-bottom:0; } .toggle-row label { margin:0; } .switch { position:relative; width:46px; height:24px; flex:none; } .switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; } .switch .track { position:absolute; inset:0; background:var(--panel-2); border:1px solid var(--line); } .switch .knob { position:absolute; top:2px; left:2px; width:18px; height:18px; background:var(--ink-faint); transition:transform .15s, background .15s; } .switch input:checked + .track { background:rgba(51,255,136,.2); border-color:var(--accent); } .switch input:checked ~ .knob { transform:translateX(22px); background:var(--accent); } /* Backrooms easter-egg exit button */ .backrooms-exit { position:fixed; top:14px; right:14px; z-index:1500; } /* Reduced motion: kill all animation */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } .motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition: none !important; } @media (max-width: 820px) { .audio-dock { left:14px; right:14px; width:auto; } .desktop { padding:14px; } .desktop__icons { grid-template-columns: repeat(auto-fill, minmax(88px,1fr)); } .icon { width:auto; } .deskwin { position:static !important; width:auto; margin:14px 0; box-shadow:none; } }