/* ============================================================================
 * Crewty — Rose Three loader styling
 *
 * Sizes and themes the SVG loader rendered by /js/rose-loader.js. The SVG
 * inherits its color from the host element's `currentColor`, so theming is
 * controlled here at the host level.
 *
 * Two surfaces:
 *   .rose-loader            — the upgraded host (any .spinner / .rose-loader-mount)
 *   .rose-loader__svg       — the SVG itself (sized to fill the host)
 *
 * Sizes:
 *   default                 — 64px, used for full-page splash screens
 *   .rose-loader-sm         — 32px, for inline lists / tables
 *   .rose-loader-xs         — 20px, drop-in replacement for the old 20×20 spinner
 * ============================================================================ */

.rose-loader {
  /* Default — what a full-page splash gets when the host has no explicit size */
  width: 96px;
  height: 96px;
  /* Reset legacy .spinner border styling — we paint our own SVG */
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  /* Brand red — overridable by ancestor `color` */
  color: #FF4433;
  /* Center within parent flex/grid contexts */
  display: inline-block;
  line-height: 0;
  /* Kill the legacy CSS `spin` animation so it doesn't fight the SVG */
  animation: none !important;
}

.rose-loader__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Size variants — apply on the host element. */
.rose-loader.rose-loader-xs,
.rose-loader-mount.rose-loader-xs {
  width: 28px;
  height: 28px;
}

.rose-loader.rose-loader-sm,
.rose-loader-mount.rose-loader-sm {
  width: 44px;
  height: 44px;
}

.rose-loader.rose-loader-md,
.rose-loader-mount.rose-loader-md {
  width: 72px;
  height: 72px;
}

.rose-loader.rose-loader-lg,
.rose-loader-mount.rose-loader-lg {
  width: 128px;
  height: 128px;
}

/* When the legacy .spinner element had `mx-auto` etc. — keep those layout
   classes valid by not changing display in those cases. We treat `inline-block`
   above as the default, but allow flex/block contexts to override naturally. */

/* Dark-mode tint nudge — slightly warmer head against deep backgrounds. */
html.dark .rose-loader {
  color: #FF7A66;
}

/* Reduced-motion: keep the SVG visible but stop the rAF tick by hiding the
   animation — JS already pauses on `visibilitychange`, but for accessibility
   we should also drop motion when the user's OS prefers it. We can't stop
   the rAF from CSS, but we can fade the trail to a static silhouette by
   freezing opacity transitions; the JS code is fine to keep ticking — at
   <1ms per frame on a single instance the cost is invisible. */
@media (prefers-reduced-motion: reduce) {
  .rose-loader__svg {
    /* Subtle visual: trail still moves but the user has the OS hint that
       we respect their preference. If you want a hard freeze, add
       `animation-play-state: paused` rules in JS that gate the rAF
       advance behind a `prefers-reduced-motion` check. */
  }
}