/* Motion for tryakrida.com (2026-10-30, trimmed 2026-10-31): one-shot drawings round the hero painting.
   Construction lines are ruled first in walnut, the gold goes over them, and the construction stays behind as a faint
   ghost. html.motion is set by the script in <head> unless the visitor prefers reduced motion, and motion.js adds
   html.motion-ready. Every rule that hides something waits for html.motion, so without JS or with reduced motion
   the page is complete and still. Nothing here loops, and nothing covers or delays the headline, the buttons or the
   product. */
:root {
  --pen: cubic-bezier(.45, .05, .25, 1);
  --sketch: #4b3622;
}

/* The locust in the nav is set dot by dot as the page opens (motion.js): hidden until then, and .is-set hands it back. */
html.motion .brand__lockup .mk-dots circle { opacity: 0; }
html.motion .brand__lockup.is-set .mk-dots circle { opacity: 1; }
.brand__lockup .mk-dots circle { transform-box: fill-box; transform-origin: center; }

/* Ink layers that motion.js adds over the page's own art. */
.ink { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ink path, .ink circle, .ink line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ink__gold { stroke: var(--gold); stroke-width: 1; stroke-linecap: butt !important; }
.ink__con { stroke: var(--sketch); stroke-width: .8; }
.ink__dot { fill: var(--sketch) !important; stroke: none; }
.ink-con { opacity: .4; }

/* The hero's arch: motion.js draws the gold line itself (same place as .arch::after) and keeps its drawing behind the
   painting. The painting opens in full colour; only its frame is drawn. */
.arch.has-ink { isolation: isolate; }
.arch.has-ink::after { display: none; }
.arch > .ink { z-index: -1; }

/* The hero frieze's signal: a short bright dash that runs along the gilt key once (motion.js). */
.frieze__glint { fill: none; stroke: #f6e3a6; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }

/* The hero's magnifying glass catches the light once: a soft glare crosses the painted lens. */
.lens { position: absolute; left: 34.5%; top: 51.2%; width: 12.3%; height: 15.8%; border-radius: 50%; transform: rotate(9deg); overflow: hidden; pointer-events: none; }
.lens::before { content: ""; position: absolute; inset: -30% -60%; background: linear-gradient(100deg, transparent 38%, rgb(255 252 240 / .55) 47%, rgb(255 252 240 / .14) 53%, transparent 60%); opacity: 0; }
.lens.is-glinting::before { animation: lens-glint 1500ms cubic-bezier(.45, .05, .3, 1) both; }
@keyframes lens-glint { 0% { transform: translateX(-75%); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(75%); opacity: 0; } }

/* The gold thread (motion.js): one gilt line traced down the page as you read, on wide screens only. It sits behind
   the page (z-index -1): under all of its content, so anything opaque in its way covers it, but over the paper,
   because the body's background is painted on the canvas (give html a background of its own and the line goes under
   the body's). Its route keeps it to the margins and the gaps between sections. */
main { position: relative; }
.thread { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; }
.thread__line { fill: none; stroke: var(--gold); stroke-width: 1.1; stroke-linejoin: round; }
.thread__tip { fill: var(--gold); opacity: 0; }
/* Below its cut the thread is drawn on a sticky layer that sticks with How it works' .wrap while the section is pinned,
   so the two hold still together. It slides down a box (the lane) as long as the pin's track, which clips it: with
   overflow: clip, never hidden, which would stop the layer sticking. */
.thread-lane { position: absolute; left: 0; width: 100%; overflow: clip; clip-path: inset(0); pointer-events: none; z-index: -1; }
.thread-layer { position: sticky; }
.thread-layer > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }

/* The printer's mark under the demo heading (index.html): Kavin's locust in ink, at the foot of the heading's column.
   Wide screens only: below 1024 px the panel stacks and it would push the form down. motion.js punches its dots in
   the first time it shows; until then, with motion, they are held at scale 0. */
.demo__mark { display: block; width: clamp(112px, 8.9vw, 136px); height: auto; aspect-ratio: 936.38 / 1000; margin-top: clamp(30px, 2.8vw, 42px); overflow: visible; }
.demo__mark circle { transform-box: fill-box; transform-origin: center; }
html.motion .demo__mark:not(.is-set) circle { transform: scale(0); }
@media (max-width: 1023px) { .demo__mark { display: none; } }
@media print { .demo__mark circle { transform: none !important; } }

/* FAQ: answers open and close smoothly where the browser can animate details (others just open). The text itself is
   never faded in or held back. */
html.motion .faq details { interpolate-size: allow-keywords; }
html.motion .faq details::details-content { height: 0; overflow: clip; transition: height 280ms var(--pen), content-visibility 280ms allow-discrete; }
html.motion .faq details[open]::details-content { height: auto; }

html.motion.motion-ready { --motion: 1; }