/*
 * Opening animation (index.html #splash): the logo from the iPhone launch
 * screen pops, a shine sweeps over it, then it zooms into the app. Plain CSS
 * so it shows before any JavaScript; main.tsx removes it (hideSplash).
 * Always the night colour, like Android's own launch screen (manifest
 * background_color) and the iPhone launch images, so opening never flashes.
 */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f2732;
  transition:
    opacity 320ms ease,
    visibility 0s linear 320ms;
}
#splash .logo {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 26px;
  overflow: hidden;
  animation:
    splash-in 700ms cubic-bezier(0.2, 0.9, 0.3, 1.25) both,
    splash-breathe 1600ms ease-in-out 1400ms infinite;
}
#splash .logo img {
  display: block;
  width: 100%;
  height: 100%;
}
/* The shine sweeping across */
#splash .logo::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  animation: splash-shine 900ms ease-in-out 450ms both;
}
/* Reloaded by pull to refresh (theme-init.js) */
:root[data-no-splash] #splash {
  display: none;
}
#splash.out {
  opacity: 0;
  visibility: hidden;
}
#splash.out .logo {
  animation: splash-out 320ms ease-in both;
}

@keyframes splash-in {
  from {
    transform: scale(0.55) rotate(-12deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}
@keyframes splash-shine {
  to {
    transform: translateX(120%);
  }
}
@keyframes splash-breathe {
  50% {
    transform: scale(0.94);
  }
}
@keyframes splash-out {
  to {
    transform: scale(1.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #splash .logo,
  #splash .logo::after,
  #splash.out .logo {
    animation: none;
  }
}