/* ===========================================================================
   Intro — das Logo baut sich auf, dann der Name
   ---------------------------------------------------------------------------
   Läuft einmal pro Besuch (Sitzung), dauert gut zwei Sekunden und lässt sich
   mit einem Klick überspringen. Bewusst warm und ruhig: weiches Licht,
   langsame Kurven, kein Neon und kein Glitch.

   Eigene Datei, damit sich das im Zweifel in einem Schritt entfernen lässt.
   =========================================================================== */

.intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  gap: 18px;
  background: radial-gradient(120% 90% at 50% 42%, #101728 0%, #07090f 62%);
  cursor: pointer;
  animation: introOut 0.7s cubic-bezier(0.4, 0, 0.2, 1) 2.05s forwards;
}

.intro[hidden] {
  display: none;
}

.intro__stage {
  display: grid;
  place-items: center;
  gap: 20px;
}

/* Warmes Licht hinter dem Logo, das kurz aufatmet. */
.intro__glow {
  position: absolute;
  width: 460px;
  height: 460px;
  max-width: 80vw;
  max-height: 80vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(86, 194, 240, 0.22), transparent 62%);
  opacity: 0;
  animation: introGlow 2.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Das Logo wird von unten nach oben freigelegt — es „baut sich auf" statt
   einfach da zu sein. */
.intro__logo {
  position: relative;
  width: 96px;
  height: auto;
  clip-path: inset(100% 0 0 0);
  animation: introBuild 1.05s cubic-bezier(0.33, 1, 0.68, 1) 0.15s forwards,
    introLift 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.intro__word {
  position: relative;
  display: flex;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Buchstabe für Buchstabe, ganz knapp versetzt — das liest sich wie ein
   Schriftzug, der geschrieben wird, nicht wie ein Ticker. */
.intro__word span {
  opacity: 0;
  transform: translateY(9px);
  animation: introLetter 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.intro__word span.is-accent {
  color: var(--accent);
}

.intro__line {
  position: relative;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(86, 194, 240, 0.7), transparent);
  animation: introLine 1s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
}

@keyframes introBuild {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes introLift {
  0% { transform: translateY(10px) scale(0.94); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes introGlow {
  0% { opacity: 0; transform: scale(0.7); }
  45% { opacity: 1; }
  100% { opacity: 0.35; transform: scale(1.05); }
}

@keyframes introLetter {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes introLine {
  to { width: min(260px, 52vw); }
}

@keyframes introOut {
  to { opacity: 0; visibility: hidden; }
}

/* Wer Bewegung reduziert haben will, sieht nichts davon. */
@media (prefers-reduced-motion: reduce) {
  .intro {
    display: none;
  }
}