/* Startbildschirm «Schallwelle»: Ein Punkt in der Mitte, von dem ruhig Ringe ausgehen wie ein Echo.
   Antippen blendet ihn sofort aus (src/splash.ts blendet nach dem ersten Zeichnen aus). */
#splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 80% at 50% 40%, #1d3157 0%, #13203a 45%, #0d172b 100%);
  color: #f2a541;
  transition: opacity 0.6s ease;
  font-family: 'Onest Variable', system-ui, sans-serif;
}
#splash.is-out {
  opacity: 0;
  pointer-events: none;
}
.sp-stage {
  display: grid;
  justify-items: center;
  gap: 18px;
}
.sp-echo {
  position: relative;
  width: 180px;
  height: 180px;
  display: grid;
  place-items: center;
}
.sp-echo b {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 28px rgba(242, 165, 65, 0.55);
}
.sp-echo i {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: sp-ring 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.sp-echo i:nth-child(2) {
  animation-delay: 0.6s;
}
.sp-echo i:nth-child(3) {
  animation-delay: 1.2s;
}
.sp-echo i:nth-child(4) {
  animation-delay: 1.8s;
}
@keyframes sp-ring {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(8);
    opacity: 0;
  }
}
.sp-name {
  margin: 0;
  color: #eef2f8;
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.sp-line {
  margin: 0;
  color: #9aa8c4;
  font-size: 15px;
}
@media (prefers-reduced-motion: reduce) {
  .sp-echo i {
    animation: none;
    opacity: 0.25;
  }
  .sp-echo i:nth-child(2) {
    transform: scale(3);
  }
  .sp-echo i:nth-child(3) {
    transform: scale(5);
    opacity: 0.15;
  }
  .sp-echo i:nth-child(4) {
    display: none;
  }
}

/* «Schleifchen»: Pastellrosa, eine Schleife wippt statt der Ringe */
.sp-bow,
.sp-l-bow {
  display: none;
}
[data-look='schleifchen'] #splash {
  background: radial-gradient(70% 55% at 20% 10%, rgba(244, 114, 182, 0.3), transparent 70%), radial-gradient(55% 45% at 90% 20%, rgba(190, 150, 255, 0.24), transparent 70%), #fdf0f5;
}
[data-look='schleifchen'] .sp-echo,
[data-look='schleifchen'] .sp-l-echo {
  display: none;
}
[data-look='schleifchen'] .sp-bow {
  display: block;
  width: 150px;
  height: 112px;
  animation: sp-wippen 1.6s ease-in-out infinite;
}
[data-look='schleifchen'] .sp-l-bow {
  display: inline;
}
[data-look='schleifchen'] .sp-name {
  color: #3b1830;
}
[data-look='schleifchen'] .sp-line {
  color: #8a5670;
}
@keyframes sp-wippen {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg) scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-look='schleifchen'] .sp-bow {
    animation: none;
  }
}