/* Splash Screen Overlay */
#splash-screen {
  display: none;
}

html.splash-active #splash-screen {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: #ffffff; /* Weißer Hintergrund für den Splash Screen */
  align-items: center;
  justify-content: center;
  animation: splashFadeOut 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 4.5s; /* Noch längere Anzeigedauer */
  pointer-events: none; /* Let clicks pass through if the fadeout is slow */
}

/* Container matching the SVG aspect ratio */
.splash-logo-container {
  position: relative;
  width: 480px; /* Deutlich größer */
  max-width: 90vw;
  aspect-ratio: 1152 / 768;
}

.anim-part {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: contain;
}

/* Soft Slide & Fade for K elements */
@keyframes animSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Even softer Slide & Fade for the Wordmark */
@keyframes animWordmark {
  0% {
    opacity: 0;
    transform: translateX(12px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Final fade out of the whole overlay */
@keyframes splashFadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* Applying animations and delays - Nochmals verlangsamt */
html.splash-active .anim-k-top {
  animation: animSlideIn 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 0.3s;
}

html.splash-active .anim-k-middle {
  animation: animSlideIn 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 0.9s;
}

html.splash-active .anim-k-bottom {
  animation: animSlideIn 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 1.5s;
}

html.splash-active .anim-wordmark {
  animation: animWordmark 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 2.4s;
}

/* ==================================================================
   Loader Variant (can be used anywhere by adding .kma-loader class)
   ================================================================== */
.kma-loader {
  position: relative;
  width: 64px; /* Default loader size */
  aspect-ratio: 1152 / 768;
}

.kma-loader .anim-part {
  opacity: 0;
}

@keyframes animLoaderLoop {
  0%, 10% {
    opacity: 0;
    transform: translateX(-6px);
  }
  30%, 75% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(0);
  }
}

.kma-loader .anim-k-top {
  animation: animLoaderLoop 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  animation-delay: 0s;
}

.kma-loader .anim-k-middle {
  animation: animLoaderLoop 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  animation-delay: 0.15s;
}

.kma-loader .anim-k-bottom {
  animation: animLoaderLoop 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  animation-delay: 0.3s;
}