/* Scroll motion for marqup.app (added by tools/build_site.py; the canvas pages stay static).
   Everything here is inert unless motion.js put .motion on <html>, which it skips when the
   visitor asked for reduced motion. */

body { position: relative; }
/* the page column clips with overflow: hidden, which would cut
   the full-width hero picture off at the column edge; clip sideways at the page instead */
html.motion, .motion body { overflow-x: clip; }
.motion body > div:not(.sta) { overflow: visible !important; }
body > div { position: relative; z-index: 1; }

/* one station line down the right margin, drawn as you scroll */
.sta { position: absolute; top: 0; right: max(24px, calc((100vw - 1440px) / 2 - 64px)); width: 1px; pointer-events: none; z-index: 0; }
.sta-rule { position: absolute; inset: 0; background: #0B0B0B; opacity: .5; transform-origin: top; transform: scaleY(0); }
.sta-tick { position: absolute; right: -6px; width: 13px; height: 1px; background: rgba(11, 11, 11, .55); opacity: 0; transition: opacity .5s ease; }
.sta-tick.major { right: -10px; width: 21px; }
.sta-tick span { position: absolute; right: 18px; top: -7px; font: 500 10px/1 "SF Mono", ui-monospace, Menlo, monospace; letter-spacing: .04em; color: #5A5A58; white-space: nowrap; }
.sta-tick.major span { right: 26px; color: #0B0B0B; }
.sta-tick.on { opacity: 1; }
.sta-head { position: absolute; top: 0; left: -4px; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: #0B0B0B; }
.sta-head span { position: absolute; right: 16px; top: -2px; font: 600 11px/1 "SF Mono", ui-monospace, Menlo, monospace; color: #0B0B0B; background: #F4F4F3; padding: 2px 4px; white-space: nowrap; }
/* the labels need the margin beside the 1440 column; narrower than that they would sit on the
   page, so only the ticks and the line stay */
@media (max-width: 1570px) { .sta-tick span, .sta-head span { display: none; } }
@media (max-width: 900px) { .sta { right: 6px; } }

/* things that ease in as they reach the screen */
.motion .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .75, .2, 1); }
.motion .rv.in { opacity: 1; transform: none; }

/* headings: letters rise into place */
.motion .split .w { display: inline-block; white-space: nowrap; }
.motion .split .lt { display: inline-block; opacity: 0; transform: translateY(.55em) rotate(3deg); transition: opacity .6s ease, transform .9s cubic-bezier(.2, .75, .2, 1); }
.motion .split.in .lt { opacity: 1; transform: none; }

/* Advanced cards: line icons that act out the feature on hover, or as the card crosses the
   middle of the screen (motion.js adds .ic-on). The drawn markup is the finished state. */
.motion .ic * { transition: transform .8s cubic-bezier(.2, .75, .2, 1), opacity .5s ease, stroke-dashoffset 1s ease; transform-box: fill-box; transform-origin: center; }
.motion .ic .ic-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.motion .ic .ic-pop rect, .motion .ic .ic-sel rect { opacity: 0; }
.motion .ic [data-a="scale"] { transform: translateX(-24px); }
.motion .ic [data-a="cmpA"] { transform: translate(-5px, -3px); }
.motion .ic [data-a="cmpB"] { transform: translate(5px, 3px); }
.motion .ic [data-a="lay1"] { transform: translateY(-6px); }
.motion .ic [data-a="lay3"] { transform: translateY(6px); }
.motion .ic [data-a="mag"] { transform: translate(-12px, -7px); }
.motion .ic [data-a="al1"] { transform: translateX(7px); }
.motion .ic [data-a="al2"] { transform: translateX(14px); }
.motion .ic [data-a="al3"] { transform: translateX(3px); }
.motion .ic [data-a="rot"] { transform: rotate(0deg); }
.motion .ic [data-a="shackle"] { transform: translateY(-6px); }
.motion .ic [data-a="knob"] { transform: translateX(-14px); }
.motion .ic [data-a="send"] { transform: translateX(-10px); opacity: .35; }
.motion .ic [data-a="zoom"] { transform: translate(-10px, 8px) scale(.55); }
.motion :is(.card:hover, .card.ic-on, .ind:hover, .ind.ic-on) .ic .ic-mv { transform: none; opacity: 1; }
.motion :is(.card:hover, .card.ic-on, .ind:hover, .ind.ic-on) .ic [data-a="rot"] { transform: rotate(-20deg); }
.motion :is(.card:hover, .card.ic-on, .ind:hover, .ind.ic-on) .ic .ic-draw { stroke-dashoffset: 0; }
.motion :is(.card:hover, .card.ic-on, .ind:hover, .ind.ic-on) .ic :is(.ic-pop, .ic-sel) rect { opacity: 1; }
.motion .ic :is(.ic-pop, .ic-sel) rect:nth-child(2) { transition-delay: .15s; }
.motion .ic :is(.ic-pop, .ic-sel) rect:nth-child(3) { transition-delay: .3s; }
.motion .ic .ic-pop rect:nth-child(4) { transition-delay: .45s; }

/* tool pictures: an SVG layer in the picture's own pixels acts the tool out (motion.js) */
.tf { position: relative; }
.tf-svg { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); pointer-events: none; overflow: hidden; }

/* station under each headline, and the go-to-station box (click any station number) */
.sta-at { display: block; margin: 10px 0 0; padding: 0; border: 0; background: none; cursor: pointer; font: 400 10px/1 "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: .08em; color: #6F6F6C; text-align: left; }
.sta-at:hover, .sta-at:focus-visible { color: #0B0B0B; }
.sta-tick span, .sta-head span { pointer-events: auto; cursor: pointer; }
.sta-go { position: fixed; z-index: 20; right: max(16px, calc((100vw - 1440px) / 2 + 16px)); bottom: 24px; background: #0B0B0B; color: #F4F4F3; padding: 12px 14px; font: 500 11px/1 "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .4); }
.sta-go[hidden] { display: none; }
.sta-go input { width: 84px; margin-left: 8px; border: 0; border-bottom: 1px solid #F4F4F3; background: none; color: #F4F4F3; font: inherit; letter-spacing: .04em; outline: none; }