/*
 * Loader. One definition for the boot screen (index.html, painted before JS) and
 * <IgnitionLoader /> (React). Markup: src/ignition/markup.ts. Colours: tokens only.
 *
 * A segmented LED tail light on the rear of a car. The segments are a mask on .ig-bar; the glow
 * sits on the unmasked parent (.ig-light) so the mask does not cut it off. Three layers: dim base, a
 * sequential sweep that whips left to right with a hard ease, and a brake layer that flares the whole
 * bar every third pass. Round it, the car's rear in fine light-lines that trace themselves in; the
 * body squats as each sweep fires (a rev), vapour breathes from the tips, the lamp's red spills onto
 * the bumper, light trails rush past on the road, and the car reflects on the wet tarmac
 * (-webkit-box-reflect: browsers without it simply skip it). Reduced motion: the car drawn, the bar
 * still and two thirds lit, nothing moving.
 */
.ig { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; color: var(--foreground); }
.ig-fill { position: fixed; inset: 0; z-index: 100; background: var(--background); }
.ig-mark { position: relative; width: 320px; height: 160px; display: grid; place-items: center; }

.ig-light {
  position: relative; display: block; width: 100%;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--signal) 75%, transparent)) drop-shadow(0 0 18px color-mix(in srgb, var(--signal) 35%, transparent));
  -webkit-box-reflect: below 10px linear-gradient(transparent 20%, rgba(0, 0, 0, 0.28));
}
.ig-bar {
  position: relative; display: block; height: 9px; overflow: hidden;
  /* the tail-light outline: angled ends, a little thicker at the corners */
  clip-path: polygon(0 55%, 5% 0, 95% 0, 100% 55%, 97% 100%, 3% 100%);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px);
  mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px);
}
.ig-bar > span { position: absolute; inset: 0; }
.ig-base { background: var(--border-strong); opacity: 0.45; }
.ig-sweep {
  /* sequential: 24 segments light one after another and stay lit, the bar holds, then snaps off */
  background: linear-gradient(90deg, color-mix(in srgb, var(--signal) 80%, #000) 0%, var(--signal) 70%, #ff6a5c 100%);
  transform-origin: left center;
  animation: ig-sweep 0.9s linear infinite;
}
.ig-brake { background: var(--signal); opacity: 0; animation: ig-brake 2.7s steps(1, end) infinite; }

/* the car: lines in the foreground colour, faint, so it reads in both themes; the tail light across it */
.ig-car {
  position: absolute; inset: 0; display: block;
  animation: ig-rev 0.9s linear infinite;
  -webkit-box-reflect: below -14px linear-gradient(transparent 58%, rgba(0, 0, 0, 0.2));
}
.ig-car-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ig-line {
  fill: none; stroke: color-mix(in srgb, var(--foreground) 34%, transparent); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: ig-draw 1.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.ig-body { fill: url(#ig-body); stroke: color-mix(in srgb, var(--foreground) 46%, transparent); }
.ig-stop-a { stop-color: color-mix(in srgb, var(--foreground) 7%, transparent); }
.ig-stop-b { stop-color: color-mix(in srgb, var(--foreground) 2%, transparent); }
.ig-glass { fill: color-mix(in srgb, var(--foreground) 9%, transparent); animation-delay: 0.15s; }
.ig-fine { stroke: color-mix(in srgb, var(--foreground) 20%, transparent); stroke-width: 0.9; animation-delay: 0.3s; }
/* the tips: a dark opening in a bright chrome rim */
.ig-tip { fill: rgba(8, 8, 10, 0.72); stroke: color-mix(in srgb, var(--foreground) 70%, transparent); stroke-width: 1.4; animation-delay: 0.45s; }
.ig-tyre { fill: color-mix(in srgb, var(--foreground) 9%, var(--background)); }
.ig-shadow { fill: color-mix(in srgb, var(--foreground) 22%, transparent); filter: blur(3px); }
/* the lamp's red on the bumper below it, flaring with the brakes */
.ig-spill { fill: var(--signal); opacity: 0.1; filter: blur(9px); animation: ig-spill 2.7s steps(1, end) infinite; }
:root:not(.dark) .ig-spill { mix-blend-mode: multiply; }
/* on a light page the glow is a halo, not light: keep it tight */
:root:not(.dark) .ig-car > .ig-light { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--signal) 55%, transparent)); }
.ig-car > .ig-light { position: absolute; left: 26px; width: 268px; top: 63px; -webkit-box-reflect: unset; }

/* vapour from the twin tips, breathing out and rising */
.ig-vapour { position: absolute; top: 104px; width: 36px; height: 10px; }
.ig-vapour-l { left: 54px; }
.ig-vapour-r { left: 230px; }
.ig-vapour i {
  position: absolute; left: 2px; top: 0; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--foreground) 32%, transparent), transparent 68%);
  filter: blur(1.5px); opacity: 0;
  animation: ig-vapour 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.ig-vapour i:nth-child(2) { animation-delay: 0.8s; left: 20px; }
.ig-vapour i:nth-child(3) { left: 11px; }
.ig-vapour i:nth-child(3) { animation-delay: 1.6s; }
.ig-vapour-l i { --dx: -12px; }
.ig-vapour-r i { --dx: 12px; animation-delay: 0.4s; }
.ig-vapour-r i:nth-child(2) { animation-delay: 1.2s; }
.ig-vapour-r i:nth-child(3) { animation-delay: 2s; }

/* light trails: thin streaks of other cars' lamps, rushing past on the road beside it */
.ig-trails { position: absolute; inset: 124px -60px 0; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.ig-trails i {
  position: absolute; left: 0; height: 2px; width: 45%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--signal));
  transform: translateX(260%);
  animation: ig-trail 0.7s cubic-bezier(0.5, 0, 0.9, 0.6) infinite;
}
.ig-trails i:nth-child(1) { top: 4px; animation-delay: 0s; }
.ig-trails i:nth-child(2) { top: 12px; width: 60%; animation-delay: 0.23s; animation-duration: 0.55s; }
.ig-trails i:nth-child(3) { top: 20px; width: 30%; animation-delay: 0.41s; opacity: 0.6; }
.ig-trails i:nth-child(4) { top: 8px; width: 25%; animation-delay: 0.6s; animation-duration: 0.9s; background: linear-gradient(90deg, transparent, var(--muted-foreground)); }
.ig-trails i:nth-child(5) { top: 26px; width: 55%; animation-delay: 0.12s; animation-duration: 0.62s; opacity: 0.45; }
.ig-trails i:nth-child(6) { top: 16px; width: 20%; animation-delay: 0.33s; animation-duration: 0.8s; background: linear-gradient(90deg, transparent, var(--muted-foreground)); }

.ig-label { font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted-foreground); }

/* inline size: just the light */
.ig-sm { gap: 0; }
.ig-sm .ig-mark { width: 40px; height: 12px; }
.ig-sm .ig-light { width: 100%; }
.ig-sm .ig-light { -webkit-box-reflect: unset; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--signal) 70%, transparent)); }
.ig-sm .ig-bar { height: 5px; -webkit-mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 5px); mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 5px); }

@keyframes ig-sweep {
  0% { transform: scaleX(0); opacity: 1; animation-timing-function: steps(24, end); }
  52% { transform: scaleX(1); opacity: 1; }
  78% { transform: scaleX(1); opacity: 1; }
  84%, 100% { transform: scaleX(1); opacity: 0; }
}
/* passes 1 and 2 sweep; pass 3 ends on the brakes: flare, flicker, flare */
@keyframes ig-brake {
  0%, 86% { opacity: 0; }
  88% { opacity: 1; }
  91% { opacity: 0.3; }
  93% { opacity: 1; }
  99% { opacity: 0; }
}
@keyframes ig-trail { from { transform: translateX(260%); } to { transform: translateX(-120%); } }
@keyframes ig-draw { to { stroke-dashoffset: 0; } }
/* each sweep is a rev: the body squats as it fires and settles back */
@keyframes ig-rev {
  0% { transform: translateY(0); }
  5% { transform: translateY(1.2px) scaleY(0.996); }
  18% { transform: translateY(-0.5px); }
  32%, 100% { transform: translateY(0); }
}
@keyframes ig-spill { 0%, 86% { opacity: 0.1; } 88% { opacity: 0.32; } 91% { opacity: 0.16; } 93% { opacity: 0.32; } 99% { opacity: 0.1; } }
@keyframes ig-vapour {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  12% { opacity: 0.8; }
  100% { transform: translate(var(--dx), -26px) scale(2.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ig-sweep { animation: none; transform: scaleX(0.66); }
  .ig-brake { animation: none; }
  .ig-trails, .ig-vapour { display: none; }
  .ig-car, .ig-spill { animation: none; }
  .ig-line { animation: none; stroke-dashoffset: 0; }
}