/* Shared loading feedback for the main app, routed views, admin, and photo preview. */
:root {
  --loading-base: #171c26;
  --loading-highlight: rgba(255, 255, 255, .11);
}

@keyframes realora-shimmer {
  from { background-position: 180% 0; }
  to { background-position: -80% 0; }
}

img.is-image-loading {
  color: transparent !important;
  background-color: var(--loading-base) !important;
  background-image: linear-gradient(100deg, var(--loading-base) 25%, var(--loading-highlight) 48%, var(--loading-base) 70%) !important;
  background-size: 220% 100% !important;
  animation: realora-shimmer 1.35s ease-in-out infinite;
}

[data-image-loading="true"] {
  position: relative !important;
  isolation: isolate;
}

[data-image-loading="true"]::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, var(--loading-highlight) 48%, transparent 70%);
  background-size: 220% 100%;
  animation: realora-shimmer 1.35s ease-in-out infinite;
  content: "";
  pointer-events: none;
}

.loading-skeleton-active,
.spa-loading {
  position: relative !important;
  display: block !important;
  min-height: 82px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .045) !important;
  border-radius: 14px !important;
  background: var(--loading-base) !important;
  color: transparent !important;
  font-size: 0 !important;
  text-align: start !important;
}

/* An inline hidden state must win over the skeleton's forced display rule. */
.loading-skeleton-active[style*="display: none"] {
  display: none !important;
}

.loading-skeleton-active > i,
.loading-skeleton-active > svg,
.loading-skeleton-active > .fa-spinner,
.loading-skeleton-active > .spinner-border {
  display: none !important;
}

.loading-skeleton-active::before,
.loading-skeleton-active::after,
.spa-loading::before,
.spa-loading::after {
  position: absolute;
  inset-inline-start: 16px;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(100deg, #202735 25%, #343d4d 48%, #202735 70%);
  background-size: 220% 100%;
  animation: realora-shimmer 1.35s ease-in-out infinite;
  content: "";
  pointer-events: none;
}

.loading-skeleton-active::before,
.spa-loading::before {
  top: 27px;
  width: min(46%, 240px);
}

.loading-skeleton-active::after,
.spa-loading::after {
  top: 49px;
  width: min(72%, 380px);
}

@media (prefers-reduced-motion: reduce) {
  img.is-image-loading,
  [data-image-loading="true"]::after,
  .loading-skeleton-active::before,
  .loading-skeleton-active::after,
  .spa-loading::before,
  .spa-loading::after {
    animation: none !important;
  }
}