@layer components {
.splash-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 2000;
  opacity: 1;
  transition: opacity 800ms ease;
}
.splash-overlay .splash-bg { position: absolute; inset: 0; background: #000; opacity: 0.98; z-index: 1; }
.splash-overlay .splash-logo {
  position: relative;
  width: min(40vw, 320px);
  height: auto;
  opacity: 0;
  transform: scale(1.6);
  animation: splash-dezoom 1400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  z-index: 2; /* ensure logo sits above the dark bg */
}
.splash-hide { opacity: 0; }
.splash-no-scroll { overflow: hidden; }

@keyframes splash-dezoom {
  0% { opacity: 0; transform: scale(1.6); }
  35% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}
}