/*
  Folds of Honor flag loaders — three variants, one size knob.

  Size:  set --foh-loader-size (any CSS length) on .foh-loader, or pass the
         `size` prop in React. Everything inside is SVG or a percentage, so
         it scales cleanly from 24px to full-page.
  Color: reads the design tokens when tokens.css is loaded; the fallbacks
         after each comma are the same token values, so this file also works
         on its own.
*/

.foh-loader {
  --foh-loader-size: 96px;
  --foh-loader-accent: var(--foh-brand-flag-blue, #2B57A8);
  --foh-loader-accent-2: var(--foh-sky, #0494CA);
  --foh-loader-track: var(--foh-brand-flag-wash, #EEF3FB);
  --foh-loader-star: var(--foh-brand-flag-blue, #2B57A8);
  --foh-loader-label: var(--foh-ink-soft, #4E4E58);

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--foh-loader-size) * 0.12);
  line-height: 1;
}

/* On navy surfaces: white stars, like the flag itself. */
.foh-loader--on-navy {
  --foh-loader-accent: #FFFFFF;
  --foh-loader-accent-2: var(--foh-sky, #0494CA);
  --foh-loader-track: rgba(255, 255, 255, 0.12);
  --foh-loader-star: #FFFFFF;
  --foh-loader-label: var(--foh-ink-on-navy, #A9B4C6);
}

.foh-loader__stage {
  position: relative;
  width: var(--foh-loader-size);
  aspect-ratio: 1;
}
.foh-loader--fold .foh-loader__stage { aspect-ratio: 100 / 60; }

.foh-loader__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.foh-loader__flag {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60%;
  height: auto;
  /* -58% sits the triangle's optical centre, not its box, on the ring's centre */
  transform: translate(-50%, -58%);
  pointer-events: none;
  user-select: none;
}
.foh-loader--fold .foh-loader__flag {
  width: 58%;
  top: 26.4%;
  transform: translateX(-50%);
}

.foh-loader__label {
  font-family: var(--foh-font-body, Inter, system-ui, sans-serif);
  font-size: clamp(12px, calc(var(--foh-loader-size) * 0.11), 16px);
  font-weight: 500;
  color: var(--foh-loader-label);
}

.foh-loader__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── 1 · Orbit: one arc sweeping and stretching around the flag ───────── */

.foh-loader__track {
  fill: none;
  stroke: var(--foh-loader-track);
  stroke-width: 4;
}
.foh-loader__arc {
  fill: none;
  stroke: var(--foh-loader-accent);
  stroke-width: 4;
  stroke-linecap: round;
  animation: foh-orbit-dash 1.6s ease-in-out infinite;
}
.foh-loader__arc--trail {
  stroke: var(--foh-loader-accent-2);
  stroke-width: 2;
  opacity: 0.9;
  animation-delay: -0.35s;
}
.foh-loader--orbit .foh-loader__svg {
  animation: foh-spin 2.2s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes foh-orbit-dash {
  0%   { stroke-dasharray: 1 200; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 55 200; stroke-dashoffset: -18; }
  100% { stroke-dasharray: 55 200; stroke-dashoffset: -99; }
}

/* ── 2 · Stars: the flag's stars circling it, lit one after another ───── */

.foh-loader--stars .foh-loader__svg {
  animation: foh-spin 7.2s linear infinite;
  transform-origin: 50% 50%;
}
.foh-loader__star {
  fill: var(--foh-loader-star);
  transform-box: fill-box;
  transform-origin: center;
  animation: foh-star-chase 1.2s ease-in-out infinite;
  opacity: 0.18;
}
.foh-loader__star:nth-child(1) { animation-delay: -1.0s; }
.foh-loader__star:nth-child(2) { animation-delay: -0.8s; }
.foh-loader__star:nth-child(3) { animation-delay: -0.6s; }
.foh-loader__star:nth-child(4) { animation-delay: -0.4s; }
.foh-loader__star:nth-child(5) { animation-delay: -0.2s; }
.foh-loader__star:nth-child(6) { animation-delay: 0s; }

@keyframes foh-star-chase {
  0%, 100% { opacity: 0.18; transform: scale(0.7); }
  20%      { opacity: 1;    transform: scale(1.15); }
  55%      { opacity: 0.35; transform: scale(0.85); }
}

/* ── 3 · Fold: two light runners tracing the folded-flag triangle ─────── */

.foh-loader__tri-track {
  fill: none;
  stroke: var(--foh-loader-track);
  stroke-width: 2.4;
  stroke-linejoin: round;
}
.foh-loader__tri-run {
  fill: none;
  stroke: var(--foh-loader-accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 18 82;
  animation: foh-trace 1.8s linear infinite;
}
.foh-loader__tri-run--2 {
  stroke: var(--foh-loader-accent-2);
  animation-delay: -0.9s;
}

@keyframes foh-trace {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -100; }
}

/* ── Shared ───────────────────────────────────────────────────────────── */

@keyframes foh-spin { to { transform: rotate(360deg); } }

@keyframes foh-breathe {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* Reduced motion: nothing travels; the ring gently breathes instead. */
@media (prefers-reduced-motion: reduce) {
  .foh-loader__svg,
  .foh-loader__arc,
  .foh-loader__star,
  .foh-loader__tri-run { animation: none; }

  .foh-loader__arc { stroke-dasharray: 70 200; }
  .foh-loader__arc--trail { display: none; }
  .foh-loader__star { opacity: 1; transform: none; }
  .foh-loader__tri-run { stroke-dasharray: none; }
  .foh-loader__tri-run--2 { display: none; }

  .foh-loader__svg { animation: foh-breathe 2.4s ease-in-out infinite; }
}