/* Layout: one centred mark in a storm. Near-black navy ground, gold and ice-white electricity, nothing else. */
:root {
  color-scheme: dark;
  --night: #050816;
  --ivory: #f6f1e6;
  --gold: #d9a441;
  --gold-hot: #ffd98a;
  --muted: #9aa0bd;
  --font-display: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  background: var(--night); color: var(--ivory);
  font: 16px/1.5 var(--font-body); -webkit-font-smoothing: antialiased;
  display: grid; grid-template-rows: 1fr auto;
}

#energy { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 35%, rgba(2, 3, 10, 0.78) 100%); }

main {
  position: relative; z-index: 2; display: grid; place-content: center; justify-items: center; gap: clamp(14px, 3vh, 28px);
  padding: 24px clamp(18px, 5vw, 48px); text-align: center;
}

.mark { margin: 0; width: min(640px, 86vw); animation: arrive 1.6s var(--ease) both; }
.mark canvas { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 18px rgba(217, 164, 65, 0.35)); animation: hum 3.4s ease-in-out infinite; }
.mark-fallback { font: 700 clamp(3rem, 12vw, 6.5rem)/1 var(--font-display); letter-spacing: -0.02em; }
.mark-fallback i { color: var(--gold); font-style: normal; }
@keyframes hum {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(217, 164, 65, 0.28)); }
  50% { filter: drop-shadow(0 0 30px rgba(255, 217, 138, 0.55)); }
}
@keyframes arrive { from { opacity: 0; transform: scale(0.94); filter: blur(10px); } }

.soon {
  margin: 0; display: flex; gap: 0.9em; justify-content: center;
  font: 700 clamp(0.95rem, 2.6vw, 1.35rem)/1 var(--font-body); letter-spacing: 0.62em; text-transform: uppercase; text-indent: 0.62em;
  color: transparent;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-hot) 35%, #fff 50%, var(--gold-hot) 65%, var(--gold) 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: arrive 1.6s var(--ease) 0.5s both, sweep 3.6s linear 1.2s infinite;
}
@keyframes sweep { to { background-position: -220% 0; } }

.line { margin: 0; font: italic 500 clamp(1.05rem, 2.4vw, 1.4rem)/1.3 var(--font-display); color: var(--muted); animation: arrive 1.6s var(--ease) 0.9s both; }

footer { position: relative; z-index: 2; padding: 18px; text-align: center; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(154, 160, 189, 0.7); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}