:root {
  color-scheme: dark;
  --bone: #e9dfc5;
  --gold: #c4a06a;
  --muted: #c0c5b7;
}

* { box-sizing: border-box; }
html { background: #0b1511; }
body { margin: 0; color: var(--bone); font-family: Georgia, "Times New Roman", serif; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.landing { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100svh; overflow: hidden; }
.world { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.parallax-stage { position: absolute; inset: -9%; z-index: 0; isolation: isolate; }
.landscape { position: absolute; inset: 0; transform: translate3d(0, 0, 0); will-change: transform; }
.landscape-far { z-index: 0; }
.landscape-mid { z-index: 1; }
.landscape-near { z-index: 2; }
.landscape img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 56% center; }
.pterosaur-flock { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pterosaur { position: absolute; top: 0; left: 0; display: block; width: 36px; height: auto; color: #39362e; fill: currentColor; opacity: 0; transform-origin: center; }
.pterosaur .wing-far { opacity: .76; }

.sunlight {
  position: absolute; z-index: 1; width: 82%; height: 140%; right: -23%; top: -45%;
  background: conic-gradient(from 145deg at 52% 0%, transparent 0deg 13deg, #e9d49a10 14deg 18deg, transparent 19deg 28deg, #efd5a513 29deg 33deg, transparent 34deg 44deg, #f6e2ad0c 45deg 50deg, transparent 51deg);
  filter: blur(12px); transform-origin: 52% 0%; animation: light-breathe 19s ease-in-out infinite alternate;
}
.mist {
  position: absolute; z-index: 2; inset: 0; opacity: .38;
  background: radial-gradient(ellipse at 73% 57%, #aebaa82b 0%, transparent 34%), radial-gradient(ellipse at 48% 78%, #b9c6b430 0%, transparent 30%), radial-gradient(ellipse at 95% 87%, #afbfa529 0%, transparent 35%);
  animation: mist-drift 32s ease-in-out infinite alternate;
}
.mist-near {
  z-index: 3; inset: 22% -15% -28%; opacity: .34;
  background: radial-gradient(ellipse at 65% 80%, #c0c9b944 0%, transparent 42%), radial-gradient(ellipse at 95% 57%, #9faf9b33 0%, transparent 30%);
  animation-duration: 46s; animation-direction: alternate-reverse;
}
.fireflies { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; }
.shade {
  position: absolute; z-index: 5; inset: 0;
  background: linear-gradient(90deg, #07120dbc 0%, #08130a61 32%, #09140c00 60%), linear-gradient(0deg, #060e0be8 0%, #09130d30 21%, transparent 53%, #09130d20 87%, #060e0b55 100%);
}

.hero { flex: 1; display: flex; align-items: center; padding: 48px 5vw 24px; min-height: 560px; }
.identity { width: min(49vw, 720px); text-align: center; padding-bottom: 12px; }
.wordmark { margin: 0; line-height: 0; }
.wordmark img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 26px #0008); }
.development { margin-top: -8px; }
.rule { width: 180px; height: 9px; display: flex; align-items: center; gap: 14px; margin: 0 auto 24px; }
.rule::before, .rule::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #c4a06a88); }
.rule::after { transform: rotate(180deg); }
.rule span { width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 12px #c4a06a66; }
.status { margin: 0; font-size: clamp(14px, 1.25vw, 18px); text-transform: uppercase; letter-spacing: .3em; padding-left: .3em; color: #edd6ae; text-shadow: 0 2px 15px #000; }
.description { max-width: 46ch; margin: 19px auto 0; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.6; color: var(--muted); text-shadow: 0 2px 10px #000; }
.genre { display: block; margin-bottom: 10px; color: var(--bone); }

.footer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; position: relative; margin: 0 5vw; min-height: 90px; border-top: 1px solid #c4a06a2b; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; letter-spacing: .04em; }
.copyright { margin: 0; color: #b9bdad; }
.footer-logo { display: block; width: 36px; height: 36px; object-fit: contain; }
.contact { justify-self: end; display: inline-flex; align-items: center; gap: 13px; min-height: 44px; padding: 8px 0 8px 16px; color: #e4d5b5; text-decoration: none; transition: color .2s; }
.contact svg { transition: transform .2s; }
.contact:hover { color: #fff3d5; }
.contact:hover svg { transform: translateX(4px); }
.contact:focus-visible { outline: 1px solid var(--gold); outline-offset: 5px; }

@keyframes mist-drift { from { transform: translate3d(-2%, 1%, 0) scale(1.03); } to { transform: translate3d(3%, -2%, 0) scale(1.08); } }
@keyframes light-breathe { from { opacity: .42; transform: rotate(-3deg); } to { opacity: .9; transform: rotate(3deg); } }

@media (min-width: 1600px) { .hero { padding-left: 7vw; } .footer { margin-left: 7vw; margin-right: 7vw; } }
@media (max-width: 760px) {
  .landscape img { object-position: 66% center; }
  .shade { background: linear-gradient(0deg, #060e0bf2, #07130cb5 32%, #06100b50 61%, #06100b16 85%, #07130b40), linear-gradient(90deg, #05100835, transparent 70%); }
  .hero { padding: 27svh 16px 35px; min-height: 550px; justify-content: center; }
  .identity { width: min(92vw, 490px); padding-bottom: 0; }
  .development { margin-top: 2px; }
  .description { max-width: 320px; margin: 18px auto 0; font-size: 14px; }
  .status { font-size: 14px; }
  .footer { margin: 0 7vw; min-height: 82px; gap: 8px; font-size: 11px; }
  .sunlight { right: -45%; width: 140%; }
}
@media (max-height: 720px) and (min-width: 761px) {
  .hero { min-height: calc(100svh - 68px); padding-top: 15px; padding-bottom: 15px; }
  .identity { width: min(39vw, 470px); }
  .wordmark img { max-height: calc(100svh - 300px); object-fit: contain; }
  .development { margin-top: -24px; }
  .rule { margin-bottom: 15px; }
  .description { margin-top: 12px; }
  .footer { min-height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .sunlight, .mist { animation: none; }
  .landscape { transform: none; will-change: auto; }
  .fireflies { display: none; }
  .pterosaur-flock { display: none; }
  .contact, .contact svg { transition: none; }
}
html[data-motion="paused"] .sunlight, html[data-motion="paused"] .mist { animation-play-state: paused; }