#pb-opening-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  background: #010203;
}

.pb-opening-boot {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  color: rgba(238, 241, 242, .48);
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, .08), transparent 24%),
    #010203;
}

.pb-opening-boot::before,
.pb-opening-boot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(48vw, 680px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pbBootOrbit 2.4s linear infinite;
}

.pb-opening-boot::after {
  width: min(34vw, 480px);
  border-color: rgba(239, 107, 53, .24);
  animation-direction: reverse;
  animation-duration: 3.1s;
}

.pb-opening-boot img {
  position: relative;
  z-index: 2;
  width: clamp(72px, 8vw, 112px);
  max-height: 112px;
  object-fit: contain;
  filter: grayscale(1) brightness(1.7) drop-shadow(0 0 26px rgba(255, 255, 255, .16));
  animation: pbBootPulse 1.45s ease-in-out infinite;
}

.pb-opening-boot span {
  position: relative;
  z-index: 2;
  font: 650 7px/1.4 Arial, sans-serif;
  letter-spacing: .2em;
}

@keyframes pbBootOrbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pbBootPulse {
  50% { opacity: .48; transform: scale(.94); }
}

@media (max-width: 600px) {
  .pb-opening-boot::before { width: 82vw; }
  .pb-opening-boot::after { width: 58vw; }
  .pb-opening-boot span { max-width: 250px; text-align: center; font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  #pb-opening-root { display: none; }
}