/* SPECTRE Splashscreen - EINE gemeinsame Quelle fuer specr.eu und
   catchit.specr.eu. Nicht je Seite kopieren: beide laden diese Datei.

   Rot: #a21301 - aus dem Kraken im eigenen Logo ausgezaehlt (ueber die Haelfte der
   roten Flaeche traegt genau diesen Ton).

   Groessen sind 1,5x gegenueber dem frueheren Stand (Logo 360 -> 540 px).

   Der Hintergrund ist schlicht schwarz. Eine Schattenaura (ein breites Band in
   einem etwas anderen Dunkelton) war hier zwischenzeitlich drin und ist wieder
   raus - sie las sich im Bild als schraeg durchlaufender roter Schleier. */

.splash-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Ueber allem: die Seite bringt Leisten mit z-index 99999 mit (Cookie-Hinweis,
     Performance-Warnung). Die lagen sonst auf dem Ladeschirm und haben ihn
     zerschnitten. Nach dem Laden sind sie wieder ganz normal bedienbar. */
  z-index: 100000;
  overflow: hidden;
  pointer-events: all;
}

.splash-logo-wrapper {
  position: relative;
  width: min(540px, 78vw);
  height: min(540px, 78vw);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 60px;
  animation: splash-in 0.8s ease both;
}

.splash-logo {
  max-width: 100%;
  max-height: 100%;
  image-rendering: auto; /* smooth downscale of the hi-res (1020px) logo */
  filter: drop-shadow(0 0 60px rgba(0, 0, 0, 0.8));
}

.splash-loader {
  position: relative;
  width: min(510px, 84vw);
  animation: splash-in 0.6s 0.2s ease both;
}

.splash-bar { display: block; width: 100%; height: auto; overflow: visible; }

/* Der Strich fuellt sich von links nach ECHTEM Fortschritt (siehe splash.js).
   Frueher lief hier eine Endlosschleife, die mit dem tatsaechlichen Laden
   nichts zu tun hatte und zum Schluss auf voll sprang. */
.splash-bar-fill {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 420ms cubic-bezier(0.33, 0, 0.2, 1);
}

.splash-loader-label {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(162, 19, 1, 0.85);
  margin-top: 21px;
  text-align: center;
}

.splash-underline { display: block; width: 46%; height: auto; margin: 9px auto 0; overflow: visible; }

.splash-status-line { display: none; }

@keyframes splash-in { from { opacity: 0; } to { opacity: 1; } }

/* Abgang: auf einmal weg. Das Overlay wird im selben Moment aus dem DOM
   genommen (siehe splash.js); diese Klasse ist nur die Sicherung. */
.splash-overlay.fade-out { display: none !important; }

@media (max-width: 700px) {
  .splash-logo-wrapper {
    width: min(390px, 82vw);
    height: min(390px, 82vw);
    margin-bottom: 48px;
  }
  .splash-loader { width: 88vw; }
  .splash-loader-label { font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .splash-bar-fill { transition: none !important; }
}