/*
 * AskDimitri motion: the five directions the owner approved from the motion prototype on
 * 27 September 2026 (docs/CHANGES-2026-10.md, "Motion"). Linked from every page that loads
 * /js/motion.js.
 *
 * Start states are hidden only under html.motion, which /js/motion-boot.js adds in <head>
 * when the visitor has not asked for reduced motion. If /js/motion.js never runs, a safety
 * net shows everything after 2.5 s. Only transform, opacity and SVG stroke-dashoffset move.
 * With prefers-reduced-motion: reduce every direction shows its end state, still.
 */

:root {
  --gleam: #fffaf0;
  --settle: cubic-bezier(.2, .7, .3, 1);
}

/* ---------------------------------------------------------------- A. The living Δ */

/* First page of a visit: the glyph and the name wait for the drawing (3 s at most). */
.motion-intro .wordmark .delta { animation: dm-hold 3s; }
.motion-intro .wordmark .delta + * { animation: dm-hide 3s; }
@keyframes dm-hold { from, to { color: transparent; } }
@keyframes dm-hide { from, to { opacity: 0; } }
/* The SVG lies over the glyph, which keeps its place (no layout shift) but is not painted. */
.dm-live { color: transparent !important; animation: none !important; }
.dm-live + * { animation: none !important; }
.dm-draw { display: inline-block; overflow: visible; pointer-events: none; }
.dm-fill { fill: var(--gold); }
.dm-line { fill: none; stroke: var(--gold); stroke-linejoin: round; opacity: 0; }
.dm-gleam { transform: skewX(-18deg); }
.dm-g0 { stop-color: var(--gleam); stop-opacity: 0; }
.dm-g1 { stop-color: var(--gleam); stop-opacity: .9; }

/* The same mark while the assistant or a tool is working: a short stroke laps the edge. */
.dm-think { display: inline-block; flex: 0 0 auto; overflow: visible; }
.dm-think .dm-fill { opacity: .22; }
.dm-think .dm-lap {
  fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 65.7 262.6; animation: dm-lap 1.6s linear infinite;
}
@keyframes dm-lap { to { stroke-dashoffset: -328.3; } }
/* When the work is over it comes to rest where it is (the heading beside it keeps its place):
   the lap stops and fades, the fill goes solid. */
.dm-think.dm-rest .dm-lap { animation: dm-lap 1.6s linear infinite paused, dm-out .4s ease-out forwards; }
.dm-think.dm-rest .dm-fill { opacity: 1; animation: dm-solid .5s ease-out; }
@keyframes dm-out { to { opacity: 0; } }
@keyframes dm-solid { from { opacity: .22; } }
h2 .dm-think { width: .95em; height: auto; margin-right: .45em; vertical-align: -.08em; }
.thinking .dm-think { width: 22px; height: auto; margin-right: 8px; vertical-align: -5px; }
/* The first words of an answer arrive with a small settle. */
.answer-in { animation: answer-in .7s var(--settle) both; }
@keyframes answer-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------------------------------------------------------------- B. The pulse line */

/* Decorative only: hidden from assistive technology, never over text, never clickable. */
.pl { display: block; overflow: visible; pointer-events: none; }
.pl-path { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pl-tip { fill: var(--gold); }
.pl-halo { fill: var(--gold); opacity: .2; }
.pl:not(.pl-on) circle { opacity: 0; }
.pulse-hero { height: 48px; margin: -12px 0 24px; }
.pl-hero { width: 100%; height: 100%; }
/* Long pages: down the left margin, clear of the text column, at 900 px and wider. */
.pl-thread { position: absolute; top: 0; left: -64px; width: 40px; height: 100%; }
@media (max-width: 899.98px) { .pl-thread { display: none; } }

/* ---------------------------------------------------------------- C. Editorial reveals */

.motion [data-reveal]:not(.rv-in) { opacity: 0; animation: rv-safe 0s 2.5s forwards; }
.motion-live [data-reveal]:not(.rv-in) { animation: none; }
@keyframes rv-safe { to { opacity: 1; } }
/* A headline's pen stroke draws after the headline has risen. */
.motion-live h1.stroke[data-reveal]:not(.rv-in)::after { animation: none; transform: scaleX(0); }
.motion-live .issue-head h1.rv-in::after { transform-origin: left; animation: stroke .9s .7s var(--settle) both; }
.rv-mask { display: block; clip-path: inset(0 -.5em); }
.rv-mask.rv-open { clip-path: none; }
.rv-line { display: block; }
[data-count] { font-variant-numeric: tabular-nums; }
.rv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The tools hub's cards arrive after the page has read the member's allowances. */
.motion .tool-cards > li { animation: rv-rise .9s var(--settle) both; }
.motion .tool-cards > li:nth-child(2) { animation-delay: .11s; }
.motion .tool-cards > li:nth-child(3) { animation-delay: .22s; }
.motion .tool-cards > li:nth-child(n+4) { animation-delay: .33s; }
@keyframes rv-rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------------------------------------------------------------- D. Page transitions */

/* Cross-document view transitions, with the header Δ held still as a shared element. Old page
   out in 0.3 s, new page in over 0.5 s, overlapping by 0.15 s. Browsers without support load
   the page as before; with reduced motion there is no transition at all. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.wordmark .delta { view-transition-name: delta; }
::view-transition-old(root) { animation: vt-out .3s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .52s cubic-bezier(.2, .7, .3, 1) .15s both; }
::view-transition-group(delta) { animation-duration: .52s; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
::view-transition-old(delta) { animation: none; opacity: 0; }
::view-transition-new(delta) { animation: none; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- Reduced motion and print */

@media (prefers-reduced-motion: reduce) {
  .dm-think .dm-lap, .dm-think .dm-fill, .answer-in, .motion .tool-cards > li { animation: none !important; }
  .dm-think.dm-rest .dm-lap { display: none; }
  [data-reveal], [data-reveal]::after { opacity: 1 !important; animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media print {
  [data-reveal] { opacity: 1 !important; }
  .pl-thread, .pulse-hero, .dm-think { display: none !important; }
}