/* A loading indicator's reveal (loading-reveal.ts): transparent until the
   load outlasts the delay, then a quick fade. The delay is the clock's, set
   inline by useLoadingReveal; this one serves an indicator without a scope.
   Reduced motion shortens the fade, never the delay, so a quick load still
   shows nothing. */
.loading-reveal { animation: loading-reveal var(--motion-fast) both; animation-delay: 150ms; }
@keyframes loading-reveal { from { opacity: 0; } }

/* A skeleton's sheen: a band crossing it as a transform, so it costs no
   repaint. `--loading-sheen-surface` is the surface the skeleton sits on. */
:where(.loading-sheen) { position: relative; }
.loading-sheen { overflow: hidden; }
.loading-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--loading-sheen-surface, var(--surface-panel-raised)) 80%, transparent) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: loading-sheen 1.6s ease-in-out infinite;
}
@keyframes loading-sheen { to { transform: translateX(100%); } }

.loading-announcement { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }