/* Motion signatures: progressive enhancements driven by assets/motion-signatures.js.
   Every rule is scoped to an html class that the script only adds when reduced motion is off. */

.motion-layer { position:absolute; top:0; left:0; width:0; height:0; overflow:visible; pointer-events:none; z-index:62; }
.motion-layer svg { position:absolute; top:0; left:0; width:1px; height:1px; overflow:visible; }

/* Prompt opening draws over the page without capturing input or changing layout. */
.motion-opening { position:fixed; inset:0; z-index:100; overflow:hidden; pointer-events:none; }
.motion-opening__surface { position:absolute; inset:0; background:#EFEFF0; }
.motion-opening__line { position:absolute; left:max(20px, calc((100vw - 1220px) / 2 + 28px)); top:50%; transform:translateY(-50%); white-space:nowrap; color:#14130F; font:400 clamp(18px,2.4vw,28px)/1.2 'Array',ui-monospace,monospace; }
.motion-opening__name { display:inline-block; transform-origin:0 0; }
.motion-opening__chevron { color:#0B3FCF; }
.motion-opening__caret { display:inline-block; width:.6em; height:1.1em; vertical-align:-.2em; background:#07BE43; }
@media (prefers-reduced-motion:reduce) { .motion-opening { display:none; } }

/* Gigi routing: the trace replaces the random card pulse. */
html.motion-routing #gigi [data-node], html.motion-routing #gigi [data-node] > span { animation:none !important; }
html.motion-routing #gigi [data-node] { transition:background-color .25s ease; }
html.motion-routing #gigi [data-node] > span[aria-hidden] { opacity:.14; transform:scale(.7); transition:opacity .25s ease, transform .25s ease; }
html.motion-routing #gigi [data-node].motion-hub > span[aria-hidden] { opacity:1; transform:none; }
html.motion-routing #gigi [data-node].is-reached { background:#ECF5EE !important; }
html.motion-routing #gigi [data-node].is-reached > span[aria-hidden] { opacity:1; transform:none; }

/* Client pipeline: a dossier visits each stage instead of a timer lighting them. */
html.motion-pipeline [data-stage], html.motion-pipeline [data-stage] span, html.motion-pipeline [data-stage] p { animation:none !important; }
html.motion-pipeline [data-stage] { transition:border-color .3s ease, background-color .3s ease; }
html.motion-pipeline [data-stage] > div > span:last-child { opacity:.16; transition:opacity .3s ease; }
html.motion-pipeline [data-stage] p { opacity:0; transform:translateY(4px); transition:opacity .35s ease, transform .35s ease; }
html.motion-pipeline [data-stage].is-active { border-color:#07BE43 !important; background:rgba(7,190,67,.09) !important; }
html.motion-pipeline [data-stage].is-active > div > span:last-child { opacity:1; }
html.motion-pipeline [data-stage].is-active p { opacity:1; transform:none; }

/* Terminal headings: the prompt's underscore is a separate mask layer so it can blink. */
html.motion-headings .section-heading-type::before {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' view%42ox='0 0 40 34'%3E%3Cpath d='M3 5L14 15L3 25' fill='none' stroke='black' stroke-width='3.5'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' view%42ox='0 0 40 34'%3E%3Cpath d='M23 29H37' fill='none' stroke='black' stroke-width='3.5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' view%42ox='0 0 40 34'%3E%3Cpath d='M3 5L14 15L3 25' fill='none' stroke='black' stroke-width='3.5'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' view%42ox='0 0 40 34'%3E%3Cpath d='M23 29H37' fill='none' stroke='black' stroke-width='3.5'/%3E%3C/svg%3E");
  -webkit-mask-position:center, center; mask-position:center, center;
  -webkit-mask-repeat:no-repeat, no-repeat; mask-repeat:no-repeat, no-repeat;
  -webkit-mask-size:contain, contain; mask-size:contain, contain;
}
html.motion-headings .section-heading-type.is-typing::before { -webkit-mask-size:contain, 0 0; mask-size:contain, 0 0; }
html.motion-headings .section-heading-type.is-idle::before { animation:motion-prompt-blink 1.3s step-end infinite; }
html.motion-headings .section-heading-type.is-offscreen::before, html[data-page-hidden] .section-heading-type::before { animation-play-state:paused; }
@keyframes motion-prompt-blink {
  0%, 49% { -webkit-mask-size:contain, contain; mask-size:contain, contain; }
  50%, 100% { -webkit-mask-size:contain, 0 0; mask-size:contain, 0 0; }
}
.motion-typing-char:not(.is-typed) { color:transparent; }
.motion-typing-caret { position:relative; display:inline-block; width:0; height:1em; }
.motion-typing-caret::after { content:''; position:absolute; left:.06em; bottom:.04em; width:.42em; height:.08em; background:#0B3FCF; }

/* Background pixel wave: a faint pixel grid behind the content; a cobalt wave crosses it diagonally every 9 s.
   Both layers sit below the content (z-index:-1 inside the isolated section); content stays still on entry. */
html.motion-pixel-wave #background { position:relative; isolation:isolate; }
html.motion-pixel-wave #background::before, html.motion-pixel-wave #background::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background-size:14px 14px; }
html.motion-pixel-wave #background::before { background-image:radial-gradient(rgba(240,240,242,.07) 1px, transparent 1.4px); }
html.motion-pixel-wave #background::after { background-image:radial-gradient(rgba(124,156,255,.55) 1px, transparent 1.6px); -webkit-mask-image:linear-gradient(115deg, transparent 42%, #000 50%, transparent 58%); mask-image:linear-gradient(115deg, transparent 42%, #000 50%, transparent 58%); -webkit-mask-size:300% 300%; mask-size:300% 300%; animation:motion-pixel-wave 9s cubic-bezier(.45,0,.55,1) 1s infinite both; }
html.motion-pixel-wave #background.is-offscreen::after, html[data-page-hidden] #background::after { animation-play-state:paused; }
.motion-pixel-touch { display:none; position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
html.motion-pixel-wave .motion-pixel-touch { display:block; }
.motion-pixel-touch span { position:absolute; left:0; top:0; width:280px; height:280px; opacity:0; background:radial-gradient(rgba(124,156,255,.8) 1px, transparent 1.6px) 0 0 / 14px 14px; -webkit-mask-image:radial-gradient(circle, #000 5%, transparent 70%); mask-image:radial-gradient(circle, #000 5%, transparent 70%); transition:opacity 700ms cubic-bezier(.23,1,.32,1); }
html.motion-pixel-wave .motion-pixel-touch.is-active span { opacity:1; transition-duration:360ms; }
/* The map's solid edge fades would cut a box out of the grid; a mask fades the same edges to transparent instead. */
html.motion-pixel-wave #background .background-map__svg rect[fill^="url(#background-map-fade"] { display:none; }
html.motion-pixel-wave #background .background-map__svg { -webkit-mask-image:linear-gradient(to right, transparent, #000 7%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 8.4%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent, #000 7%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 8.4%); mask-composite:intersect; }
@keyframes motion-pixel-wave { 0% { -webkit-mask-position:100% 100%; mask-position:100% 100%; } 55%, 100% { -webkit-mask-position:0 0; mask-position:0 0; } }
html.motion-pixel-wave #background .is-current::after { content:''; display:inline-block; width:6px; height:6px; margin-left:8px; vertical-align:middle; background:#07BE43; animation:motion-now-pulse 2.4s ease-in-out infinite; }
@keyframes motion-now-pulse { 0%, 100% { box-shadow:0 0 0 0 rgba(7,190,67,.55); } 60% { box-shadow:0 0 0 6px rgba(7,190,67,0); } }

/* Essay instrument: a green signal travels the routes drawn on the cover. */
.motion-route { fill:none; stroke:#07BE43; stroke-linecap:round; opacity:0; }
.motion-flare { fill:none; stroke:#07BE43; opacity:0; transform-box:fill-box; transform-origin:center; }