.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background:
    radial-gradient(60vmax 60vmax at 85% 0%, rgba(253, 145, 2, 0.1), transparent 60%),
    radial-gradient(60vmax 60vmax at 10% 100%, rgba(0, 116, 252, 0.08), transparent 60%), #f5f7fb;
  opacity: 1;
  transition:
    opacity 0.42s cubic-bezier(0.2, 0.7, 0.2, 1),
    visibility 0s linear 0.42s;
  animation: splash-failsafe 0.4s ease 20s forwards;
}
[data-theme='dark'] .splash {
  background:
    radial-gradient(60vmax 60vmax at 85% 0%, rgba(253, 145, 2, 0.14), transparent 60%),
    radial-gradient(60vmax 60vmax at 10% 100%, rgba(30, 123, 240, 0.18), transparent 60%), linear-gradient(160deg, #0b1434 0%, #070b18 70%);
}
.splash.splash-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.splash-stage {
  position: relative;
  width: 120px;
  height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.splash-mark {
  display: block;
  width: 84px;
  height: 84px;
  margin-block-end: 14px;
  transform-origin: 50% 100%;
  animation: splash-bounce 1.15s infinite;
  will-change: transform;
}
.splash-shadow {
  position: absolute;
  inset-block-end: 4px;
  left: 50%;
  width: 64px;
  height: 12px;
  margin-left: -32px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11, 20, 52, 0.4), rgba(11, 20, 52, 0));
  animation: splash-shadow 1.15s infinite;
}
[data-theme='dark'] .splash-shadow {
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.splash-word {
  width: 96px;
  height: 61px;
  background: url('/tpiy-wordmark.png') center / contain no-repeat;
  opacity: 0;
  animation: splash-word-in 0.6s ease 0.35s forwards;
}
[data-theme='dark'] .splash-word {
  background-image: url('/tpiy-wordmark-dark-bg.png');
}

@keyframes splash-bounce {
  0% {
    transform: translateY(0) scale(1.08, 0.92);
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  12% {
    transform: translateY(-5px) scale(0.97, 1.03);
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  50% {
    transform: translateY(-34px) scale(1, 1);
    animation-timing-function: cubic-bezier(0.55, 0, 0.78, 0.4);
  }
  90% {
    transform: translateY(0) scale(1, 1);
  }
  100% {
    transform: translateY(0) scale(1.08, 0.92);
  }
}
@keyframes splash-shadow {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.55);
    opacity: 0.45;
  }
}
@keyframes splash-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.62;
    transform: scale(0.97);
  }
}
@keyframes splash-word-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes splash-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash-mark {
    animation-name: splash-pulse;
    animation-timing-function: ease-in-out;
    transform-origin: 50% 50%;
  }
  .splash-shadow {
    animation-name: splash-pulse;
    animation-timing-function: ease-in-out;
  }
  .splash-word {
    animation: none;
    opacity: 1;
  }
}