.boot-splash {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
  color: #fff;
  background: #0879ce;
  font:
    14px/1.5 system-ui,
    sans-serif;
}
.splash-scene {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 1000px;
}
.splash-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.splash-clouds {
  animation: splash-cloud-drift 18s ease-in-out infinite alternate;
}
.splash-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 32px 0;
  text-align: center;
  z-index: 1;
}
.splash-center img {
  display: block;
  width: clamp(210px, 25vw, 310px);
  max-width: 72vw;
  height: auto;
  filter: drop-shadow(0 3px 10px rgb(0 57 120 / 10%));
}
.splash-center p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 24px;
  background: #0b68a9;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.splash-dots {
  display: inline-flex;
  gap: 3px;
  padding-top: 5px;
}
.splash-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  animation: splash-dot 1.2s ease-in-out infinite;
}
.splash-dots i:nth-child(2) {
  animation-delay: 0.16s;
}
.splash-dots i:nth-child(3) {
  animation-delay: 0.32s;
}
.splash-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.splash-sticker {
  position: absolute;
  overflow: visible;
  width: clamp(150px, 18vw, 260px);
  height: auto;
  aspect-ratio: 1;
  transform: rotate(var(--tilt));
  filter: drop-shadow(0 10px 11px rgb(12 58 101 / 20%));
  animation: splash-stick 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--delay) both;
  transform-origin: 50% 85%;
}
.sticker-heart {
  top: 6%;
  left: 5%;
  --tilt: -16deg;
  --delay: 40ms;
  --from-x: -100px;
  --from-y: -85px;
}
.sticker-camera {
  top: 5%;
  right: 5%;
  --tilt: 14deg;
  --delay: 180ms;
  --from-x: 100px;
  --from-y: -65px;
}
.sticker-cherries {
  bottom: 1%;
  left: 5%;
  --tilt: -12deg;
  --delay: 300ms;
  --from-x: -80px;
  --from-y: 90px;
}
.sticker-cassette {
  bottom: 9%;
  right: 3%;
  --tilt: 18deg;
  --delay: 420ms;
  --from-x: 100px;
  --from-y: 80px;
}
.sticker-flower {
  bottom: 5%;
  left: 27%;
  width: clamp(90px, 11vw, 160px);
  --tilt: 10deg;
  --delay: 540ms;
  --from-x: -30px;
  --from-y: 120px;
}
.sticker-disco {
  bottom: -6%;
  right: 25%;
  width: clamp(130px, 15vw, 230px);
  --tilt: -13deg;
  --delay: 660ms;
  --from-x: 35px;
  --from-y: 120px;
}
@keyframes splash-stick {
  0% {
    opacity: 0;
    transform: translate(var(--from-x), var(--from-y)) rotate(calc(var(--tilt) - 18deg))
      rotateX(38deg) scale(1.3);
  }
  45% {
    opacity: 1;
  }
  72% {
    transform: translate(0, 0) rotate(calc(var(--tilt) + 2deg)) rotateX(0deg) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--tilt)) rotateX(0deg) scale(1);
  }
}
@keyframes splash-cloud-drift {
  to {
    transform: translate(42px, -10px);
  }
}
@keyframes splash-dot {
  0%,
  70%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  35% {
    transform: translateY(-3px);
    opacity: 1;
  }
}
@media (max-width: 640px) {
  .splash-center {
    gap: 22px;
  }
  .splash-center img {
    width: 240px;
    max-width: 70vw;
  }
  .splash-sticker {
    width: clamp(118px, 34vw, 185px);
  }
  .sticker-heart {
    top: 9%;
    left: -5%;
    --tilt: -20deg;
  }
  .sticker-camera {
    top: 12%;
    right: -7%;
    --tilt: 17deg;
  }
  .sticker-cherries {
    bottom: 3%;
    left: -7%;
    width: clamp(145px, 42vw, 215px);
  }
  .sticker-cassette {
    bottom: 18%;
    right: -7%;
    --tilt: 21deg;
  }
  .sticker-flower {
    bottom: 24%;
    left: -4%;
    width: clamp(80px, 23vw, 120px);
  }
  .sticker-disco {
    bottom: -3%;
    right: -4%;
    width: clamp(155px, 45vw, 230px);
  }
}
@media (max-height: 500px) and (min-width: 641px) {
  .splash-sticker {
    width: 135px;
  }
  .sticker-heart,
  .sticker-camera {
    top: -8%;
  }
  .sticker-cherries,
  .sticker-cassette {
    bottom: -8%;
  }
  .sticker-flower,
  .sticker-disco {
    display: none;
  }
  .splash-center img {
    width: 230px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .splash-sticker,
  .splash-clouds,
  .splash-dots i {
    animation: none;
  }
  .splash-sticker {
    opacity: 1;
    transform: rotate(var(--tilt));
  }
}

.dark .boot-splash {
  background: #091a2a;
}
.dark .splash-sky {
  filter: brightness(0.32) saturate(0.75);
}
.dark .splash-center p {
  background: #153149;
}