@font-face { font-family: Onest; src: url(/fonts/onest-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root { color-scheme: dark; background: #080909; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { overflow: hidden; }
.holding { position: relative; isolation: isolate; width: 100%; height: 100svh; min-height: 320px; overflow: hidden; background: radial-gradient(ellipse at 50% 47%, #1a1812 0, #0d0e0d 34%, #080909 70%); }
.atmosphere { position: absolute; inset: -25%; background: radial-gradient(ellipse at 35% 43%, #99784412, transparent 40%), radial-gradient(ellipse at 70% 60%, #a77a3810, transparent 35%); animation: atmosphere 23s ease-in-out infinite alternate; }
.horizon { position: absolute; width: 88vw; height: 28vw; left: 6vw; top: 53%; border-radius: 50%; border-top: 1px solid #b6955530; filter: blur(.4px); opacity: .24; transform: rotate(-12deg); mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); }
#scene { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease; }
#scene canvas { display: block; width: 100%; height: 100%; }
.wordmark { position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin: 0; width: 100%; text-align: center; font: 350 clamp(32px, 10vw, 160px)/1 Onest, Arial, sans-serif; letter-spacing: .12em; padding-left: .12em; background: linear-gradient(115deg, #7a542c 5%, #e3c28c 30%, #fff0cd 45%, #9c743c 65%, #e1c18a 90%); background-clip: text; color: transparent; transition: opacity 1s ease; }
.ready #scene { opacity: 1; }
.ready .wordmark { opacity: 0; }
.location { position: absolute; display: flex; justify-content: center; align-items: center; gap: 25px; top: calc(50% + clamp(85px, 11vw, 165px)); left: 0; width: 100%; color: #d9c59e; opacity: .75; }
.location p { margin: 0; font: 400 10px/1.5 Arial, sans-serif; letter-spacing: .6em; padding-left: .6em; }
.location span { width: clamp(22px, 4vw, 65px); height: 1px; background: linear-gradient(90deg, transparent, #b7975c80); }
.location span:last-child { transform: rotate(180deg); }
@keyframes atmosphere { to { transform: translate(5%, -4%) rotate(8deg); } }
@media (max-width: 600px) { .location { gap: 18px; } .location p { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .atmosphere { animation: none; } #scene, .wordmark { transition: none; } }