/* About · the Vox animation (about-vox.js): a pinned stage, a collage world the camera moves over,
   pieces pasted on stop-motion style, the colectivo driving the route */
.vx { position: relative; height: 340vh; background: #1d1d1b; }
.vx-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.vx-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; container-type: inline-size; }
.vx-p { will-change: transform, opacity; position: absolute; margin: 0; height: auto; max-width: none; rotate: var(--r); opacity: 0;
  filter: drop-shadow(0 2px 2px rgba(30, 24, 18, 0.28)) drop-shadow(0 12px 18px rgba(30, 24, 18, 0.22)); }
.vx-t { font: 400 6cqw/0.84 var(--hero); text-transform: uppercase; letter-spacing: -0.045em; color: #111;
  filter: drop-shadow(0 0 2px rgba(243, 239, 231, 0.9)) drop-shadow(0 4px 0 rgba(243, 239, 231, 0.95)); }
.vx-t--bw { font-size: 6cqw; color: var(--orange); }
.vx-km { width: 13%; }
.vx-km > img { display: block; width: 100%; height: auto; }
.vx-route { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 7; overflow: visible; pointer-events: none; }
.vx-route #vx-path { fill: none; stroke: #fff; stroke-width: 40; stroke-linecap: round; }
/* the route: a dotted line in ink, revealed behind the colectivo as it drives (the mask's path grows with it) */
.vx-route .vx-dots { fill: none; stroke: #1d1d1b; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0 22; vector-effect: non-scaling-stroke; }
.vx-bus { position: absolute; width: 7%; height: auto; z-index: 8; opacity: 0; translate: -50% -78%;
  filter: drop-shadow(0 10px 14px rgba(30, 24, 18, 0.35)); }
/* the film's title sits top centre: the logo sticker (left) and MENU (right) float over the corners for the whole film */
.vx-k { position: absolute; left: 50%; top: 5%; transform: translateX(-50%); white-space: nowrap; z-index: 20; color: #111; }
.vx-hint { position: absolute; left: 50%; bottom: 4%; translate: -50% 0; z-index: 20; font: 600 11px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: #111; opacity: 0.6; transition: opacity 0.4s; }
.vx.is-moving .vx-hint { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .vx { height: auto; } .vx-stage { position: relative; } .vx-p, .vx-bus { opacity: 1; } }
/* on an upright screen (about-vox.js sets is-up) the map's bottom edge is the screen's, and the mate hangs
   2% of the map below it: up a hair there (1.4% of the map's width is 2.5% of its height), so all of it
   shows as it's pasted. A wide screen keeps it where it is. */
.vx.is-up [data-role="mate"] { margin-top: -1.4%; }

/* the countries' names, four ways to compare (the draft bar's Names switch); the stamps are the pick,
   so they also show with no switch at all (no data-ttl on the page) */
.vx-name { width: 26%; }
.vx-ttl { display: none; width: 100%; height: auto; }
.vx-ttl--tape { position: relative; width: 82%; } .vx-ttl--tape img { display: block; width: 100%; height: auto; }
.vx-ttl--print { font: 400 6cqw/0.84 var(--hero); text-transform: uppercase; letter-spacing: -0.045em; color: #111; }
html:not([data-ttl]) .vx-ttl--stamp, html[data-ttl="stamp"] .vx-ttl--stamp, html[data-ttl="ransom"] .vx-ttl--ransom { display: block; }
html[data-ttl="tape"] .vx-ttl--tape { display: block; }
html[data-ttl="none"] .vx-name { display: none; }
html:not([data-ttl]) .vx-name, html[data-ttl="stamp"] .vx-name { mix-blend-mode: multiply; filter: none; width: 22%; }
.switch button[data-ttl].is-on { background: var(--orange); border-color: var(--orange); color: #111; }

/* the film's picture credits, right under it (the list is in the legal notice): quiet, in the small
   capitals of the kickers and the footer's labels, in the footer's muted ink */
.vx-credit { margin-block: 14px 0; text-align: right; font: 600 11px/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.vx-credit a { display: inline-block; padding: 6px 0; color: rgba(244, 241, 234, 0.6); text-decoration: none; transition: color 0.2s ease; }
.vx-credit a:hover, .vx-credit a:focus-visible { color: #f4f1ea; text-decoration: underline; text-underline-offset: 3px; }
.vx-credit a:focus-visible { outline: 2px dashed var(--orange); outline-offset: 3px; }