* { box-sizing: border-box; }
:root { color-scheme: dark; background: #202123; }
html, body { margin: 0; min-height: 100%; }
main { position: relative; width: 100%; height: 100svh; min-height: 280px; overflow: hidden; isolation: isolate; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(1.025); }
.lettering { position: absolute; width: min(64vw, 1500px); aspect-ratio: 3 / 1; top: 46%; left: 52%; transform: translate(-50%, -50%); }
.lettering > img { display: block; width: 100%; height: auto; filter: grayscale(1); }
.lettering::after { content: ''; position: absolute; inset: 0; pointer-events: none; mask: url('./assets/lettering.webp') center / 100% 100% no-repeat; -webkit-mask: url('./assets/lettering.webp') center / 100% 100% no-repeat; background: radial-gradient(circle 48px at var(--light-x, 50%) var(--light-y, 50%), #fffef3e6, #e4e6e94d 45%, transparent 100%); mix-blend-mode: screen; opacity: 0; transition: opacity 320ms ease; }
.lettering.is-lit::after { opacity: .75; }
.lettering a { position: absolute; top: 78%; height: 21%; min-height: 44px; background: transparent; color: #e7e3da; cursor: pointer; }
a.git { left: 31%; width: 13%; }
a.discord { left: 48%; width: 26%; }
.lettering a:focus-visible { outline: 1px solid #e7e3da; outline-offset: 3px; border-radius: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pending .scene, .pending .lettering { opacity: 0; }
.entered .scene { animation: emerge 1800ms ease-out both; }
.entered .lettering { animation: emerge 1100ms 650ms ease-out both; }
@keyframes emerge { from { opacity: 0; } to { opacity: 1; } }
@media (orientation: portrait) { .scene { object-position: 43% center; } .lettering { width: 94vw; left: 50%; top: 46%; } }
@media (prefers-reduced-motion: reduce) { .scene { transform: none; } .scene, .lettering { animation: none !important; opacity: 1 !important; } .lettering::after { transition: none; } }

/* Atmosphere stays behind the fixed foreground lettering. */
.scene { z-index: 0; }
.lettering { z-index: 2; }
.mist { position: absolute; z-index: 1; pointer-events: none; top: 18%; left: -20%; width: 140%; height: 38%; opacity: .42; filter: blur(10px); background: radial-gradient(ellipse 36% 24% at 28% 44%, #dce1df 0%, #d2d9d6aa 30%, #d2d9d633 65%, transparent 100%), radial-gradient(ellipse 32% 21% at 76% 64%, #dce1df 0%, #d2d9d699 32%, transparent 100%); animation: mist-drift 32s ease-in-out infinite alternate; }
.mist::after { content: ''; position: absolute; inset: 10% -8% -4%; background: radial-gradient(ellipse 38% 16% at 62% 38%, #e4e9e6bb, #d2d9d655 45%, transparent 100%); animation: mist-counterdrift 24s ease-in-out infinite alternate; }
@keyframes mist-drift { from { transform: translate3d(-5%, -2%, 0); } to { transform: translate3d(7%, 5%, 0); } }
@keyframes mist-counterdrift { from { transform: translate3d(4%, 3%, 0); } to { transform: translate3d(-6%, -3%, 0); } }
.pending .mist { opacity: 0; }
.lettering::before { content: ''; position: absolute; inset: 0; pointer-events: none; mask: url('./assets/lettering.webp') center / 100% 100% no-repeat; -webkit-mask: url('./assets/lettering.webp') center / 100% 100% no-repeat; background: linear-gradient(110deg, transparent 43%, #e5e8e666 48%, #fffbedbb 50%, #e5e8e644 52%, transparent 57%); background-size: 300% 100%; background-position: 100% 0; mix-blend-mode: screen; opacity: 0; }
.entered .lettering::before { animation: silver-sweep 4200ms 2400ms ease-in-out 1 both; }
@keyframes silver-sweep { 0% { background-position: 100% 0; opacity: 0; } 15% { opacity: .52; } 85% { opacity: .52; } 100% { background-position: 0% 0; opacity: 0; } }
@media (hover: hover) and (pointer: fine) {
 main { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2725%27%20height%3D%2725%27%20viewBox%3D%270%200%2025%2025%27%3E%3Cg%20stroke%3D%27%23151619%27%20stroke-width%3D%273%27%3E%3Cpath%20d%3D%27M12.5%202v7m0%207v7M2%2012.5h7m7%200h7%27%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%27%23dddcd4%27%20stroke-width%3D%271%27%3E%3Cpath%20d%3D%27M12.5%202v7m0%207v7M2%2012.5h7m7%200h7%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2712.5%27%20cy%3D%2712.5%27%20r%3D%271%27%20fill%3D%27%23f7f4e9%27%2F%3E%3C%2Fsvg%3E") 12 12, crosshair; }
 .lettering a { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2729%27%20height%3D%2729%27%20viewBox%3D%270%200%2029%2029%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23151619%27%20stroke-width%3D%273%27%3E%3Ccircle%20cx%3D%2714.5%27%20cy%3D%2714.5%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27M14.5%201v6m0%2015v6M1%2014.5h6m15%200h6%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23fff9df%27%20stroke-width%3D%271%27%3E%3Ccircle%20cx%3D%2714.5%27%20cy%3D%2714.5%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27M14.5%201v6m0%2015v6M1%2014.5h6m15%200h6%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2714.5%27%20cy%3D%2714.5%27%20r%3D%271%27%20fill%3D%27%23fff9df%27%2F%3E%3C%2Fsvg%3E") 14 14, pointer; }
}
@media (prefers-reduced-motion: reduce) { .mist, .mist::after { animation: none; } .entered .lettering::before { animation: none; opacity: 0; } }
.page-hidden .mist, .page-hidden .mist::after, .page-hidden .lettering::before { animation-play-state: paused; }