.rgb-startup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  overflow: hidden;
  padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 43%, rgba(161, 112, 32, .105), transparent 29%),
    linear-gradient(180deg, #070707 0%, #030404 100%);
  color: #f2eee6;
  opacity: 1;
  visibility: visible;
  transition: opacity .32s ease, visibility .32s ease;
  isolation: isolate;
}

.rgb-startup::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(62vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(203, 155, 64, .10), transparent 68%);
  transform: translate(-50%, -50%);
  filter: blur(20px);
  pointer-events: none;
}

.rgb-startup__content {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}

.rgb-startup__mark {
  width: clamp(138px, 37vw, 184px);
  height: auto;
  margin: 0 0 22px;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .62)) drop-shadow(0 0 18px rgba(195, 141, 41, .09));
  transform-origin: 50% 54%;
  animation: rgb-startup-breathe 2.8s ease-in-out infinite;
}

.rgb-startup__name {
  margin: 0;
  color: #f1eee8;
  font: 650 clamp(18px, 5vw, 22px)/1.1 "Segoe UI", Arial, sans-serif;
  letter-spacing: .12em;
}

.rgb-startup__caption {
  margin: 8px 0 0;
  color: #bd9346;
  font: 600 9px/1.2 "Segoe UI", Arial, sans-serif;
  letter-spacing: .34em;
}

.rgb-startup__progress {
  position: relative;
  width: 92px;
  height: 1px;
  margin-top: 28px;
  overflow: hidden;
  background: rgba(217, 177, 95, .17);
}

.rgb-startup__progress::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 46%;
  background: linear-gradient(90deg, transparent, #d7ad5b, transparent);
  animation: rgb-startup-progress 1.7s ease-in-out infinite;
}

html.rgb-startup-active #app {
  visibility: hidden;
}

html.rgb-startup-active,
html.rgb-startup-active body,
html.rgb-startup-leaving,
html.rgb-startup-leaving body {
  overflow: hidden;
}

html.rgb-app-ready #app {
  visibility: visible;
}

.rgb-startup.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes rgb-startup-breathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .62)) drop-shadow(0 0 14px rgba(195, 141, 41, .07)); }
  50% { transform: scale(1.018); filter: drop-shadow(0 17px 32px rgba(0, 0, 0, .66)) drop-shadow(0 0 22px rgba(195, 141, 41, .14)); }
}

@keyframes rgb-startup-progress {
  from { transform: translateX(-120%); }
  to { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
  .rgb-startup__mark,
  .rgb-startup__progress::after { animation: none; }
  .rgb-startup__progress::after { width: 58%; background: #b98b3e; opacity: .75; }
}