/* Shared loading art: the approved float, hat-tip, and quick flip. */
.fancy-loading {
  --hat-cycle: 3.6s;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px 0;
  color: var(--ink, #202737);
}
.fancy-loading__art {
  position: relative;
  display: block;
  width: 48px;
  height: 54px;
  flex: none;
}
.fancy-loading__flip {
  position: relative;
  z-index: 1;
  display: block;
  transform-origin: 50% 52%;
  animation: fancy-hat-flip var(--hat-cycle) cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.fancy-loading__hat {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  transform-origin: 50% 76%;
  animation: fancy-hat-greeting var(--hat-cycle) ease-in-out infinite;
}
.fancy-loading__shadow {
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 3px;
  border-radius: 50%;
  background: #202737;
  opacity: 0.09;
  filter: blur(1.5px);
  animation: fancy-hat-shadow var(--hat-cycle) ease-in-out infinite;
}
.fancy-loading__copy,
.fancy-loading__title,
.fancy-loading__aside {
  display: block;
}
.fancy-loading__title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.fancy-loading__aside {
  margin-top: 5px;
  color: var(--muted, #657187);
  font-size: 12px;
  line-height: 1.5;
}
.fancy-loading--inline .fancy-loading__hat {
  animation-name: fancy-hat-compact-greeting;
}
.fancy-loading--page {
  min-height: 100dvh;
  flex-direction: column;
  justify-content: center;
  gap: 27px;
  padding: 32px 24px;
  text-align: center;
}
.fancy-loading--page .fancy-loading__art {
  width: 156px;
  height: 172px;
}
.fancy-loading--page .fancy-loading__shadow {
  height: 7px;
  filter: blur(3px);
}
.fancy-loading--page .fancy-loading__title {
  font-size: 19px;
  letter-spacing: -0.025em;
}
.fancy-loading--page .fancy-loading__aside {
  margin-top: 8px;
  font-size: 13px;
}
.fancy-loading--image {
  position: absolute;
  inset: 0;
  justify-content: center;
  padding: 0;
  pointer-events: none;
}
.fancy-loading--image .fancy-loading__art {
  width: min(100%, 44px);
  height: auto;
  aspect-ratio: 1;
}
.fancy-loading--image .fancy-loading__shadow {
  display: none;
}
.fancy-loading--image .fancy-loading__hat {
  animation-name: fancy-hat-image-greeting;
}
/* Defaults have no selector specificity, so existing image-size classes win. */
:where(.loading-image) {
  width: var(--loading-image-width, 48px);
  height: var(--loading-image-height, 48px);
  object-fit: cover;
}
.loading-image {
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  flex: none;
  vertical-align: middle;
}
.loading-image > .loading-image__content {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: none;
  grid-area: 1 / 1;
  object-fit: inherit;
  border-radius: inherit;
}
.loading-image[data-state='loading'] > .loading-image__content {
  opacity: 0;
}
.loading-image__fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--surface, #f5f6f9);
  color: var(--muted, #657187);
  font-size: 14px;
}
@keyframes fancy-hat-greeting {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  28% {
    transform: translateY(-7px) rotate(0);
  }
  45% {
    transform: translateY(-9px) rotate(-8deg);
  }
  60% {
    transform: translateY(-7px) rotate(2deg);
  }
  78% {
    transform: translateY(-3px) rotate(0);
  }
}
@keyframes fancy-hat-image-greeting {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  28% {
    transform: translateY(-3%) rotate(0);
  }
  45% {
    transform: translateY(-5%) rotate(-8deg);
  }
  60% {
    transform: translateY(-3%) rotate(2deg);
  }
  78% {
    transform: translateY(-1%) rotate(0);
  }
}
@keyframes fancy-hat-compact-greeting {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  28% {
    transform: translateY(-3px) rotate(0);
  }
  45% {
    transform: translateY(-4px) rotate(-8deg);
  }
  60% {
    transform: translateY(-3px) rotate(2deg);
  }
  78% {
    transform: translateY(-1px) rotate(0);
  }
}
@keyframes fancy-hat-shadow {
  0%,
  100% {
    opacity: 0.09;
    transform: scaleX(1);
  }
  45% {
    opacity: 0.05;
    transform: scaleX(0.8);
  }
}
@keyframes fancy-hat-flip {
  0%,
  62% {
    transform: rotate(0deg);
  }
  77%,
  100% {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fancy-loading__hat,
  .fancy-loading__flip,
  .fancy-loading__shadow {
    animation: none;
  }
}