/*
 * IncidentKit loader · Rev A · 2026-10-05
 * The record builds while you wait: the blocks fill in order, Report first, then go back the other way.
 * The dot lifts and lands again, and the next record starts. It never spins.
 *
 * Two forms, same parts:
 *   .ik-ldr    the mark, upright. 24 px tall at least. Pages, panels, the first load.
 *   .ik-meter  a dot and four blocks in a line. 8 to 12 px tall. Buttons, rows, anything inline.
 *
 * Indeterminate by default. For a known amount, add data-mode="det" and set --p from 0 to 1.
 * Colours: blocks use currentColor, the dot uses --ik-dot. On fir, set color to mist and --ik-dot to peach.
 * Markup: see the identity book, sheet 08, or public/brand/motion/ik-loader.svg.
 */

@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.ik-ldr,
.ik-meter {
  --ik-dot: #b04a26;
  --ik-faint: 0.16;
  color: #141b16;
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
}
.ik-ldr {
  height: 48px;
  width: auto;
  aspect-ratio: 22 / 77;
}
.ik-meter {
  height: 10px;
  width: auto;
  aspect-ratio: 113 / 10;
}
.ik-ldr .d,
.ik-meter .d {
  fill: var(--ik-dot);
  transform-box: fill-box;
  animation: ik-ldr-dot 2s infinite;
}
.ik-ldr .b,
.ik-meter .b {
  fill: currentColor;
  opacity: var(--ik-faint);
  animation: 2s linear infinite;
}
.ik-ldr .b:nth-of-type(1),
.ik-meter .b:nth-of-type(1) {
  animation-name: ik-ldr-1;
}
.ik-ldr .b:nth-of-type(2),
.ik-meter .b:nth-of-type(2) {
  animation-name: ik-ldr-2;
}
.ik-ldr .b:nth-of-type(3),
.ik-meter .b:nth-of-type(3) {
  animation-name: ik-ldr-3;
}
.ik-ldr .b:nth-of-type(4),
.ik-meter .b:nth-of-type(4) {
  animation-name: ik-ldr-4;
}

/* Fill top to bottom, 160 ms apart. Hold. Back in bottom to top. Then the dot lifts and lands. */
@keyframes ik-ldr-1 {
  0%, 8% { opacity: var(--ik-faint); }
  14%, 77% { opacity: 1; }
  83%, 100% { opacity: var(--ik-faint); }
}
@keyframes ik-ldr-2 {
  0%, 16% { opacity: var(--ik-faint); }
  22%, 73% { opacity: 1; }
  79%, 100% { opacity: var(--ik-faint); }
}
@keyframes ik-ldr-3 {
  0%, 24% { opacity: var(--ik-faint); }
  30%, 69% { opacity: 1; }
  75%, 100% { opacity: var(--ik-faint); }
}
@keyframes ik-ldr-4 {
  0%, 32% { opacity: var(--ik-faint); }
  38%, 65% { opacity: 1; }
  71%, 100% { opacity: var(--ik-faint); }
}
@keyframes ik-ldr-dot {
  0% { transform: translateY(-18%); animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
  10%, 86% { transform: translateY(0); animation-timing-function: cubic-bezier(0.65, 0, 0.25, 1); }
  100% { transform: translateY(-18%); }
}

/* Determinate: each block is a quarter of the work and fills left to right. --p runs 0 to 1. */
.ik-ldr[data-mode="det"],
.ik-meter[data-mode="det"] {
  --b1: clamp(0, calc(var(--p) * 4), 1);
  --b2: clamp(0, calc(var(--p) * 4 - 1), 1);
  --b3: clamp(0, calc(var(--p) * 4 - 2), 1);
  --b4: clamp(0, calc(var(--p) * 4 - 3), 1);
  transition: --p 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-mode="det"] .d,
[data-mode="det"] .b {
  animation: none;
}
[data-mode="det"] .f {
  fill: currentColor;
}
[data-mode="det"] .f:nth-of-type(1) { clip-path: inset(0 calc((1 - var(--b1)) * 100%) 0 0); }
[data-mode="det"] .f:nth-of-type(2) { clip-path: inset(0 calc((1 - var(--b2)) * 100%) 0 0); }
[data-mode="det"] .f:nth-of-type(3) { clip-path: inset(0 calc((1 - var(--b3)) * 100%) 0 0); }
[data-mode="det"] .f:nth-of-type(4) { clip-path: inset(0 calc((1 - var(--b4)) * 100%) 0 0); }
.ik-ldr:not([data-mode="det"]) .f,
.ik-meter:not([data-mode="det"]) .f {
  display: none;
}

/* A stage meter is not a loader: it shows where a record is. data-stage="2" fills Report and Investigate. */
.ik-meter[data-stage] .d,
.ik-meter[data-stage] .b {
  animation: none;
}
.ik-meter[data-stage="1"] .b:nth-of-type(-n + 1),
.ik-meter[data-stage="2"] .b:nth-of-type(-n + 2),
.ik-meter[data-stage="3"] .b:nth-of-type(-n + 3),
.ik-meter[data-stage="4"] .b:nth-of-type(-n + 4) {
  opacity: 1;
}

/* Reduced motion: nothing moves. The indeterminate loader holds still and the words beside it say Loading. */
@media (prefers-reduced-motion: reduce) {
  .ik-ldr .d,
  .ik-ldr .b,
  .ik-meter .d,
  .ik-meter .b {
    animation: none;
  }
  .ik-ldr[data-mode="det"],
  .ik-meter[data-mode="det"] {
    transition: none;
  }
}