#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white; /* Default light mode background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 1; /* Start fully visible */
  visibility: visible; /* Start visible */
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease; /* Smooth transition */
}

#splash-screen.visible {
  display: flex; /* Show only when this class is added */
}

#splash-screen.hidden {
  opacity: 0; /* Fade out */
  visibility: hidden; /* Hide after fading */
}

#splash-screen img {
  max-width: 150px;
  width: 30%;
  aspect-ratio: 1/1;
  transition: transform 0.5s ease; /* Add transition for zoom effect */
}

#splash-screen.zoom img {
  transform: scale(20); /* Zoom in effect */
}

@media (prefers-color-scheme: dark) {
  #splash-screen {
    background-color: black; /* Dark mode background */
  }
  #splash-screen img {
    content: url("/assets/pwa/posh-animation-dark.svg"); /* Switch to dark mode splash image */
  }
}