/* ════════════════════════════════════════════════════════════════
   STRAIN — Splash-Screen (Initial-Loader + AppGate verifying)
   Wird vor React-Hydration sichtbar — kein Bundle-Dep, eigenständig.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* Künstlerin des Strain-Artworks. Wird im Splash unten als
     „Artwork: Antonia Ayarov" angezeigt. */
  --artwork-credit: "Antonia Ayarov";
}

.strain-splash{
  position: fixed; inset: 0; z-index: 9999;
  background: #0d0a14;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  font-family: "Inter", -apple-system, "Helvetica Neue", sans-serif;
  color: #f6f1e6;
  overflow: hidden;
  animation: strain-splash-fade 480ms cubic-bezier(.22,.61,.36,1) both;
}

/* Aurora-Hintergrund — passt zur Plum-Welle im Artwork */
.strain-splash::before,
.strain-splash::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.strain-splash::before{
  width: 70vw; height: 70vw; max-width: 720px; max-height: 720px;
  top: -10vh; right: -15vw;
  background: radial-gradient(circle, #2cc0b6 0%, transparent 70%);
  opacity: .35;
  animation: strain-aurora-1 20s ease-in-out infinite;
}
.strain-splash::after{
  width: 60vw; height: 60vw; max-width: 620px; max-height: 620px;
  bottom: -12vh; left: -12vw;
  background: radial-gradient(circle, #16a8a0 0%, transparent 70%);
  opacity: .28;
  animation: strain-aurora-2 26s ease-in-out infinite;
}
@keyframes strain-aurora-1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-5vw,4vh) scale(1.12)}
}
@keyframes strain-aurora-2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(5vw,-3vh) scale(1.14)}
}

@keyframes strain-splash-fade{
  from{opacity:0}
  to{opacity:1}
}

.strain-splash-inner{
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 24px;
  text-align: center;
}

/* Artwork-Container */
.strain-splash-art{
  position: relative;
  width: min(72vw, 320px);
  aspect-ratio: 3 / 4;
  margin-bottom: 28px;
  filter: drop-shadow(0 0 30px rgba(44,192,182,.35))
          drop-shadow(0 0 80px rgba(22,168,160,.20));
  animation: strain-splash-breathe 4.2s ease-in-out infinite;
}
.strain-splash-art img,
.strain-splash-art svg{
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* Wählbares Splash-Bild: Antonias Foto-Artwork wird gerahmt (cover + Radius),
   das S-Monogramm bleibt als SVG „contain". */
.strain-splash-art.is-photo img{
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(246,241,230,.10);
}
@keyframes strain-splash-breathe{
  0%,100%{transform:translateY(0) scale(1);
    filter: drop-shadow(0 0 30px rgba(44,192,182,.35))
            drop-shadow(0 0 80px rgba(22,168,160,.20))}
  50%{transform:translateY(-2px) scale(1.012);
    filter: drop-shadow(0 0 42px rgba(44,192,182,.55))
            drop-shadow(0 0 110px rgba(22,168,160,.30))}
}

/* Lade-Indikator (drei animierte Punkte unter dem Artwork) */
.strain-splash-loader{
  display: flex; gap: 8px; margin-bottom: 16px;
}
.strain-splash-loader span{
  width: 6px; height: 6px; border-radius: 50%; background: #2cc0b6;
  opacity: .35;
  animation: strain-dot 1.4s ease-in-out infinite;
}
.strain-splash-loader span:nth-child(2){animation-delay:.18s}
.strain-splash-loader span:nth-child(3){animation-delay:.36s}
@keyframes strain-dot{
  0%,80%,100%{opacity:.25; transform:scale(.85)}
  40%{opacity:1; transform:scale(1.2)}
}

/* Credit-Zeile */
.strain-splash-credit{
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(246,241,230,.42);
}
.strain-splash-credit::before{
  content: "Artwork: " var(--artwork-credit);
}
/* Wenn kein Credit gesetzt (--artwork-credit ist "—"), zeige stattdessen
   eine neutrale Tag-Line. Wird via JS gesetzt wenn der Wert gleich "—" ist —
   pure CSS kann das nicht eleganter. */

@media (prefers-reduced-motion: reduce){
  .strain-splash::before,
  .strain-splash::after,
  .strain-splash-art,
  .strain-splash-loader span{ animation: none !important; }
}