:root { color-scheme: dark; background: #0d162b; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { background: #0d162b; isolation: isolate; }
.port, #veil, main { position: fixed; inset: 0; }
.port { background: #0d162b url('hero.webp') center / cover no-repeat; opacity: 0; transition: opacity .5s; }
.is-ready .port { opacity: 1; }
#veil { display: block; width: 100%; height: 100%; pointer-events: none; }
main { display: grid; place-items: center; padding: 32px; pointer-events: none; }
.logo { display: block; width: clamp(250px, 37vw, 530px); max-width: 100%; height: auto; user-select: none; filter: drop-shadow(0 2px 16px #0d162b88); animation: appear 1.2s ease-out both; }
@keyframes appear { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (pointer: coarse) { body { touch-action: none; } }
@media (prefers-reduced-motion: reduce) { .logo { animation: none; } .port { transition: none; } }