/*
 * effects.css: site-wide interaction polish. Loaded last in index.html.
 *
 * Underline motion (user, 2026-09-13): text links get a clean line that draws
 * across from the left on hover or keyboard focus and retracts to the right
 * when the pointer leaves. Inline links in running text keep a faint line at
 * rest so they are never identified by colour alone. Buttons, cards, nav pills
 * and demo UI are untouched. Under reduced motion the line appears without
 * travelling (base.css collapses transition durations).
 */

:is(
  .home-link, .site-footer a, .review-link, .tx-link, .txstep-link, .gd-preview, .back-link, .link-btn,
  .fig-row dd a, .home-fact__v--text a, .activity a, .risk a, .mode-banner a,
  .t-lead a, .hint a, .home-dl dd a, .text-link
):not(.btn, .is-demo *) {
  --u-rest: transparent;
  text-decoration: none;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--u-rest), var(--u-rest));
  background-repeat: no-repeat;
  background-size: 0% 1px, 100% 1px;
  background-position: 100% calc(100% - 1px), 0 calc(100% - 1px);
  padding-bottom: 3px;
  transition: background-size 420ms var(--ease-out), color var(--dur-2);
}

/* Links inside running text: faint line at rest. */
:is(.t-lead a, .hint a, .home-dl dd a, .risk a, .mode-banner a, .activity a, .text-link):not(.btn, .is-demo *) {
  --u-rest: color-mix(in srgb, currentColor 32%, transparent);
}
/* Standalone links: a hairline in the band's line colour at rest. */
:is(.home-link, .review-link, .tx-link, .txstep-link, .gd-preview, .back-link, .link-btn, .fig-row dd a, .home-fact__v--text a):not(.btn, .is-demo *) {
  --u-rest: var(--line-strong);
}

:is(
  .home-link, .site-footer a, .review-link, .tx-link, .txstep-link, .gd-preview, .back-link, .link-btn,
  .fig-row dd a, .home-fact__v--text a, .activity a, .risk a, .mode-banner a,
  .t-lead a, .hint a, .home-dl dd a, .text-link
):not(.btn, .is-demo *):is(:hover, :focus-visible) {
  background-size: 100% 1px, 100% 1px;
  background-position: 0 calc(100% - 1px), 0 calc(100% - 1px);
}

/* The site-level control for self-playing animations (WCAG 2.2.2). */
.motion-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-bd); background: var(--glass-bg);
  color: var(--ink-2); font: 500 .8125rem/1 var(--f-body);
  transition: color var(--dur-2), border-color var(--dur-2);
}
.motion-toggle::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; box-sizing: border-box;
}
.motion-toggle[aria-pressed="true"]::before {
  border-right: 0; border-left: 8px solid currentColor;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; width: 0; height: 0;
}
.motion-toggle:hover { color: var(--ink); border-color: var(--line-strong); }