.transition-panel {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 13px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--paper) 30%, transparent), transparent 30%),
    var(--yellow);
  color: var(--ink);
}

.site-loader-flower {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: 50% 50% 50% 14px;
  background: var(--paper);
  box-shadow: 0 15px 45px color-mix(in srgb, var(--ink) 14%, transparent);
  animation: site-loader-flower 1.25s ease-in-out infinite;
}

.site-loader-flower > span {
  color: var(--ink);
  font: 500 40px/1 var(--display, Georgia, serif);
  animation: site-loader-spin 5s linear infinite;
}

.site-loader-wordmark {
  font: 800 clamp(25px, 4vw, 34px)/1 var(--display, Georgia, serif);
  letter-spacing: -.08em;
}

.site-loader-caption {
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  font: 600 10px/1.4 var(--body, Inter, Arial, sans-serif);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.site-loader-orbit {
  display: flex;
  gap: 7px;
  margin-top: 5px;
}

.site-loader-orbit i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  animation: site-loader-pulse .9s ease-in-out infinite;
}

.site-loader-orbit i:nth-child(2) {
  animation-delay: .15s;
}

.site-loader-orbit i:nth-child(3) {
  animation-delay: .3s;
}

.transition-panel.is-wiping .site-loader-flower {
  animation-play-state: running;
}

@keyframes site-loader-flower {
  50% { transform: translateY(-5px) rotate(7deg); }
}

@keyframes site-loader-spin {
  to { transform: rotate(360deg); }
}

@keyframes site-loader-pulse {
  50% { transform: translateY(-4px); opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader-flower,
  .site-loader-flower > span,
  .site-loader-orbit i {
    animation: none;
  }
}