/* Apex loading animation — sliced-A assemble/disassemble loop.
   Markup: copy the snippet from site/assets/apex-loader-snippet.html
   (inline SVG, paths verbatim from brand/apex/apex-mark-ink.svg — never redraw).

   Usage:
     <span class="apex-loader apex-loader--ink" role="status" aria-label="Loading">…svg…</span>

   Colour presets (pick ONE per context — all fills are currentColor):
     .apex-loader--ink    light backgrounds (default)
     .apex-loader--white  dark backgrounds
     .apex-loader--grey   muted/secondary contexts
     .apex-loader--accent modifier: middle slice goes Baby Blue Ice,
                          override via --apex-loader-accent
   Custom context: set any `color` on .apex-loader yourself.
   Guardrail: NEVER the white loader on Baby Blue Ice (#96C5F7) — fails WCAG.
   Ink-on-blue is the approved combo there.

   Size: set --apex-loader-size (or width) on the wrapper. Works 24px and up.
   Loop: 2.4s. Pieces slide in staggered along their own axes, hard-stop
   with a micro-settle, breathe once at hold, then retract. No JS, no libs. */

.apex-loader {
  display: inline-block;
  width: var(--apex-loader-size, 64px);
  color: #1A1D1A;
}

.apex-loader svg {
  display: block;
  width: 100%;
  height: auto;
  /* default hidden overflow clips pieces at the viewBox edge = masked wipe */
}

.apex-loader--ink   { color: #1A1D1A; }
.apex-loader--white { color: #F2F4FF; }
.apex-loader--grey  { color: #6C756B; }

.apex-loader--accent .apexldr-seg--mid {
  color: var(--apex-loader-accent, #96C5F7);
}

.apex-loader .apexldr-seg {
  animation-duration: 2.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.apex-loader .apexldr-seg--top   { animation-name: apexldr-top; }
.apex-loader .apexldr-seg--right { animation-name: apexldr-right; }
.apex-loader .apexldr-seg--mid   { animation-name: apexldr-mid; }
.apex-loader .apexldr-seg--foot  { animation-name: apexldr-foot; }

/* Timeline (% of 2.4s):
   assemble 0–30% (staggered 3.75% apart, 15% travel, ~2.5% settle)
   hold 30–62.5% (all segs breathe-clunk together at 45–48.5%)
   disassemble 62.5–88.75% (staggered retract, same doors they came in)
   dark beat 88.75–100% */

@keyframes apexldr-top {
  0%     { transform: translate(-570px, -600px); animation-timing-function: cubic-bezier(.25, 0, .05, 1); }
  15%    { transform: translate(14px, 15px);     animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  17.5%  { transform: translate(0, 0); }
  45%    { transform: translate(0, 0);           animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  46.5%  { transform: translate(-9px, -9px);     animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  48.5%  { transform: translate(0, 0); }
  62.5%  { transform: translate(0, 0);           animation-timing-function: cubic-bezier(.7, 0, 1, 1); }
  77.5%  { transform: translate(-570px, -600px); }
  100%   { transform: translate(-570px, -600px); }
}

@keyframes apexldr-right {
  0%, 3.75% { transform: translate(600px, 0);   animation-timing-function: cubic-bezier(.25, 0, .05, 1); }
  18.75% { transform: translate(-14px, 0);      animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  21.25% { transform: translate(0, 0); }
  45%    { transform: translate(0, 0);          animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  46.5%  { transform: translate(9px, 0);        animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  48.5%  { transform: translate(0, 0); }
  66.25% { transform: translate(0, 0);          animation-timing-function: cubic-bezier(.7, 0, 1, 1); }
  81.25% { transform: translate(600px, 0); }
  100%   { transform: translate(600px, 0); }
}

@keyframes apexldr-mid {
  0%, 7.5% { transform: translate(-900px, 0);   animation-timing-function: cubic-bezier(.25, 0, .05, 1); }
  22.5%  { transform: translate(14px, 0);       animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  25%    { transform: translate(0, 0); }
  45%    { transform: translate(0, 0);          animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  46.5%  { transform: translate(-9px, 0);       animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  48.5%  { transform: translate(0, 0); }
  70%    { transform: translate(0, 0);          animation-timing-function: cubic-bezier(.7, 0, 1, 1); }
  85%    { transform: translate(-900px, 0); }
  100%   { transform: translate(-900px, 0); }
}

@keyframes apexldr-foot {
  0%, 11.25% { transform: translate(0, 300px);  animation-timing-function: cubic-bezier(.25, 0, .05, 1); }
  26.25% { transform: translate(0, -12px);      animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  28.75% { transform: translate(0, 0); }
  45%    { transform: translate(0, 0);          animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  46.5%  { transform: translate(0, 9px);        animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  48.5%  { transform: translate(0, 0); }
  73.75% { transform: translate(0, 0);          animation-timing-function: cubic-bezier(.7, 0, 1, 1); }
  88.75% { transform: translate(0, 300px); }
  100%   { transform: translate(0, 300px); }
}

@media (prefers-reduced-motion: reduce) {
  .apex-loader .apexldr-seg {
    animation-name: apexldr-pulse;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
  }
}

@keyframes apexldr-pulse {
  0%, 100% { opacity: 1; transform: none; }
  50%      { opacity: .55; transform: none; }
}