/* AIHT motion layer v1 (2026-10-18). Shared by every template. See MOTION.md.
   Rules key off data-* attributes only, so they never fight inline styles or layout.
   Content is fully visible without JS: hidden entrance states apply only under html.aiht-m,
   which aiht-motion.js adds, and only to elements that start below the fold. */
:root{
  --m-fast:180ms;          /* hover / focus / colour */
  --m-open:200ms;          /* menus, accordions, dialogs */
  --m-enter:380ms;         /* scroll entrances */
  --m-draw:450ms;          /* chart bars */
  --m-stagger:40ms;        /* per item, capped at 6 items by JS */
  --m-ease:cubic-bezier(.2,.7,.2,1);   /* ease-out, no overshoot */
  --m-lift:-2px;           /* cards */
  --m-lift-sm:-2px;        /* badges */
  --m-rise:8px;           /* entrance offset (max 12px) */
  --m-shadow:0 6px 14px -10px rgba(22,25,29,.32);
  --m-ink:#16191D; --m-accent:#0B5CAD;
}

/* 1. Links + buttons: colour / border only, never layout */
a,button,select,input,textarea{transition:color var(--m-fast) var(--m-ease),background-color var(--m-fast) var(--m-ease),border-color var(--m-fast) var(--m-ease),box-shadow var(--m-fast) var(--m-ease),text-decoration-color var(--m-fast) var(--m-ease)}
[data-arrow]{display:inline-block;transition:transform var(--m-fast) var(--m-ease)}
@media (hover:hover){
  a:hover [data-arrow="r"],button:hover [data-arrow="r"],[data-motion~="card"]:hover [data-arrow="r"]{transform:translateX(3px)}
  a:hover [data-arrow="ne"],[data-motion~="card"]:hover [data-arrow="ne"]{transform:translate(2px,-2px)}
  a:hover [data-arrow="d"]{transform:translateY(2px)}
}
a:focus-visible [data-arrow="r"]{transform:translateX(3px)}
a:focus-visible [data-arrow="ne"]{transform:translate(2px,-2px)}

/* 2. Cards: the whole card moves as one object */
[data-motion~="card"]{transition:transform var(--m-fast) var(--m-ease),box-shadow var(--m-fast) var(--m-ease),border-color var(--m-fast) var(--m-ease),background-color var(--m-fast) var(--m-ease)}
@media (hover:hover){[data-motion~="card"]:hover{transform:translateY(var(--m-lift));box-shadow:var(--m-shadow);border-color:var(--m-ink)!important}}
[data-motion~="card"]:focus-visible{transform:translateY(var(--m-lift));box-shadow:var(--m-shadow)}
[data-motion~="card"]:active{transform:translateY(-1px);transition-duration:80ms}

/* 3. Paper / document illustrations: top sheet lifts, a second sheet fans out behind */
[data-motion~="paper"]{position:relative;display:block;isolation:isolate}
[data-motion~="paper"]::before{content:"";position:absolute;inset:0;z-index:-1;background:#F2F4F6;border:1px solid #C9CDD3;transform:none;transition:transform var(--m-fast) var(--m-ease)}
[data-motion~="paper"]>*{position:relative;transition:transform var(--m-fast) var(--m-ease),box-shadow var(--m-fast) var(--m-ease)}
@media (hover:hover){
  [data-motion~="paper"]:hover::before{transform:translate(-5px,5px) rotate(-.8deg)}
  [data-motion~="paper"]:hover>*{transform:translateY(-3px) rotate(.35deg);box-shadow:0 12px 24px -16px rgba(22,25,29,.5)}
}

/* 4. Badges: slight lift + border emphasis. Name and score never transform independently. */
[data-motion~="badge"]{transition:transform var(--m-fast) var(--m-ease),box-shadow var(--m-fast) var(--m-ease)}
@media (hover:hover){[data-motion~="badge"]:hover{transform:translateY(var(--m-lift-sm));box-shadow:0 0 0 1px var(--m-ink),var(--m-shadow)}}
[data-motion~="badge"]:focus-within{box-shadow:0 0 0 1px var(--m-ink),var(--m-shadow)}

/* 5. Data: highlight the hovered / focused row only. Other rows are never dimmed (contrast + comparison). */
[data-row]{transition:background-color var(--m-fast) var(--m-ease),box-shadow var(--m-fast) var(--m-ease)}
@media (hover:hover){[data-rows] [data-row]:hover{background-color:#EEF3F8;box-shadow:inset 3px 0 0 #0B5CAD}}
[data-rows] [data-row]:focus-within{background-color:#EEF3F8;box-shadow:inset 3px 0 0 #0B5CAD}
[data-bar]{transition:transform var(--m-draw) var(--m-ease);transition-delay:calc(var(--i,0) * 60ms)}
[data-bar="x"]{transform-origin:left center}
[data-bar="y"]{transform-origin:center bottom}
html.aiht-m [data-bar="x"]:not([data-in]){transform:scaleX(0)}
html.aiht-m [data-bar="y"]:not([data-in]){transform:scaleY(0)}

/* 6. Entrances: once, short, small. Article prose is never tagged. */
[data-reveal]{transition:opacity var(--m-enter) var(--m-ease),transform var(--m-enter) var(--m-ease);transition-delay:calc(var(--i,0) * var(--m-stagger))}
html.aiht-m [data-reveal]:not([data-in]){opacity:0;transform:translateY(var(--m-rise))}

/* 7. Menus, accordions, dialogs: short open transition on mount */
@keyframes aiht-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes aiht-fade{from{opacity:0}to{opacity:1}}
button[aria-expanded="true"]+*{animation:aiht-open var(--m-open) var(--m-ease)}
[data-enter]{animation:aiht-open var(--m-open) var(--m-ease)}
[data-enter="fade"]{animation:aiht-fade var(--m-open) var(--m-ease)}

details>summary::-webkit-details-marker{display:none}
details[open]>summary [aria-hidden]{transform:rotate(45deg)}
details>summary [aria-hidden]{display:inline-block;transition:transform var(--m-fast) var(--m-ease)}
details[open]>summary+*{animation:aiht-open var(--m-open) var(--m-ease)}

/* 8. Sticky outline: active section */
nav[data-spy] a[aria-current="location"]{color:var(--m-accent)!important;box-shadow:inset 0 -2px 0 var(--m-accent)}
nav[data-spy="v"] a[aria-current="location"]{box-shadow:inset 2px 0 0 var(--m-accent)}

/* Reduced motion: no entrances, stagger, draws or decorative movement. Interaction states stay (colour, border, shadow). */
@media (prefers-reduced-motion:reduce){
  html.aiht-m [data-reveal]:not([data-in]),html.aiht-m [data-bar]:not([data-in]){opacity:1;transform:none}
  [data-reveal],[data-bar],[data-arrow]{transition:none!important}
  [data-motion~="card"]:hover,[data-motion~="card"]:focus-visible,[data-motion~="badge"]:hover,[data-motion~="paper"]:hover>*,[data-motion~="paper"]:hover::before,a:hover [data-arrow],a:focus-visible [data-arrow],[data-motion~="card"]:hover [data-arrow]{transform:none!important}
  button[aria-expanded="true"]+*,[data-enter]{animation:none}
  html{scroll-behavior:auto}
}
@media print{[data-reveal],[data-bar]{opacity:1!important;transform:none!important}}

/* WCAG 2.5.8 target size: every standalone link or control is at least 24px tall. Running-text links are exempt. */
@media (max-width: 1023px) {
  a:not(p a):not(li a):not(td a):not(th a):not(nav[aria-label="Breadcrumb"] a):not(figcaption a),
  button, summary, select, input[type="checkbox"] + span { min-height: 24px; }
  a:not(p a):not(td a):not(th a):not(figcaption a) { padding-block: 3px; }
} /* aiht-target */