/* ==========================================================================
   Exile Tools — Foundation
   Fonts, design tokens, themes, reset, typography, motion system.
   Layer order: foundation.css → components.css → pages.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (self-hosted, SIL OFL 1.1 — licences in ../fonts/)
   Orbitron         → display voice, used sparingly: hero headline, tool names, page
                      titles, the league name, small "game" labels. Variable (wght),
                      set at SemiBold 600 — Bold 700 only for the hero headline.
                      Wide, square letterforms with a short cap height (0.72 em):
                      headlines are set ≈ 1.4× the size a grotesk would get, labels
                      never below 12 px. Never for running text, stats, tables, forms
                      or changing figures (its digits are proportional — no tnum).
   Familjen Grotesk → section and component headings (h2–h4), the main navigation,
                      and the readable alternative wherever a display line could get
                      long (user-given build titles, chart values)
   Instrument Sans  → text and UI
   One component speaks with at most two of them: Orbitron for the name,
   Instrument Sans for everything that is read.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/familjen-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/familjen-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/orbitron-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched stand-in while Orbitron loads: a bold sans widened to Orbitron's average advance
   (≈ 0.59 em vs ≈ 0.55 em → 107 %) with its line box (ascent 1011, descent 243 / 1000, scaled by
   size-adjust), so the swap barely shifts the layout. Latin-ext glyphs Orbitron lacks fall through
   to Familjen Grotesk in --font-display. */
@font-face {
  font-family: "Orbitron Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("DejaVu Sans Bold");
  size-adjust: 107%;
  ascent-override: 94.5%;
  descent-override: 22.7%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   Primitive tokens (theme-independent)
   -------------------------------------------------------------------------- */
:root {
  /* Accent: a softer, warmer coral red. Five named anchors; the scale steps between them,
     ordered from light to dark. Use the tone that fits the job, not one red for everything. */
  --coral-highlight: #F2B0B1;  /* light glints, selected text on dark, quiet fills on light */
  --coral-soft: #E7797D;       /* accent text and hover on dark (6.6:1 on --bg) */
  --coral-primary: #D95C65;    /* the accent: active marks, facets, lines, focus on dark */
  --coral-muted: #C74450;      /* primary button on dark (white text 4.8:1), accent on light */
  --coral-deep: #9D3846;       /* accent text + primary button on light (6:1 / 6.8:1) */

  --red-50: #FBF0EF;
  --red-100: #F6DCDB;
  --red-200: var(--coral-highlight);
  --red-300: var(--coral-soft);
  --red-400: var(--coral-primary);
  --red-500: var(--coral-muted);
  --red-600: #B53F4C;
  --red-700: var(--coral-deep);
  --red-800: #7A2D3A;
  --red-900: #4A1E27;

  --gradient-accent-dark: linear-gradient(125deg, #1C191B 12%, #2E1C21 70%, #4A1E27 100%);
  --gradient-accent-light: linear-gradient(125deg, #FFFCF9 10%, #FBF0EF 72%, #F6DCDB 100%);
  --gradient-accent-line: linear-gradient(90deg, #9D3846 0%, #D95C65 55%, #F2B0B1 100%);

  /* Families — exactly three, with system fallbacks */
  --font-display: "Orbitron", "Orbitron Fallback", "Familjen Grotesk", Arial, sans-serif;
  --font-head: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale */
  /* Orbitron sizes: its capitals are 0.72 em tall and its letters wide (≈ 0.68 em per letter in
     "Gemplanner"), so these sit ≈ 1.4× above a grotesk of the same visual weight */
  --fs-display: clamp(40px, 6.2vw, 88px);  /* Orbitron 700: the hero headline (one short word) */
  --fs-tool: clamp(36px, 5vw, 76px);       /* Orbitron 600: a tool name as section headline */
  --fs-title: clamp(26px, 3.2vw, 44px);    /* Orbitron 600: page titles (h1) */
  --fs-label: 12px;                        /* Orbitron 600: small game labels — the floor for this face */
  --fs-nav: 17px;                          /* Familjen Grotesk: main navigation */
  --fs-h2: clamp(28px, 3vw, 42px);
  --fs-h3: clamp(21px, 2vw, 28px);
  --fs-h4: 18px;
  --fs-lead: clamp(17px, 1.5vw, 21px);
  --fs-body: 16px;
  --fs-ui: 15px;
  --fs-ui-sm: 14px;
  --fs-meta: 13px;
  --fs-min: 12px; /* smallest size in use; the hard floor is 11px */

  /* Display voice (Orbitron) — its letters are already wide and evenly spaced: headlines keep
     the font's own spacing, small labels open up a little so the square counters stay apart;
     leading stays tight (its own line box is 1.25 em) */
  --display-weight: 600;
  --display-weight-hero: 700;
  --display-tracking: 0;
  --display-tracking-label: 0.05em;
  --display-leading: 1.15;

  /* Spacing — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --container: 1440px;
  --gutter: clamp(16px, 4vw, 56px);
  --measure: 68ch;
  --header-h: 88px;          /* navigation, floating state (top of the page) */
  --header-h-compact: 60px;  /* navigation, compact state (scrolled) */

  /* Shape */
  --radius: 2px;
  --rule: 1px;

  /* Motion — three families only (see "Motion system" below) */
  --ease-ui: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-drift: cubic-bezier(0.45, 0, 0.55, 1);
  --motion-fast: 160ms;       /* Tactile Response: hover, press */
  --motion-medium: 320ms;     /* Tactile Response: state feedback (reveal, changed row) */
  --motion-transition: 220ms; /* Tactile Response: route + theme change */
  --motion-tactile: 220ms;    /* Tactile Response: artwork reacting to hover */
  --motion-drift: 14s;        /* Atmospheric Drift */
  --motion-trace: 3.6s;       /* Energy Trace, one cycle incl. pause */
  --motion-surface: 180ms;    /* Tactile Response: a row card lifting under the pointer */

  /* Surface system — content is separated by space and by surfaces of slightly different
     brightness, not by hairlines. Three steps sit on --bg: a row card (--surface-row), the
     same card under the pointer (--surface-row-hover), and a quiet panel (--surface). Depth
     comes from very soft, dark shadows (theme tokens below). A row card lifts --lift on hover;
     the gem colour of a row (--gem) may tint it by --gem-tint at most. */
  --radius-surface: 4px;
  --row-gap: 8px;             /* between row cards */
  --row-gap-dense: 4px;       /* between rows of dense data (stats, mods, progression) */
  --lift: -2px;
  --gem-tint: 7%;             /* colour of the gem in a hovered row's surface */
  --gem-glow: 30%;            /* colour of the gem in the light behind its icon */
  --gem-edge-w: 3px;          /* the gem-colour edge on the left of a gem row */
  --gem-edge-rest: 82%;       /* its strength at rest (100% on hover) */
  --gem-edge-glow: 24%;       /* colour of the gem in the light it casts into a hovered row */

  /* Film grain for artwork surfaces (static, no animation) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Theme tokens — dark is the default, light is opt-in
   -------------------------------------------------------------------------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  /* warm anthracite and graphite instead of a cold black; a warm off-white instead of paper white */
  --bg: #131113;
  --surface: #1C191B;
  --surface-raised: #252124;
  --text: #F2ECE6;
  --text-muted: #ADA5A1;              /* 7.8:1 on --bg */
  --border: #3A3437;
  --accent: var(--coral-primary);
  --accent-hover: var(--coral-soft);

  --border-strong: #514A4D;
  --accent-text: var(--coral-soft);   /* accent for small text: 6.6:1 on --bg */
  --accent-surface: #3A1C23;
  --on-accent: #FFFFFF;
  --btn-primary-bg: var(--coral-muted);   /* white label 4.8:1 */
  --btn-primary-hover: var(--red-600);    /* 5.4:1 */
  --btn-primary-active: var(--coral-deep);
  --focus: var(--coral-soft);
  --banner-gradient: var(--gradient-accent-dark);
  --scrim: rgb(0 0 0 / 0.55);

  /* Chrome depth: the navigation has no surface of its own — a soft vertical scrim (top → transparent)
     carries it over the artwork; scrolled, the scrim thickens a little. The footer sinks. */
  /* Surface system (see the primitive tokens): warm graphite, one step and two steps above --bg */
  --surface-row: #1B181A;
  --surface-row-hover: #242022;
  --shadow-color: 0 0 0;              /* rgb triplet: shadows stay dark and warm-neutral */
  --shadow-row: 0 1px 2px rgb(var(--shadow-color) / 0.28), 0 6px 14px -10px rgb(var(--shadow-color) / 0.7);
  --shadow-row-hover: 0 2px 4px rgb(var(--shadow-color) / 0.3), 0 14px 24px -14px rgb(var(--shadow-color) / 0.85);
  /* the same depth for table rows, as filters on the <tr>: one shadow for all its cells */
  --drop-row: drop-shadow(0 1px 1px rgb(var(--shadow-color) / 0.3)) drop-shadow(0 4px 5px rgb(var(--shadow-color) / 0.35));
  --drop-row-hover: drop-shadow(0 2px 2px rgb(var(--shadow-color) / 0.32)) drop-shadow(0 8px 10px rgb(var(--shadow-color) / 0.5));
  --youtube: #E5484A;                 /* YouTube red, a touch softer, so it sits with the coral */
  --youtube-hover: #F26D6B;

  --header-scrim: rgb(14 12 13 / 0.62);
  --header-scrim-compact: rgb(17 15 16 / 0.84);
  --header-menu-bg: #161315;
  --footer-bg: #0F0D0E;

  /* Gem attribute colours — data only, deliberately distinct from the accent */
  --gem-str: #D07457;
  --gem-dex: #74AE6C;
  --gem-int: #6F93D6;
  --gem-none: #ADA5A1;

  --status-success: #74AE6C;
  --status-warning: #D3A64A;
  --status-danger: var(--coral-soft);
  --logo-dark-display: none;
  --logo-light-display: block;

  /* Artwork + material — only used by the art surfaces (art.css) */
  --brass: #B8935A;                 /* hairline light on carved edges, never a fill */
  --brass-text: #CDAE7C;
  --art-void: #0A0B0D;
  --art-stone: #16181B;
  --art-stone-raised: #1F2226;
  --art-line: rgb(240 239 237 / 0.09);
  --art-line-strong: rgb(240 239 237 / 0.2);
  --art-word: rgb(240 239 237 / 0.07);
  --art-light: rgb(209 38 38 / 0.34); /* the one light source behind a crystal */
  --art-shaft: rgb(228 125 125 / 0.16);
  --art-fog: rgb(16 17 19 / 0.92);
  --art-seam: #0E0F11;               /* where the hero floor meets the TraXile table */
  --scrim-max: 88%;                  /* home hero: darkest point of the scrim behind the copy */
  --art-scrim: linear-gradient(90deg, rgb(10 11 13 / 0.92) 0%, rgb(10 11 13 / 0.72) 42%, rgb(10 11 13 / 0.1) 100%);
  --crystal-1: #471414;
  --crystal-2: #6F1919;
  --crystal-3: #921B1B;
  --crystal-4: #D12626;
  --crystal-5: #E47D7D;
  --crystal-edge: rgb(255 230 210 / 0.5);
  --socket-bg: #0C0D0F;
  --socket-hi: #24272C;
  --map-paper: #0D0E10;
  --grain-opacity: 0.16;
  --grain-blend: overlay;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F1EC;
  --surface: #FFFCF9;
  --surface-raised: #ECE6E0;
  --text: #221B1C;
  --text-muted: #5E5557;              /* 6.4:1 on --bg */
  --border: #DAD2CB;
  --accent: var(--coral-muted);
  --accent-hover: var(--coral-deep);

  --border-strong: #ADA39B;
  --accent-text: var(--coral-deep);   /* 6:1 on --bg */
  --accent-surface: var(--red-50);
  --on-accent: #FFFFFF;
  --btn-primary-bg: var(--coral-deep);    /* white label 6.8:1 */
  --btn-primary-hover: var(--red-800);
  --btn-primary-active: #5E2430;
  --focus: var(--coral-deep);
  --banner-gradient: var(--gradient-accent-light);
  --scrim: rgb(25 26 28 / 0.4);

  /* Light: row cards are a touch lighter than the parchment ground; shadows warm brown */
  --surface-row: #FCF9F5;
  --surface-row-hover: #FFFFFF;
  --shadow-color: 70 48 36;
  --shadow-row: 0 1px 2px rgb(var(--shadow-color) / 0.1), 0 6px 14px -10px rgb(var(--shadow-color) / 0.3);
  --shadow-row-hover: 0 2px 4px rgb(var(--shadow-color) / 0.1), 0 14px 24px -14px rgb(var(--shadow-color) / 0.38);
  --drop-row: drop-shadow(0 1px 1px rgb(var(--shadow-color) / 0.1)) drop-shadow(0 4px 5px rgb(var(--shadow-color) / 0.13));
  --drop-row-hover: drop-shadow(0 2px 2px rgb(var(--shadow-color) / 0.1)) drop-shadow(0 8px 10px rgb(var(--shadow-color) / 0.2));
  --youtube: #D3302F;
  --youtube-hover: #E5484A;

  --header-scrim: rgb(246 241 236 / 0.7);
  --header-scrim-compact: rgb(246 241 236 / 0.88);
  --header-menu-bg: #FCF8F4;
  --footer-bg: #ECE5DE;

  --gem-str: #A44A30;
  --gem-dex: #3E7637;
  --gem-int: #3B5EA6;
  --gem-none: #5E5557;

  --status-success: #3E7637;
  --status-warning: #8A6416;
  --status-danger: var(--coral-deep);
  --logo-dark-display: block;
  --logo-light-display: none;

  /* Light: parchment, ink and carved stone instead of darkness */
  --brass: #8A6A35;
  --brass-text: #6E5228;
  --art-void: #E8E1D5;
  --art-stone: #EFEAE2;
  --art-stone-raised: #F8F5F0;
  --art-line: rgb(42 37 34 / 0.11);
  --art-line-strong: rgb(42 37 34 / 0.24);
  --art-word: rgb(42 37 34 / 0.08);
  --art-light: rgb(209 38 38 / 0.2);
  --art-shaft: rgb(183 31 31 / 0.1);
  --art-fog: rgb(245 243 240 / 0.94);
  --art-seam: #E9E3D8;
  --scrim-max: 90%;
  --art-scrim: linear-gradient(90deg, rgb(245 243 240 / 0.95) 0%, rgb(245 243 240 / 0.78) 42%, rgb(245 243 240 / 0.08) 100%);
  --crystal-1: #6F1919;
  --crystal-2: #921B1B;
  --crystal-3: #B71F1F;
  --crystal-4: #D12626;
  --crystal-5: #EFAAAA;
  --crystal-edge: rgb(255 248 240 / 0.75);
  --socket-bg: #241F1C;
  --socket-hi: #4A433D;
  --map-paper: #EAE2D3;
  --grain-opacity: 0.22;
  --grain-blend: multiply;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h-compact) + var(--space-5)); /* the navigation is fixed */
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; }

::selection { background: var(--coral-deep); color: #FFFFFF; }

[hidden] { display: none !important; }
[x-cloak] { display: none !important; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--text);
  text-wrap: balance;
}

/* Display voice: Orbitron. Page titles use it by default; components opt in with .display */
h1,
.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-synthesis: none;
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
}
h1 { font-size: var(--fs-title); line-height: var(--display-leading); }
h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.01em; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }
h5, h6 { font-size: var(--fs-ui); line-height: 1.4; }

p { margin: 0; max-width: var(--measure); }
p + p { margin-top: var(--space-4); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--text);
}

.muted { color: var(--text-muted); }
.meta { font-size: var(--fs-meta); line-height: 1.45; color: var(--text-muted); }
.num { font-variant-numeric: tabular-nums; }

a {
  color: var(--text);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.22em;
  transition: color var(--motion-fast) var(--ease-ui), text-decoration-color var(--motion-fast) var(--ease-ui);
}
a:hover { color: var(--accent-text); text-decoration-color: currentColor; }

strong, b { font-weight: 600; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-raised);
  color: var(--text);
  transform: translateY(-160%);
}
.skip-link:focus-visible { transform: none; }

/* --------------------------------------------------------------------------
   Motion system — exactly three families
   1 Atmospheric Drift  → slow depth movement of artwork layers (art.css), 12–16 s,
                          only while the artwork is on screen and the tab is visible
   2 Energy Trace       → a rare light pulse along a gem link or route (art.css), one
                          short run per --motion-trace cycle, then a pause
   3 Tactile Response   → controls, rows, CTAs, artwork hover (160–260 ms): colour/border
                          change and at most a 1–4 px shift. No bounce. State feedback
                          (.reveal, changed rows, route and theme change) uses the same family.
   -------------------------------------------------------------------------- */

/* Tactile Response — state feedback */
@keyframes quiet-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: quiet-reveal var(--motion-medium) var(--ease-ui) both; }

/* Tactile Response — cross-document route change (progressive enhancement) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--motion-transition);
  animation-timing-function: var(--ease-ui);
}

/* Tactile Response — theme switch: only colours fade, nothing moves */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition:
    background-color var(--motion-transition) var(--ease-ui),
    border-color var(--motion-transition) var(--ease-ui),
    color var(--motion-transition) var(--ease-ui),
    fill var(--motion-transition) var(--ease-ui),
    text-decoration-color var(--motion-transition) var(--ease-ui) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}