/*
 * Opening screen. Plain CSS in its own file (the Content Security Policy
 * blocks inline styles) so it paints before any JavaScript arrives.
 * main.tsx fades it out once the app has rendered. If the app never loads,
 * it hides itself after 8 seconds so the page is never stuck behind it.
 */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1d4ed8;
  color: #ffffff;
  transition:
    opacity 380ms ease,
    transform 380ms ease,
    visibility 0s linear 380ms;
  animation: sp-fail 300ms 8s forwards;
}
#splash .sp-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
#splash .sp-mark {
  width: 84px;
  height: 84px;
  filter: drop-shadow(0 18px 30px rgb(9 23 80 / 0.35));
  animation: sp-pop 520ms cubic-bezier(0.2, 0.8, 0.3, 1.25) both;
}
#splash .sp-u {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: sp-draw 480ms 180ms cubic-bezier(0.6, 0, 0.3, 1) forwards;
}
#splash .sp-arrow {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  animation: sp-draw 220ms 620ms ease-out forwards;
}
#splash .sp-pin {
  transform-origin: 10px 8.6px;
  transform: scale(0);
  animation: sp-pin 360ms 120ms cubic-bezier(0.2, 0.8, 0.3, 1.4) forwards;
}
#splash .sp-word {
  font-family:
    "Bricolage Grotesque Variable",
    "Plus Jakarta Sans Variable",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  opacity: 0;
  animation: sp-rise 420ms 380ms ease-out forwards;
}
#splash .sp-bar {
  position: relative;
  width: 64px;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.22);
  opacity: 0;
  animation: sp-rise 300ms 600ms ease-out forwards;
}
#splash .sp-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: 99px;
  background: #ffffff;
  animation: sp-slide 1s ease-in-out infinite;
}

/* Leaving: fade and lift away while the app rises in underneath. */
#splash.sp-out {
  opacity: 0;
  transform: scale(1.04);
  visibility: hidden;
  pointer-events: none;
}

@keyframes sp-pop {
  from {
    transform: scale(0.6) rotate(-8deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes sp-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes sp-pin {
  to {
    transform: scale(1);
  }
}
@keyframes sp-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sp-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(260%);
  }
}
@keyframes sp-fail {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #splash .sp-mark,
  #splash .sp-word,
  #splash .sp-bar,
  #splash .sp-u,
  #splash .sp-arrow,
  #splash .sp-pin {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
    transform: none;
  }
  #splash .sp-bar span {
    animation: none;
  }
  #splash {
    transition-duration: 0.01ms;
  }
}