/* Shiftflux motion — loading, transitions.
   Everything here is derived from the mark: three rows, the middle one displaced.
   Duration/easing tokens match the design system's feel (short, no bounce).
   Load once per page:  <link rel="stylesheet" href="brand/shiftflux-motion.css"> */

:root {
  --sf-navy: #06114E;
  --sf-action: #2D63F2;
  --sf-on-navy: #5B85FF;
  --sf-surface: #F4F4F8;
  --sf-border: #EAEAF3;
  --sf-muted: #71779A;

  --sf-dur-fast: 120ms;   /* hover, press, chip */
  --sf-dur: 220ms;        /* enter/exit, panels, tabs */
  --sf-dur-slow: 420ms;   /* route change, drawer, splash exit */
  --sf-ease: cubic-bezier(0.2, 0, 0.2, 1);       /* default */
  --sf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* entering elements */
  --sf-loop: 1400ms;      /* one full loader cycle */
}

/* ── The loader: the mark, animated ─────────────────────────────── */
/* <span class="sf-loader" style="--sf-size:64px" role="status" aria-label="Loading">
     <i></i><i></i><i></i>
   </span>                                        add .sf-loader--onDark on navy */

.sf-loader {
  display: inline-block;
  position: relative;
  width: var(--sf-size, 48px);
  height: var(--sf-size, 48px);
  flex: none;
}
.sf-loader > i {
  position: absolute;
  height: 14.06%;              /* 9/64 */
  border-radius: 999px;
  background: var(--sf-navy);
}
.sf-loader > i:nth-child(1) { left: 12.5%; top: 21.87%; width: 53.12%; animation: sf-row-a var(--sf-loop) var(--sf-ease) infinite; }
.sf-loader > i:nth-child(2) { left: 29.68%; top: 43.0%;  width: 57.81%; background: var(--sf-action); animation: sf-row-mid var(--sf-loop) var(--sf-ease) infinite; }
.sf-loader > i:nth-child(3) { left: 12.5%; top: 64.06%; width: 53.12%; animation: sf-row-a var(--sf-loop) var(--sf-ease) infinite; animation-delay: 160ms; }
.sf-loader--onDark > i { background: #FFFFFF; }
.sf-loader--onDark > i:nth-child(2) { background: var(--sf-on-navy); }

/* the middle row slides out and back — the shift changing hands */
@keyframes sf-row-mid {
  0%   { transform: translateX(-30%); opacity: 0.55; }
  35%  { transform: translateX(0);    opacity: 1; }
  65%  { transform: translateX(0);    opacity: 1; }
  100% { transform: translateX(-30%); opacity: 0.55; }
}
@keyframes sf-row-a {
  0%, 100% { transform: scaleX(1);    opacity: 0.45; transform-origin: left center; }
  40%, 60% { transform: scaleX(1.06); opacity: 1;    transform-origin: left center; }
}

/* Small sizes: rows thicken so they survive under 24px */
.sf-loader--sm > i { height: 17.18%; }

/* ── Splash / route loading screen ──────────────────────────────── */
/* <div class="sf-splash" data-state="in">…</div>  set data-state="out" to dismiss */

.sf-splash {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: var(--sf-navy);
  z-index: 9999;
  transition: opacity var(--sf-dur-slow) var(--sf-ease), visibility var(--sf-dur-slow) step-end;
}
.sf-splash[data-state="out"] { opacity: 0; visibility: hidden; pointer-events: none; }
.sf-splash__word {
  font-family: var(--ca-font-sans), system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  animation: sf-rise var(--sf-dur-slow) var(--sf-ease-out) both 80ms;
}
.sf-splash__hint {
  font-family: var(--ca-font-sans), system-ui, sans-serif;
  font-size: 13.5px;
  color: #8B92B8;
  animation: sf-rise var(--sf-dur-slow) var(--sf-ease-out) both 200ms;
}

/* ── Determinate progress (uses the displaced row as the bar) ───── */
.sf-progress { position: relative; height: 4px; border-radius: 999px; background: var(--sf-border); overflow: hidden; }
.sf-progress > span { position: absolute; inset: 0 auto 0 0; width: var(--sf-value, 0%); border-radius: 999px; background: var(--sf-action); transition: width var(--sf-dur-slow) var(--sf-ease); }
.sf-progress--indeterminate > span { width: 42%; animation: sf-sweep 1250ms var(--sf-ease) infinite; }
@keyframes sf-sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }

/* ── Skeletons ─────────────────────────────────────────────────── */
.sf-skeleton { border-radius: 8px; background: linear-gradient(90deg, #EDEDF4 0%, #F6F6FA 40%, #EDEDF4 80%); background-size: 300% 100%; animation: sf-shimmer 1400ms linear infinite; }
@keyframes sf-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ── Entrance / transition utilities ───────────────────────────── */
.sf-rise  { animation: sf-rise var(--sf-dur) var(--sf-ease-out) both; }
.sf-fade  { animation: sf-fade var(--sf-dur) var(--sf-ease) both; }
.sf-shift { animation: sf-shift var(--sf-dur-slow) var(--sf-ease-out) both; }
@keyframes sf-rise  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sf-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes sf-shift { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
/* stagger children: style="--sf-i:2" → 2 × 45ms delay */
.sf-stagger > * { animation: sf-rise var(--sf-dur) var(--sf-ease-out) both; animation-delay: calc(var(--sf-i, 0) * 45ms); }

@media (prefers-reduced-motion: reduce) {
  .sf-loader > i, .sf-progress > span, .sf-skeleton,
  .sf-rise, .sf-fade, .sf-shift, .sf-stagger > *,
  .sf-splash__word, .sf-splash__hint { animation: none !important; transition: none !important; }
  .sf-loader > i { opacity: 1 !important; transform: none !important; }
}