/* anyVersum — Coming-Soon-Seite
   Seitenspezifische Stile. Farben, Typo, Raum kommen aus assets/css/tokens/. */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
body { margin: 0; overflow: hidden; }

/* Szene: füllt den Viewport, zentriert den Inhalt, animierter Hintergrund */
.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 400ms var(--ease-out);
  /* Tag: heller blauer Himmel mit weichem Sonnenschein oben rechts */
  background:
    radial-gradient(820px 560px at 82% 12%, rgba(255, 250, 236, 0.65), transparent 58%),
    linear-gradient(180deg, #cfe4f8 0%, #e4f0fb 46%, #f1f8fe 100%);
}

.scene.av-dark {
  /* Nacht: tiefes Indigo mit Aurora-Schimmer */
  background:
    radial-gradient(820px 460px at 20% 8%, rgba(95, 73, 214, 0.30), transparent 68%),
    radial-gradient(760px 420px at 86% 96%, rgba(18, 165, 148, 0.16), transparent 70%),
    radial-gradient(520px 320px at 78% 12%, rgba(185, 59, 124, 0.10), transparent 72%),
    var(--ink-950);
}

.scene__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Zentrierte Inhaltsspalte */
.content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 0 var(--space-6);
  text-align: center;
}

.kicker {
  margin: 0 0 var(--space-7);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-accent);
  animation: av-fade 700ms var(--ease-out) both;
}

.wordmark {
  margin: 0 0 var(--space-8);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  animation: av-rise 700ms var(--ease-out) 80ms both;
}
.wordmark em {
  font-style: italic;
  color: var(--text-accent);
}

.headline {
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.08;
  color: var(--text-strong);
  text-wrap: balance;
  animation: av-rise 800ms var(--ease-out) 200ms both;
}
.headline .gold {
  font-style: italic;
  color: var(--gold-600);
}
.av-dark .headline .gold {
  color: var(--gold-400);
}

.divider {
  width: 64px;
  height: 1px;
  margin: var(--space-8) auto 0;
  background: linear-gradient(90deg, transparent, var(--violet-400), transparent);
  animation: av-fade 900ms var(--ease-out) 500ms both;
}

/* Rechtslinks unten rechts. Farbe folgt dem Theme über die Tokens
   (heller Modus: gedämpftes Blaugrau; dunkler Modus: helleres Indigo). */
.site-footer {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 3;
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  animation: av-fade 900ms var(--ease-out) 700ms both;
}
.site-footer a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--text-accent);
  text-decoration: none;
}

/* Keyframes für die Eingangsanimationen */
@keyframes av-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes av-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Ruhige Bewegung respektieren: Eingangsanimationen aus.
   Das Canvas stoppt die Loop in JS und zeichnet ein statisches Bild.
   Der Umschalter-Puls wird in toggle.css abgeschaltet. */
@media (prefers-reduced-motion: reduce) {
  .kicker, .wordmark, .headline, .divider, .site-footer { animation: none; }
}