.yarp-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #060608;
  display: grid;
  place-items: center;
  color: #b0a5aa;
  font-family: "Segoe UI", sans-serif;
  overflow: hidden;
}
.splash-frame {
  position: absolute;
  inset: 24px;
  border: 1px solid #331017;
  animation: splash-frame-in 0.8s ease-out both;
}
.yarp-splash.portable .splash-frame,
.yarp-splash.portable .splash-wordmark {
  animation: none;
}
.splash-frame i {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: #f53244;
  border-style: solid;
}
.splash-frame i:nth-child(1) {
  left: -1px;
  top: -1px;
  border-width: 2px 0 0 2px;
}
.splash-frame i:nth-child(2) {
  right: -1px;
  top: -1px;
  border-width: 2px 2px 0 0;
}
.splash-frame i:nth-child(3) {
  right: -1px;
  bottom: -1px;
  border-width: 0 2px 2px 0;
}
.splash-frame i:nth-child(4) {
  left: -1px;
  bottom: -1px;
  border-width: 0 0 2px 2px;
}
.splash-content {
  position: relative;
  width: min(680px, 76vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.splash-wordmark {
  width: 100%;
  height: auto;
  object-fit: contain;
  animation: splash-logo-in 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.splash-track {
  width: 170px;
  height: 2px;
  background: #3c121a;
  overflow: hidden;
  margin-top: 18px;
}
.splash-track span {
  display: block;
  width: 48%;
  height: 100%;
  background: #ff3847;
  box-shadow: 0 0 12px #ff273e;
  animation: splash-progress 1.5s ease-in-out infinite;
}
.splash-status {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #a7a0a4;
}
.splash-scan {
  position: absolute;
  height: 1px;
  width: 100%;
  left: 0;
  top: -5%;
  background: #ff2635;
  opacity: 0.18;
  box-shadow: 0 0 25px 10px #d8203430;
  animation: splash-scan 2.4s ease-in-out infinite;
}
.splash-close {
  position: absolute;
  bottom: 40px;
  right: 40px;
  border: 1px solid #5b242e;
  border-radius: 8px;
  padding: 9px 15px;
  background: #191014;
  color: #d1c3c8;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
@keyframes splash-logo-in {
  0% {
    opacity: 0;
    transform: scale(0.78);
    filter: blur(10px);
    clip-path: inset(0 100% 0 0);
  }
  60% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    clip-path: inset(0 0 0 0);
  }
}
@keyframes splash-frame-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes splash-progress {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(220%);
  }
}
@keyframes splash-scan {
  from {
    top: -5%;
  }
  to {
    top: 110%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .yarp-splash * {
    animation: none !important;
  }
  .splash-scan {
    display: none;
  }
  .splash-wordmark {
    opacity: 1;
    filter: none;
  }
}