@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-light-italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}
:root { color-scheme: dark; background: #050307; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #050307; }
main, #sky, .still { position: fixed; inset: 0; width: 100%; height: 100%; }
#sky { display: block; opacity: 0; transition: opacity 2.5s ease; }
#sky.ready { opacity: 1; }
h1 {
  position: absolute;
  z-index: 1;
  margin: 0;
  top: max(27px, env(safe-area-inset-top));
  left: max(35px, env(safe-area-inset-left));
  color: #cfb3b6;
  font: italic 300 clamp(30px, 2.5vw, 38px)/1 'Cormorant Garamond', Georgia, serif;
  letter-spacing: -.035em;
  opacity: .82;
  text-shadow: 0 0 25px #b9414626;
  user-select: none;
}
.still {
  background:
    radial-gradient(ellipse at 36% 55%, #a42b4533 0%, transparent 43%),
    radial-gradient(ellipse at 78% 39%, #d84b4a22 0%, transparent 36%),
    linear-gradient(160deg, #050307, #0d050d 60%, #050307);
}
@media (max-width: 600px) { h1 { top: max(24px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { #sky { transition: none; } }