:root { --bg: #000; --fg: #fff; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: var(--bg); overflow: hidden; }
body { color: var(--fg); font-family: "Unbounded", system-ui, sans-serif; }

.scene { position: fixed; inset: 0; pointer-events: none; }

.layer {
  position: absolute;
  left: 50%; top: 50%;
  width: 70vmax; height: 70vmax;
  margin: -35vmax 0 0 -35vmax;
  will-change: transform;
}
.layer svg { width: 100%; height: 100%; display: block; overflow: visible; }

.l-fill { filter: blur(4px); opacity: .22; }
.l-near { filter: blur(4px); opacity: .55; }

.vignette {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.85) 100%);
}

.soon {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.soon h1 {
  font-weight: 300;
  font-size: clamp(48px, 13vw, 180px);
  letter-spacing: .08em;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 6px  rgba(255,255,255,.9),
    0 0 18px rgba(255,255,255,.6),
    0 0 42px rgba(255,255,255,.45),
    0 0 90px rgba(255,255,255,.3);
  animation: breathe 5s ease-in-out infinite;
  will-change: transform;
}
@keyframes breathe {
  0%, 100% { opacity: .92; }
  50%      { opacity: 1; filter: brightness(1.15); }
}

.fade-in { animation: fadeIn 2.4s ease-out both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .soon h1 { animation: none; }
}