.splash {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: var(--color-forest);
  transition: transform 700ms cubic-bezier(0.76, 0, 0.24, 1);
}
.splash-content {
  width: min(280px, calc(100% - 48px));
  display: grid;
  gap: 32px;
  justify-items: center;
}
.splash-logo {
  width: 280px;
  max-width: 100%;
  opacity: 0;
  transform: translateY(12px);
  animation: splashLogo 800ms var(--ease-out) 200ms forwards;
}
.splash-logo path {
  stroke: rgba(245,240,232,0.9);
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: drawLogo 1.1s var(--ease-out) forwards 120ms;
}
.splash-progress {
  width: 160px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
}
.splash-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(245,240,232,0.72);
  transform-origin: left;
  transform: scaleX(0);
}
.splash.running .splash-progress span { animation: progressBar 1.8s var(--ease-smooth) forwards; }
.splash.exit { transform: translateY(-100%); }
.splash.skip { display: none; }
.site-shell { opacity: 0; transition: opacity 500ms ease; }
body.site-ready .site-shell,
body.no-splash .site-shell { opacity: 1; }
@keyframes splashLogo {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes drawLogo {
  to { stroke-dashoffset: 0; }
}
@keyframes progressBar {
  to { transform: scaleX(1); }
}