:root { color-scheme: dark; --paper: #fffdf9; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.coming-stage { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; color: var(--paper); background: radial-gradient(circle at 50% 35%, #46392b 0%, #2c2620 43%, #1d1b1a 100%); }
.coming-stage::before { content: ""; position: absolute; width: min(760px, 82vw); aspect-ratio: 1; left: 50%; top: -110px; transform: translateX(-50%); border: 1px solid #d3a86d1c; border-radius: 50%; box-shadow: 0 0 0 110px #d3a86d08, 0 0 0 220px #d3a86d05; pointer-events: none; }
.coming-stage::after { content: ""; position: absolute; inset: 22px; border: 1px solid #c7a06a47; pointer-events: none; }
.coming-top, .coming-center, .coming-bottom { position: relative; z-index: 2; }
.coming-top { padding: 32px 20px 18px; text-align: center; font: 400 28px/1 Georgia, "Times New Roman", serif; letter-spacing: .18em; }
.coming-center { flex: 1; display: grid; place-items: center; padding: 24px 24px 54px; text-align: center; }
.coming-content { width: 100%; max-width: 760px; }
.coming-tree { display: block; width: clamp(285px, 32vw, 430px); height: auto; margin: 0 auto 12px; filter: drop-shadow(0 0 14px #ffc36b3d); }
.eyebrow { margin: 0; color: #d4a565; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
h1 { margin: 12px 0 18px; color: var(--paper); font: 400 clamp(68px, 8vw, 122px)/1 Georgia, "Times New Roman", serif; letter-spacing: -.06em; }
.coming-lead { max-width: 36ch; margin: 0 auto; color: #ddd2c2; font-size: 14px; line-height: 1.8; }
.coming-bottom { padding: 24px; border-top: 1px solid #68584773; text-align: center; color: #b9ac9a; font-size: 11px; letter-spacing: .04em; }
.fireflies { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.fireflies span { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #ffe3a8; box-shadow: 0 0 6px 2px #efbe6d9e, 0 0 18px 7px #d7973c4f; opacity: .2; animation: firefly-drift var(--duration) ease-in-out var(--delay) infinite alternate; }
.fireflies span:nth-child(3n) { width: 2px; height: 2px; box-shadow: 0 0 5px 2px #efbe6d80, 0 0 14px 5px #d7973c38; }
@keyframes firefly-drift { 0% { transform: translate(-7px, 8px); opacity: .1; } 50% { transform: translate(4px, -6px); opacity: .58; } 100% { transform: translate(12px, -15px); opacity: .18; } }
@media (max-width: 450px) {
  .coming-stage::after { inset: 12px; }
  .coming-top { padding-top: 29px; font-size: 22px; }
  .coming-center { padding: 14px 22px 42px; }
  .coming-tree { width: min(340px, 82vw); }
  h1 { font-size: clamp(59px, 15vw, 82px); }
}
@media (prefers-reduced-motion: reduce) {
  .fireflies span { animation: none; opacity: .25; }
}