/* ==========================================================================
   RYS Loader — animated logo mark
   Ship once. All behavior lives here; PHP only sets the custom properties.
   Rendered by lib/components/php/rys-loader.php (\RYS\UI\Loader::render()).
   ========================================================================== */

.rysl {
  /* ---- knobs (PHP overrides these inline; edit here to change the default) */
  --rysl-size:    48px;      /* rendered box; the mark is square */
  --rysl-speed:   1.2s;      /* one full rise-and-settle cycle */
  --rysl-stagger: 0.13s;     /* gap between each bar's start */
  --rysl-rest:    0.18;      /* how short a bar collapses to (0–1) */
  --rysl-dim:     0.30;      /* how faint a bar goes while collapsed (0–1) */
  --rysl-color:   #1b3a6b;   /* one hue for the whole mark */
  --rysl-ease:    cubic-bezier(0.4, 0, 0.2, 1);

  display: block;
  width: var(--rysl-size);
  height: var(--rysl-size);
  color: var(--rysl-color);
  overflow: visible;
}

/* Bars are <path>s, so fill-box is required to scale each from its own baseline. */
.rysl__bar {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: bottom;
  animation: rysl-rise var(--rysl-speed) var(--rysl-ease) infinite;
  will-change: transform, opacity;
}

/* Left to right. Nothing else differentiates the bars — same fill, same curve. */
.rysl__bar--1 { animation-delay: 0s; }
.rysl__bar--2 { animation-delay: var(--rysl-stagger); }
.rysl__bar--3 { animation-delay: calc(var(--rysl-stagger) * 2); }

/* Height and weight move together: a bar that drops also fades back. */
@keyframes rysl-rise {
  0%   { transform: scaleY(var(--rysl-rest)); opacity: var(--rysl-dim); }
  28%  { transform: scaleY(1);                opacity: 1; }
  62%  { transform: scaleY(1);                opacity: 1; }
  100% { transform: scaleY(var(--rysl-rest)); opacity: var(--rysl-dim); }
}

/* Same component, animation off — use it as a plain static logo mark. */
.rysl--static .rysl__bar { animation: none; transform: none; opacity: 1; }

/* --------------------------------------------------------------------------
   Optional: pure-CSS show delay. Replaces the 1500ms JS threshold — the loader
   sits in the DOM from the start but stays invisible until the hold is
   actually slow, so a fast hold never flashes it.
   -------------------------------------------------------------------------- */
.rysl-gate {
  opacity: 0;
  animation: rysl-gate-in 0.2s ease-out var(--rysl-gate-delay, 1500ms) forwards;
}
@keyframes rysl-gate-in { to { opacity: 1; } }

/* --------------------------------------------------------------------------
   Accessibility floor. Motion off, mark still fully legible and present.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rysl__bar { animation: none; transform: none; opacity: 1; }
  .rysl-gate { animation: none; opacity: 1; }
}