:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: #07111e; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; }
header { position: absolute; inset: 0 0 auto; padding: 16px 32px; z-index: 2; }
a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-size: 14px; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.cover { position: relative; margin: 0; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; }
.cover::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(to bottom, transparent, #07111e); pointer-events: none; }
.cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cover-logo, .cover-caption, .cover-shade, .horizon-light { position: absolute; inset: 0; pointer-events: none; }
.cover-shade { background: #07111e; opacity: 0; }
.horizon-light { inset: 61% -8% auto; height: 15%; border-radius: 50%; background: radial-gradient(ellipse, rgba(219, 235, 255, .6), rgba(155, 194, 240, .14) 45%, transparent 72%); filter: blur(12px); opacity: 0; transform: scaleX(.2); }
.cover.is-opening .cover-shade { animation: sky-reveal 3s ease-out both; }
.cover.is-opening .horizon-light { animation: horizon-rise 3s ease-in-out both; }
.cover.is-opening .cover-logo { animation: artwork-reveal 1.1s .9s ease-out both; }
.cover.is-opening .cover-caption { animation: artwork-reveal 1s 1.6s ease-out both; }
@keyframes sky-reveal { from { opacity: .82; } 45% { opacity: .35; } to { opacity: 0; } }
@keyframes horizon-rise { from { opacity: 0; transform: scaleX(.2); } 35% { opacity: .8; } 65% { opacity: .45; transform: scaleX(1); } to { opacity: 0; transform: scaleX(1); } }
@keyframes artwork-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 700px) {
  header { position: relative; padding: 8px 20px; }
  .horizon-light { filter: blur(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .cover.is-opening > * { animation: none; }
}