/* ==========================================================================
   World map arc 1.0 — animated world map with route arcs and pins
   --------------------------------------------------------------------------
   Plain CSS. No framework, no build step, no external request.

   The component is a static SVG plus a form. Every control in the demo panel
   is a native radio or checkbox, so the whole thing — themes, map style,
   animation mode, pin style — works with JavaScript switched off. The script
   only adds the eleven-second replay and pinning a card with a click.

   PROPORTIONS
   Two independent scales, on purpose:

   1. The map is an SVG with a viewBox. Its coordinates are the drawing space
      itself and never become em: 993 x 540 user units, longitudes spread over
      960 of them (so 33 units of margin sit on the right), latitudes clamped
      to 85..-60. Every radius below is in those units.

        arc stroke        1
        country outline   0.4
        dot pattern       6 pitch, 1.32 radius
        pin ring          8.2      (stroke 0.5)
        bracket arm       3.876    (stroke 1.2)
        point halo        4.4      (18 % opacity)
        point             2
        hover target      14.2

   2. Everything made of text — the panel and the hover cards — is expressed
      in em of --wma-font-size (9px by default). Change that one value and the
      chrome rescales as a block:

        panel label       1        (the reference unit)
        panel padding     1.5556 em vertical, 3.1111 em horizontal
        panel radius      2.2222 em
        dark toggle       4.8889 x 2.8889 em, knob 2 em, travel 2 em
        segment shell     1 em radius, 0.3333 em padding, 0.2222 em gap
        swatch            2 em, 2.4444 em once selected
        hover card        24.2222 em wide, 1.5556 em radius

   Order of this file:
     1. Design tokens: scale, palette, timing
     2. Themes and light mode
     3. Shell and stage
     4. Map: background, countries, dot pattern
     5. Route arcs
     6. Pins: bracket and glow
     7. Hover cards
     8. Demo panel
     9. Motion: keyframes and the delay ladder
    10. Narrow screens
    11. Fallbacks: reduced motion, forced colours, no backdrop-filter

   Naming follows BEM: .wma, .wma__part, .wma--variant.
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

.wma {
  /* The component owns its box model and assumes no reset. */
  box-sizing: border-box;

  /* --- scale ------------------------------------------------------------ */
  --wma-font-size: 9px;

  /* --- map geometry, in viewBox units ----------------------------------- */
  --wma-line-width: 1;
  --wma-map-stroke-width: 0.4;
  --wma-ring-stroke: 0.5;
  --wma-bracket-stroke: 1.2;

  /* --- timing ------------------------------------------------------------
     One arc takes --wma-speed and the next starts --wma-speed later. Pins
     run slightly ahead of their arc (85 % of the step), and the arrival pin
     trails its departure by --wma-pin-gap. These four values reproduce the
     reference exactly: arcs at 0.5 / 2 / 3.5 / 5 / 6.5 / 8 s, pins at
     0.5 / 0.58, 1.775 / 1.855, 3.05 / 3.13, and so on. */
  --wma-start: 0.5s;
  --wma-speed: 1.5s;
  --wma-pin-step: calc(var(--wma-speed) * 0.85);
  --wma-pin-gap: 0.08s;
  --wma-bracket-step: 0.04s;
  --wma-breathe: 2.8s;
  --wma-appear: 0.4s;
  --wma-point-appear: 0.25s;
  --wma-bracket-in: 0.35s;
  --wma-card-in: 0.16s;
  --wma-arc-ease: ease-in-out;
  --wma-bracket-ease: cubic-bezier(0.2, 0, 0, 1);

  /* --- chrome, dark background ------------------------------------------
     The reference picks these from the luminance of the background, not from
     the light/dark switch: (R*299 + G*587 + B*114) / 1000 > 128. All seven
     dark palettes land below that threshold and all seven light ones above,
     so following the switch gives the same answer for every shipped theme.
     Add .wma--chrome-light to force the other set. */
  --wma-panel-bg: rgba(14, 14, 18, 0.96);
  --wma-panel-border: rgba(255, 255, 255, 0.07);
  --wma-panel-shadow: 0 1.7778em 6.2223em rgba(0, 0, 0, 0.75);
  --wma-label: rgba(255, 255, 255, 0.28);
  --wma-rule: rgba(255, 255, 255, 0.07);
  --wma-segment-bg: rgba(255, 255, 255, 0.07);
  --wma-segment-on: rgba(255, 255, 255, 0.14);
  --wma-text-on: rgba(255, 255, 255, 0.88);
  --wma-text-off: rgba(255, 255, 255, 0.28);
  --wma-switch-on: rgba(255, 255, 255, 0.88);
  --wma-switch-off: rgba(255, 255, 255, 0.12);
  --wma-knob-on: #111;
  --wma-knob-off: rgba(255, 255, 255, 0.32);
  --wma-swatch-ring-on: rgba(255, 255, 255, 0.85);
  --wma-swatch-ring: rgba(255, 255, 255, 0.1);
  --wma-swatch-glow: rgba(255, 255, 255, 0.1);
  --wma-card-bg: rgba(8, 12, 26, 0.94);
  --wma-card-title: #ffffff;
  --wma-card-muted: rgba(255, 255, 255, 0.45);
  --wma-card-rule: rgba(255, 255, 255, 0.08);

  /* --- default theme: onyx ---------------------------------------------- */
  --wma-map-dark: #4b5567;
  --wma-bg-dark: #13141a;
  --wma-map-light: #9aa5bc;
  --wma-bg-light: #f1f5fb;
  --wma-accent: #94a3b8;

  /* Resolved by the light-mode rule below. */
  --wma-map: var(--wma-map-dark);
  --wma-bg: var(--wma-bg-dark);
}

/* ==========================================================================
   2. Themes and light mode
   --------------------------------------------------------------------------
   Two ways in, and they compose. A modifier class sets the theme when the
   component ships without its demo panel; the panel's radios override it,
   and win on specificity because :has() counts as a compound selector.
   ========================================================================== */

.wma--navy,
.wma:has(.wma__theme--navy:checked) {
  --wma-map-dark: #3874ff;
  --wma-bg-dark: #000000;
  --wma-map-light: #6b8fde;
  --wma-bg-light: #eef2ff;
  --wma-accent: #0ea5e9;
}

.wma--midnight,
.wma:has(.wma__theme--midnight:checked) {
  --wma-map-dark: #4060d0;
  --wma-bg-dark: #06091a;
  --wma-map-light: #7b8fcc;
  --wma-bg-light: #eeeffe;
  --wma-accent: #818cf8;
}

.wma--teal,
.wma:has(.wma__theme--teal:checked) {
  --wma-map-dark: #0f7494;
  --wma-bg-dark: #020c12;
  --wma-map-light: #4e97ae;
  --wma-bg-light: #eef8fa;
  --wma-accent: #22d3ee;
}

.wma--forest,
.wma:has(.wma__theme--forest:checked) {
  --wma-map-dark: #2d6a4f;
  --wma-bg-dark: #05100a;
  --wma-map-light: #5a9478;
  --wma-bg-light: #eef7f2;
  --wma-accent: #34d399;
}

.wma--rose,
.wma:has(.wma__theme--rose:checked) {
  --wma-map-dark: #9e1239;
  --wma-bg-dark: #0c0205;
  --wma-map-light: #b86880;
  --wma-bg-light: #fff0f3;
  --wma-accent: #fb7185;
}

.wma--snow,
.wma:has(.wma__theme--snow:checked) {
  --wma-map-dark: #52525b;
  --wma-bg-dark: #18181b;
  --wma-map-light: #c0c7d8;
  --wma-bg-light: #ffffff;
  --wma-accent: #2563eb;
}

.wma--onyx,
.wma:has(.wma__theme--onyx:checked) {
  --wma-map-dark: #4b5567;
  --wma-bg-dark: #13141a;
  --wma-map-light: #9aa5bc;
  --wma-bg-light: #f1f5fb;
  --wma-accent: #94a3b8;
}

/* Light mode: the map swaps colours, and so does the chrome. */
.wma--light,
.wma:has(.wma__switch:not(:checked)) {
  --wma-map: var(--wma-map-light);
  --wma-bg: var(--wma-bg-light);

  --wma-panel-bg: rgba(255, 255, 255, 0.93);
  --wma-panel-border: rgba(0, 0, 0, 0.08);
  --wma-panel-shadow: 0 1.7778em 6.2223em rgba(0, 0, 0, 0.12);
  --wma-label: rgba(0, 0, 0, 0.35);
  --wma-rule: rgba(0, 0, 0, 0.07);
  --wma-segment-bg: rgba(0, 0, 0, 0.06);
  --wma-segment-on: rgba(0, 0, 0, 0.09);
  --wma-text-on: rgba(0, 0, 0, 0.75);
  --wma-text-off: rgba(0, 0, 0, 0.28);
  --wma-switch-on: rgba(0, 0, 0, 0.72);
  --wma-switch-off: rgba(0, 0, 0, 0.1);
  --wma-knob-on: #ffffff;
  --wma-knob-off: rgba(0, 0, 0, 0.22);
  --wma-swatch-ring-on: rgba(0, 0, 0, 0.65);
  --wma-swatch-ring: rgba(0, 0, 0, 0.12);
  --wma-swatch-glow: rgba(0, 0, 0, 0.08);
  --wma-card-bg: rgba(255, 255, 255, 0.96);
  --wma-card-title: #0f172a;
  --wma-card-muted: #64748b;
  --wma-card-rule: #e2e8f0;
}

/* ==========================================================================
   3. Shell and stage
   --------------------------------------------------------------------------
   The reference lets the SVG fill its host and centres the drawing with
   preserveAspectRatio. We give the stage that exact aspect ratio instead, so
   the hover cards can be placed as a percentage of the map rather than
   guessing where the letterboxing put it. Same picture, addressable.
   ========================================================================== */

.wma,
.wma *,
.wma *::before,
.wma *::after {
  box-sizing: border-box;
}

.wma {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--wma-bg);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: background 0.25s ease;
}

.wma__stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 993 / 540;
}

.wma__toile {
  display: block;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   4. Map
   ========================================================================== */

.wma__fond {
  fill: var(--wma-bg);
  transition: fill 0.25s ease;
}

.wma__pays path {
  fill: var(--wma-map);
  stroke: var(--wma-bg);
  stroke-width: var(--wma-map-stroke-width);
  transition: fill 0.25s ease, stroke 0.25s ease;
}

.wma__grain {
  fill: var(--wma-map);
}

/* Dots: the pattern replaces the fill and the outline goes away, because in
   this mode the grain is what draws the coastline. */
.wma--dots .wma__pays path,
.wma:has(.wma__type--dots:checked) .wma__pays path {
  fill: url("#wma-trame");
  stroke: none;
  stroke-width: 0;
}

/* ==========================================================================
   5. Route arcs
   --------------------------------------------------------------------------
   Resting state is the finished state: full length, fully opaque. The draw-in
   is an animation that starts from nothing. If the stylesheet's motion never
   runs — reduced motion, an old engine, JavaScript off — the map still reads.
   ========================================================================== */

.wma__arc {
  fill: none;
  stroke: var(--wma-accent);
  stroke-width: var(--wma-line-width);
  stroke-linecap: round;
  stroke-dasharray: 3000;
  stroke-dashoffset: 0;
  transition: stroke 0.25s ease;
}

/* ==========================================================================
   6. Pins
   ========================================================================== */

.wma__pin {
  cursor: pointer;
}

.wma__anneau {
  fill: none;
  stroke: var(--wma-accent);
  stroke-width: var(--wma-ring-stroke);
  opacity: 0.55;
}

.wma__equerre {
  fill: none;
  stroke: var(--wma-accent);
  stroke-width: var(--wma-bracket-stroke);
  stroke-linecap: square;
  /* The pin group carries the translate, so scaling around the local origin
     is scaling around the pin — no need to repeat coordinates per pin. */
  transform-origin: 0 0;
}

.wma__halo {
  fill: var(--wma-accent);
  fill-opacity: 0.18;
}

.wma__point {
  fill: var(--wma-accent);
}

.wma__lueur {
  fill: var(--wma-accent);
  display: none;
}

.wma__lueur--large {
  fill-opacity: 0.07;
  opacity: 0.55;
}

.wma__lueur--moyenne {
  fill-opacity: 0.14;
}

.wma__lueur--serree {
  fill-opacity: 0.3;
}

.wma__zone {
  fill: transparent;
}

/* Glow style: rings and brackets out, three stacked halos in. */
.wma--glow .wma__anneau,
.wma--glow .wma__equerre,
.wma--glow .wma__halo,
.wma:has(.wma__pinstyle--glow:checked) .wma__anneau,
.wma:has(.wma__pinstyle--glow:checked) .wma__equerre,
.wma:has(.wma__pinstyle--glow:checked) .wma__halo {
  display: none;
}

.wma--glow .wma__lueur,
.wma:has(.wma__pinstyle--glow:checked) .wma__lueur {
  display: block;
}

.wma__pin:focus {
  outline: none;
}

.wma__pin:focus-visible .wma__zone {
  fill: none;
  stroke: var(--wma-accent);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

/* ==========================================================================
   7. Hover cards
   --------------------------------------------------------------------------
   One card per route, placed over its departure pin as a percentage of the
   stage. The reference computes the same position in JavaScript on every
   mouse move; the pins never move, so the arithmetic can live in CSS.
   ========================================================================== */

.wma__info {
  position: absolute;
  z-index: 100;
  width: 24.2223em;
  margin: 0;
  padding: 1.5556em 1.7778em;
  border: 0.1111em solid color-mix(in srgb, var(--wma-accent) 25%, transparent);
  border-radius: 1.5556em;
  background: var(--wma-card-bg);
  box-shadow: 0 1.3334em 4.4445em rgba(0, 0, 0, 0.45),
    0 0 0 0.1111em color-mix(in srgb, var(--wma-accent) 9.4%, transparent);
  backdrop-filter: blur(2.6667em);
  -webkit-backdrop-filter: blur(2.6667em);
  font-size: var(--wma-font-size);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;

  /* Centred on its pin, then held 0.8889 em inside both edges of the stage —
     the same clamp the reference applies in script. */
  left: clamp(
    0.8889em,
    calc(var(--wma-x) - 12.1112em),
    calc(100% - 24.2223em - 0.8889em)
  );
  top: calc(var(--wma-y) + 0.8889em);
}

/* Where each card sits: the departure pin of its route, as a share of the
   993 x 540 stage. Straight from the projection, not eyeballed. */
.wma__info--1 { --wma-x: 28.466%; --wma-y: 30.552%; } /* New York  */
.wma__info--2 { --wma-x: 48.956%; --wma-y: 24.897%; } /* Paris     */
.wma__info--3 { --wma-x: 35.824%; --wma-y: 74.827%; } /* São Paulo */
.wma__info--4 { --wma-x: 85.854%; --wma-y: 34.000%; } /* Tokyo     */
.wma__info--5 { --wma-x: 21.725%; --wma-y: 45.241%; } /* Mexico    */
.wma__info--6 { --wma-x: 76.214%; --wma-y: 57.724%; } /* Singapour */

/* São Paulo sits low enough that its card would hang off the bottom, so that
   one flips above the pin — the reference tests cy + 130px against the host
   height and reaches the same conclusion for this pin. */
.wma__info--3 {
  top: auto;
  bottom: calc(100% - var(--wma-y) + 0.8889em);
}

.wma:has(.wma__pin--1:hover) .wma__info--1,
.wma:has(.wma__pin--1:focus-visible) .wma__info--1,
.wma:has(.wma__pin--2:hover) .wma__info--2,
.wma:has(.wma__pin--2:focus-visible) .wma__info--2,
.wma:has(.wma__pin--3:hover) .wma__info--3,
.wma:has(.wma__pin--3:focus-visible) .wma__info--3,
.wma:has(.wma__pin--4:hover) .wma__info--4,
.wma:has(.wma__pin--4:focus-visible) .wma__info--4,
.wma:has(.wma__pin--5:hover) .wma__info--5,
.wma:has(.wma__pin--5:focus-visible) .wma__info--5,
.wma:has(.wma__pin--6:hover) .wma__info--6,
.wma:has(.wma__pin--6:focus-visible) .wma__info--6,
.wma__info[data-wma-epingle] {
  opacity: 1;
  visibility: visible;
  animation: wma-card-in var(--wma-card-in) ease;
}

.wma__trajet {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6667em;
  align-items: center;
  margin: 0 0 1.1112em;
}

.wma__ville {
  padding: 0.2em 0.8em;
  border-radius: 0.5em;
  background: color-mix(in srgb, var(--wma-accent) 12.5%, transparent);
  color: var(--wma-accent);
  font-size: 1.1112em;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.wma__fleche {
  color: var(--wma-card-muted);
  font-size: 1.1112em;
}

.wma__titre {
  margin: 0 0 0.6667em;
  color: var(--wma-card-title);
  font-size: 1.4445em;
  font-weight: 700;
  line-height: 1.3;
}

.wma__valeur {
  margin: 0 0 0.2223em;
  color: var(--wma-accent);
  font-size: 2.4445em;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.wma__detail {
  margin: 0.7273em 0 0;
  padding-top: 0.7273em;
  border-top: 0.091em solid var(--wma-card-rule);
  color: var(--wma-card-muted);
  font-size: 1.2223em;
}

/* ==========================================================================
   8. Demo panel
   --------------------------------------------------------------------------
   Native controls throughout: one checkbox and four radio groups. The visible
   pills are <label>s, so a click, a tap, Space and the arrow keys all work
   without a line of script.
   ========================================================================== */

.wma__panel {
  position: absolute;
  top: 1.7778em;
  left: 50%;
  z-index: 200;
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  max-width: calc(100% - 2.6667em);
  border: 0.1111em solid var(--wma-panel-border);
  border-radius: 2.2223em;
  background: var(--wma-panel-bg);
  box-shadow: var(--wma-panel-shadow);
  backdrop-filter: blur(3.5556em);
  -webkit-backdrop-filter: blur(3.5556em);
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-size: var(--wma-font-size);
  transform: translateX(-50%);
}

.wma__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1112em;
  min-width: 0;
  margin: 0;
  padding: 1.5556em 3.1112em;
  border: 0;
}

.wma__legend {
  color: var(--wma-label);
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
}

.wma__rule {
  flex-shrink: 0;
  width: 0.1111em;
  margin: 1.3334em 0;
  background: var(--wma-rule);
}

/* The inputs stay in the layout so they can hold focus: display:none would
   make them unreachable by keyboard and invisible to the accessibility tree.
   .wma__sr does the same for text that only screen readers need — the name of
   a colour swatch, or what the "[ ]" and "◉" glyphs actually mean. */
.wma__field,
.wma__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --- dark toggle -------------------------------------------------------- */

.wma__switch-face {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 4.8889em;
  height: 2.8889em;
  padding: 0 0.4445em;
  border-radius: 1.4445em;
  background: var(--wma-switch-off);
  cursor: pointer;
  transition: background 0.25s;
}

.wma__knob {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: var(--wma-knob-off);
  transition: transform 0.25s, background 0.25s;
  transform: translateX(0);
}

.wma__switch:checked + .wma__switch-face {
  background: var(--wma-switch-on);
}

.wma__switch:checked + .wma__switch-face .wma__knob {
  background: var(--wma-knob-on);
  transform: translateX(2em);
}

.wma__switch:focus-visible + .wma__switch-face {
  outline: 0.2223em solid var(--wma-accent);
  outline-offset: 0.2223em;
}

/* --- segmented groups --------------------------------------------------- */

.wma__segments {
  display: flex;
  gap: 0.2223em;
  padding: 0.3334em;
  border-radius: 1em;
  background: var(--wma-segment-bg);
}

.wma__segment {
  padding: 0.4445em 1.3334em;
  border-radius: 0.6667em;
  background: transparent;
  color: var(--wma-text-off);
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3333;
  /* The reference lets "[ ]" break across two lines, which drags the whole
     panel 17 px taller. Holding it on one line keeps the height the same on
     every system font. */
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.wma__segment--anim {
  padding: 0.4445em 1.1112em;
  letter-spacing: 0.08em;
}

.wma__segment--pin {
  padding: 0.3637em 0.9091em;
  border-radius: 0.5455em;
  font-size: 1.2223em;
  letter-spacing: 0.04em;
}

.wma__radio:checked + .wma__segment {
  background: var(--wma-segment-on);
  color: var(--wma-text-on);
}

.wma__radio:focus-visible + .wma__segment {
  outline: 0.2223em solid var(--wma-accent);
  outline-offset: 0.1111em;
}

/* --- theme swatches ----------------------------------------------------- */

.wma__swatches {
  display: flex;
  gap: 0.8889em;
  align-items: center;
}

.wma__swatch {
  display: block;
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  border: 0.2223em solid var(--wma-swatch-ring);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.18s;
}

.wma__theme:checked + .wma__swatch {
  width: 2.4445em;
  height: 2.4445em;
  border-color: var(--wma-swatch-ring-on);
  box-shadow: 0 0 0 0.3334em var(--wma-swatch-glow);
}

.wma__theme:focus-visible + .wma__swatch {
  outline: 0.2223em solid var(--wma-accent);
  outline-offset: 0.2223em;
}

/* Each swatch shows its own theme in the mode currently selected, which is
   why the light values are repeated here rather than derived. */
.wma__swatch--navy { background: #3874ff; }
.wma__swatch--midnight { background: #4060d0; }
.wma__swatch--teal { background: #0f7494; }
.wma__swatch--forest { background: #2d6a4f; }
.wma__swatch--rose { background: #9e1239; }
.wma__swatch--snow { background: #52525b; }
.wma__swatch--onyx { background: #4b5567; }

.wma:has(.wma__switch:not(:checked)) .wma__swatch--navy { background: #6b8fde; }
.wma:has(.wma__switch:not(:checked)) .wma__swatch--midnight { background: #7b8fcc; }
.wma:has(.wma__switch:not(:checked)) .wma__swatch--teal { background: #4e97ae; }
.wma:has(.wma__switch:not(:checked)) .wma__swatch--forest { background: #5a9478; }
.wma:has(.wma__switch:not(:checked)) .wma__swatch--rose { background: #b86880; }
.wma:has(.wma__switch:not(:checked)) .wma__swatch--snow { background: #c0c7d8; }
.wma:has(.wma__switch:not(:checked)) .wma__swatch--onyx { background: #9aa5bc; }

/* ==========================================================================
   9. Motion
   --------------------------------------------------------------------------
   Nothing animates until [data-wma-anime] is on the root. It is written in
   the HTML, so the entrance plays once with the script switched off; the
   script removes and restores it to replay the cycle every eleven seconds.
   ========================================================================== */

@keyframes wma-arc {
  0% { stroke-dashoffset: 3000; opacity: 0; }
  8% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes wma-appear {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes wma-bracket-in {
  from { opacity: 0; transform: scale(1.3); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes wma-glow-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wma-breathe {
  0% { opacity: 0.55; }
  50% { opacity: 0.12; }
  100% { opacity: 0.55; }
}

@keyframes wma-card-in {
  from { opacity: 0; transform: translateY(0.5556em); }
  to { opacity: 1; transform: translateY(0); }
}

.wma[data-wma-anime] .wma__arc {
  animation: wma-arc var(--wma-speed) var(--wma-arc-ease) var(--wma-delay) 1 both;
}

.wma[data-wma-anime] .wma__anneau {
  animation: wma-breathe var(--wma-breathe) ease-in-out var(--wma-delay) infinite;
}

.wma[data-wma-anime] .wma__lueur--large {
  animation: wma-glow-in 0.6s ease var(--wma-delay) 1 both,
    wma-breathe var(--wma-breathe) ease-in-out
      calc(var(--wma-delay) + 0.6s) infinite;
}

.wma[data-wma-anime] .wma__lueur--moyenne {
  animation: wma-glow-in 0.4s ease var(--wma-delay) 1 both;
}

.wma[data-wma-anime] .wma__lueur--serree {
  animation: wma-glow-in 0.3s ease var(--wma-delay) 1 both;
}

.wma[data-wma-anime] .wma__halo {
  animation: wma-appear var(--wma-appear) ease var(--wma-delay) 1 both;
}

.wma[data-wma-anime] .wma__point {
  animation: wma-appear var(--wma-point-appear) ease var(--wma-delay) 1 both;
}

.wma[data-wma-anime] .wma__equerre {
  animation: wma-bracket-in var(--wma-bracket-in) var(--wma-bracket-ease)
    var(--wma-delay) 1 both;
}

/* --- the delay ladder ---------------------------------------------------
   Arcs step by --wma-speed. Pins step by 85 % of that, and the arrival pin
   of each route trails its departure by --wma-pin-gap. The four brackets of
   one pin follow each other by --wma-bracket-step. */

.wma__routes > path:nth-of-type(1) { --wma-delay: var(--wma-start); }
.wma__routes > path:nth-of-type(2) { --wma-delay: calc(var(--wma-start) + 1 * var(--wma-speed)); }
.wma__routes > path:nth-of-type(3) { --wma-delay: calc(var(--wma-start) + 2 * var(--wma-speed)); }
.wma__routes > path:nth-of-type(4) { --wma-delay: calc(var(--wma-start) + 3 * var(--wma-speed)); }
.wma__routes > path:nth-of-type(5) { --wma-delay: calc(var(--wma-start) + 4 * var(--wma-speed)); }
.wma__routes > path:nth-of-type(6) { --wma-delay: calc(var(--wma-start) + 5 * var(--wma-speed)); }

.wma__routes > g:nth-of-type(1) { --wma-delay: var(--wma-start); }
.wma__routes > g:nth-of-type(2) { --wma-delay: calc(var(--wma-start) + var(--wma-pin-gap)); }
.wma__routes > g:nth-of-type(3) { --wma-delay: calc(var(--wma-start) + 1 * var(--wma-pin-step)); }
.wma__routes > g:nth-of-type(4) { --wma-delay: calc(var(--wma-start) + 1 * var(--wma-pin-step) + var(--wma-pin-gap)); }
.wma__routes > g:nth-of-type(5) { --wma-delay: calc(var(--wma-start) + 2 * var(--wma-pin-step)); }
.wma__routes > g:nth-of-type(6) { --wma-delay: calc(var(--wma-start) + 2 * var(--wma-pin-step) + var(--wma-pin-gap)); }
.wma__routes > g:nth-of-type(7) { --wma-delay: calc(var(--wma-start) + 3 * var(--wma-pin-step)); }
.wma__routes > g:nth-of-type(8) { --wma-delay: calc(var(--wma-start) + 3 * var(--wma-pin-step) + var(--wma-pin-gap)); }
.wma__routes > g:nth-of-type(9) { --wma-delay: calc(var(--wma-start) + 4 * var(--wma-pin-step)); }
.wma__routes > g:nth-of-type(10) { --wma-delay: calc(var(--wma-start) + 4 * var(--wma-pin-step) + var(--wma-pin-gap)); }
.wma__routes > g:nth-of-type(11) { --wma-delay: calc(var(--wma-start) + 5 * var(--wma-pin-step)); }
.wma__routes > g:nth-of-type(12) { --wma-delay: calc(var(--wma-start) + 5 * var(--wma-pin-step) + var(--wma-pin-gap)); }

.wma__pin .wma__equerre:nth-of-type(2) { --wma-delay: calc(var(--wma-pin-delay) + 1 * var(--wma-bracket-step)); }
.wma__pin .wma__equerre:nth-of-type(3) { --wma-delay: calc(var(--wma-pin-delay) + 2 * var(--wma-bracket-step)); }
.wma__pin .wma__equerre:nth-of-type(4) { --wma-delay: calc(var(--wma-pin-delay) + 3 * var(--wma-bracket-step)); }

/* Each pin republishes its own delay under a second name, so a bracket can
   offset from it without overwriting the value it inherits. */
.wma__routes > g:nth-of-type(1) { --wma-pin-delay: var(--wma-start); }
.wma__routes > g:nth-of-type(2) { --wma-pin-delay: calc(var(--wma-start) + var(--wma-pin-gap)); }
.wma__routes > g:nth-of-type(3) { --wma-pin-delay: calc(var(--wma-start) + 1 * var(--wma-pin-step)); }
.wma__routes > g:nth-of-type(4) { --wma-pin-delay: calc(var(--wma-start) + 1 * var(--wma-pin-step) + var(--wma-pin-gap)); }
.wma__routes > g:nth-of-type(5) { --wma-pin-delay: calc(var(--wma-start) + 2 * var(--wma-pin-step)); }
.wma__routes > g:nth-of-type(6) { --wma-pin-delay: calc(var(--wma-start) + 2 * var(--wma-pin-step) + var(--wma-pin-gap)); }
.wma__routes > g:nth-of-type(7) { --wma-pin-delay: calc(var(--wma-start) + 3 * var(--wma-pin-step)); }
.wma__routes > g:nth-of-type(8) { --wma-pin-delay: calc(var(--wma-start) + 3 * var(--wma-pin-step) + var(--wma-pin-gap)); }
.wma__routes > g:nth-of-type(9) { --wma-pin-delay: calc(var(--wma-start) + 4 * var(--wma-pin-step)); }
.wma__routes > g:nth-of-type(10) { --wma-pin-delay: calc(var(--wma-start) + 4 * var(--wma-pin-step) + var(--wma-pin-gap)); }
.wma__routes > g:nth-of-type(11) { --wma-pin-delay: calc(var(--wma-start) + 5 * var(--wma-pin-step)); }
.wma__routes > g:nth-of-type(12) { --wma-pin-delay: calc(var(--wma-start) + 5 * var(--wma-pin-step) + var(--wma-pin-gap)); }

/* "All at once": every ladder collapses onto the start delay. */
.wma--atonce .wma__routes > path,
.wma--atonce .wma__routes > g,
.wma--atonce .wma__pin .wma__equerre,
.wma:has(.wma__anim--all:checked) .wma__routes > path,
.wma:has(.wma__anim--all:checked) .wma__routes > g,
.wma:has(.wma__anim--all:checked) .wma__pin .wma__equerre {
  --wma-delay: var(--wma-start);
  --wma-pin-delay: var(--wma-start);
}

/* ==========================================================================
   10. Narrow screens
   --------------------------------------------------------------------------
   The panel wraps onto two rows, the rules disappear, and the sections share
   the width evenly. Same behaviour as the reference.
   ========================================================================== */

@media (max-width: 600px) {
  .wma__panel {
    flex-wrap: wrap;
  }

  .wma__rule {
    display: none;
  }

  .wma__section {
    /* The reference writes calc(50% - 1px) here. Those two subtracted pixels
       leave the row 0.016 px short of the panel, which rounds up into a
       scrollWidth one pixel wider than clientWidth — an overflow that is not
       there but that any honest measurement reports. Plain 50 % fills the row
       exactly and reads zero. */
    flex: 1 1 50%;
    padding: 1.3334em 1.7778em;
  }

  .wma__section:nth-child(n + 5) {
    border-top: 0.1111em solid var(--wma-rule);
  }

  .wma__info {
    width: min(24.2223em, calc(100% - 1.7778em));
  }
}

@media (max-width: 340px) {
  .wma__section {
    flex: 1 1 100%;
    border-top: 0.1111em solid var(--wma-rule);
  }

  .wma__section:first-child {
    border-top: none;
  }
}

/* ==========================================================================
   11. Fallbacks
   ========================================================================== */

/* A delay is motion spread over time, so it goes to zero as well. */
@media (prefers-reduced-motion: reduce) {
  .wma[data-wma-anime] .wma__arc,
  .wma[data-wma-anime] .wma__anneau,
  .wma[data-wma-anime] .wma__lueur,
  .wma[data-wma-anime] .wma__lueur--large,
  .wma[data-wma-anime] .wma__lueur--moyenne,
  .wma[data-wma-anime] .wma__lueur--serree,
  .wma[data-wma-anime] .wma__halo,
  .wma[data-wma-anime] .wma__point,
  .wma[data-wma-anime] .wma__equerre {
    animation: none;
  }

  .wma,
  .wma__fond,
  .wma__pays path,
  .wma__arc,
  .wma__switch-face,
  .wma__knob,
  .wma__segment,
  .wma__swatch,
  .wma__info {
    transition: none;
    animation: none;
  }
}

/* Windows high-contrast: colours are taken over by the system, so the map has
   to keep reading through shape alone. */
@media (forced-colors: active) {
  .wma__pays path {
    fill: CanvasText;
    stroke: Canvas;
  }

  .wma__arc,
  .wma__anneau,
  .wma__equerre {
    stroke: LinkText;
  }

  .wma__point,
  .wma__halo,
  .wma__lueur {
    fill: LinkText;
  }

  .wma__panel,
  .wma__info {
    border-color: CanvasText;
    background: Canvas;
    forced-color-adjust: none;
    background-color: Canvas;
  }

  .wma__radio:checked + .wma__segment,
  .wma__theme:checked + .wma__swatch {
    outline: 0.2223em solid Highlight;
  }
}

/* No backdrop-filter (Firefox before 103, older WebKit): the veil would let
   the map show straight through, so the panel becomes opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wma__panel {
    background: color-mix(in srgb, var(--wma-panel-bg) 100%, #000 6%);
  }

  .wma__info {
    background: var(--wma-card-bg);
  }
}

/* No :has() (Firefox before 121): the controls stop driving the map, so the
   panel would be a lie. It is hidden and the component keeps its defaults. */
@supports not selector(:has(*)) {
  .wma__panel {
    display: none;
  }
}