/* Startanimation (0.3.4): Fuji → Torii → Logo als lange, ruhige Überblendungen, dann die App. */
#splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #0c1434;
  overflow: hidden;
  cursor: pointer;
  transition: opacity .65s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .65s;
}
#splash.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

/* Hintergrund: unscharfe Fassung desselben Bildes füllt den Bildschirm; eigene Ebene je Bild,
   damit auch der Hintergrund weich überblendet statt umzuspringen */
.splash-bg {
  position: absolute;
  inset: -48px;
  filter: blur(30px) saturate(1.15) brightness(.62);
  transform: translateZ(0);
}
.splash-bgl {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}

/* Bühne: eine einzige, durchgehende Zoom-Bewegung über die gesamte Animation */
.splash-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, 72vh);
  aspect-ratio: 393 / 389;
  transform: translate(-50%, -50%) scale(1.06);
  will-change: transform;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
#splash.is-playing .splash-stage { animation: splash-drift 3.6s cubic-bezier(.25, .1, .25, 1) forwards; }
#splash.is-done .splash-stage {
  animation: none;
  transform: translate(-50%, -50%) scale(1.1);
  transition: transform .65s cubic-bezier(.4, 0, .2, 1);
}
@keyframes splash-drift {
  from { transform: translate(-50%, -50%) scale(1.06); }
  to   { transform: translate(-50%, -50%) scale(1); }
}

/* Bilder liegen übereinander; das jeweils neue blendet OBEN ein, das alte bleibt darunter deckend */
.splash-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s cubic-bezier(.45, 0, .25, 1);
  backface-visibility: hidden;
}
.splash-frame.is-on, .splash-bgl.is-on { opacity: 1; }
.is-instant { transition: none !important; }

.splash-skip {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  left: 0;
  right: 0;
  text-align: center;
  font: 500 .8rem system-ui, sans-serif;
  color: rgba(255, 255, 255, .5);
  letter-spacing: .04em;
  opacity: 0;
  animation: splash-hint .5s ease .9s forwards;
}
@keyframes splash-hint { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .splash-stage, #splash.is-playing .splash-stage, #splash.is-done .splash-stage { animation: none; transform: translate(-50%, -50%); transition: none; }
  .splash-frame, .splash-bgl { transition: opacity .2s; }
  .splash-skip { animation: none; opacity: 1; }
}