/* starwick.dev — name-only splash: sky, eclipse, and the flame wordmark. Dark-only (matches the Studio launcher). */
:root {
  --bg: #0D141B;
  --ink: #F7F9FC;
  --ember: #FFB347;
  --ember-core: #FFE8BF;
  --gutter: 48px;
  color-scheme: dark;
}
@media (max-width: 767px) { :root { --gutter: 20px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1 { margin: 0; }

.wm-i { position: relative; display: inline-block; }
.fo { fill: var(--ember); }
.fc { fill: var(--ember-core); }

/* ---------- Hero (the whole page) ---------- */
.hero { position: relative; overflow: hidden; background: var(--bg); min-height: 100svh;
  display: flex; flex-direction: column; }
.hero > canvas, .hero > svg, .twinkles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.eclipse { overflow: visible; }
.hero-inner { position: relative; z-index: 2; flex: 0 0 auto; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
/* Centre the name in the space above the eclipse crest; the lower band is reserved for the horizon. */
.hero::before { content: ""; display: block; flex: 1 1 0; }
.hero::after { content: ""; display: block; flex: 1 0 clamp(200px, 30svh, 320px); }
.fx { z-index: 3; }

.wordmark { font-family: Michroma, -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400;
  font-size: clamp(44px, 13vw, 124px); line-height: 1; letter-spacing: 0.02em; white-space: nowrap;
  -webkit-user-select: none; user-select: none; }
.flame-hit { position: absolute; left: 50%; bottom: 0.64em; height: 0.34em; transform: translateX(-50%); display: block; }
.flame { display: block; height: 100%; width: auto; overflow: visible; transform-origin: 50% 100%; transition: transform .3s ease-in-out; }
#flame-g { transform-box: view-box; transform-origin: 26px 100px; will-change: transform; }

/* Twinkle: a handful of CSS-only stars (compositor opacity). Paused whenever the hero is inactive. */
.twinkles i { position: absolute; width: 2px; height: 2px; margin: -1px 0 0 -1px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 4px 1px rgba(255,255,255,.18); opacity: .5; animation: tw var(--d, 5s) ease-in-out infinite alternate;
  animation-delay: var(--dl, 0s); will-change: opacity; }
.twinkles i.w { background: var(--ember); box-shadow: 0 0 4px 1px rgba(255,179,71,.2); }
@keyframes tw { from { opacity: var(--lo, .15); } to { opacity: var(--hi, .7); } }
.hero.inactive .twinkles i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .twinkles i { animation: none; } }

@media (max-width: 767px) {
  .hero::after { flex-basis: clamp(140px, 24svh, 220px); }
}