/* ============================================================
   TCLE – Splash Screen
   Startseite: nur beim ersten Seitenaufruf pro Sitzung (siehe js/splash.js
   + das Inline-Script im <head> von index.html).
   Mitgliederbereich: einmal nach der Anmeldung, mit dem Wappen statt des
   Logos (siehe leisteSplash() in mitglieder/leiste.php), und als Abschied
   beim Abmelden, danach weicher Übergang zur Startseite (html.abschied).
   ============================================================ */

.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-base);
  opacity: 1;
  visibility: visible;
  transition: opacity .3s var(--ease-out),
              visibility 0s linear 0s;
}

/* Rückfall, falls das Logo nicht in die Navigation fliegen kann (siehe
   dockLogo() in js/splash.js): dann blendet der ganze Splash kurz aus. */
.splash.splash-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--ease-out),
              visibility 0s linear .3s;
}

/* Bereits in dieser Sitzung gesehen: sofort weg, keine Animation, kein Flackern.
   .no-splash wird synchron im <head> gesetzt, noch bevor irgendetwas gemalt wird. */
html.no-splash .splash {
  display: none;
}

.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
}

.splash-logo {
  width: clamp(140px, 32vw, 320px);
  height: auto;
  opacity: 0;
  transform: translateY(8px) scale(.94);
  animation: splash-in .6s var(--ease-out) .3s forwards;
}

.splash-name {
  margin: 0;
  font-family: var(--ff);
  font-size: var(--fs-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-navy-lt);
  text-align: center;
}

/* Buchstaben werden von js/splash.js in einzelne <span> zerlegt und tippen
   sich nacheinander auf (animation-delay pro Buchstabe inline gesetzt). Ohne
   JS (z.B. deaktiviert) bleibt der Name als normaler Fließtext sichtbar. */
.splash-name span {
  display: inline-block;
  opacity: 0;
  transform: translateY(4px);
  animation: splash-in .3s var(--ease-out) forwards;
}

@keyframes splash-in {
  to { opacity: 1; transform: none; }
}

/* ── Übergabe an die Navigation ─────────────────────────────────────────────
   .splash-dock setzt js/splash.js, sobald das Logo an seinen Platz in der
   Navigation fliegt. Der graue Grund wandert dafür auf ein ::before und blendet
   dort per opacity aus: das Logo selbst bleibt voll deckend, der Hero taucht
   darunter auf. Bewusst erst in der zweiten Hälfte des Flugs, damit das blaue
   Logo den Großteil des Wegs auf hellem Grund zurücklegt und nicht vor dem
   dunklen Hero-Foto verschwindet. */
.splash.splash-dock {
  background: transparent;
}
.splash.splash-dock::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-bg-base);
  animation: splash-fade-out .45s var(--ease-out) .25s forwards;
}
.splash-inner {
  position: relative;
}
/* Ziel des Flugs ist die linke obere Ecke des Nav-Logos (siehe dockLogo()) */
.splash.splash-dock .splash-logo {
  transform-origin: 0 0;
}
.splash.splash-dock .splash-name {
  animation: splash-fade-out .2s var(--ease-out) forwards;
}
@keyframes splash-fade-out {
  to { opacity: 0; }
}

/* Solange der Splash sichtbar ist, nicht scrollen können */
body.splash-lock {
  overflow: hidden;
}

/* ── Abschied beim Abmelden (abschiedBeiKlick() in js/splash.js) ──────────
   Zum Schluss klingen Wappen und Text aus, nur der graue Grund bleibt. Auf
   ihm geht es zur Startseite. Dort setzt das Inline-Script im <head> von
   index.html .abschied auf <html>, noch vor dem ersten Bild: Die Seite
   beginnt unter derselben Fläche, die dann weich ausblendet. Kurz gewartet,
   damit Hero-Foto und Schrift schon stehen, wenn sie zum Vorschein kommen.
   Die Farbe ist bewusst der Grundton des Mitgliederbereichs (--color-bg-base
   in leisteStil(), mitglieder/leiste.php), sonst gäbe es einen Farbsprung
   zum hellen Grau der Startseite. */
.splash.splash-ausklang .splash-inner {
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
html.abschied::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #E7E8EB;
  pointer-events: none;
  animation: splash-fade-out .6s var(--ease-out) .15s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .splash-logo,
  .splash-name span {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .splash {
    transition: opacity .01ms linear;
  }
  html.abschied::after {
    display: none;
  }
}