/* ==================================================================
   Liquid: motion finish and signposting, layered over site.css.
   Remove this file's <link>, the loader block at the top of <body>, and the liquid.js import, and the page is as it was.
   ================================================================== */

/* ------------------------------------------------------------------ the opening curtain */
.ld { display: none; }
html.loading { overflow: hidden; }
html.loading .ld { display: block; position: fixed; inset: 0; z-index: 100; }
.ld-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld-bg .fill { fill: #0a0a0b; }
.ld-bg .edge { fill: none; stroke: #3a78ff; stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 10px rgba(58,120,255,.95)); }
.ld-mid { position: absolute; left: 50%; top: 50%; width: min(260px, 52vw); transform: translate(-50%, -50%); transition: opacity .35s, transform .9s cubic-bezier(.16, 1, .3, 1); }
.ld-mid svg { display: block; width: 100%; height: auto; overflow: visible; }
.ld-track { fill: none; stroke: rgba(238,233,223,.12); stroke-width: 1.4; }
.ld-path { fill: none; stroke: #eee9df; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ld-dot { fill: #3a78ff; filter: drop-shadow(0 0 6px rgba(58,120,255,.95)); }
.ld-n { position: absolute; left: var(--gut); bottom: 24px; display: flex; height: 1em; overflow: hidden; font: 600 clamp(48px, 6.4vw, 92px)/1 var(--sans); font-stretch: 68%; letter-spacing: -.03em; color: #eee9df; font-variant-numeric: tabular-nums; transition: opacity .3s; }
.ld-n span { display: block; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.ld-n i { display: block; height: 1em; font-style: normal; }
.ld-k { position: absolute; right: var(--gut); bottom: 32px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #9c978f; transition: opacity .3s; }
.ld.out .ld-mid { opacity: 0; transform: translate(-50%, -64%); }
.ld.out .ld-n, .ld.out .ld-k { opacity: 0; }

/* ------------------------------------------------------------------ progress along the top */
.prog { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 40; overflow: hidden; pointer-events: none; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, rgba(58,120,255,0) 0, rgba(58,120,255,.5) 55%, #8ab8ff 100%); transform: translateX(calc((var(--p, 0) - 1) * 100%)); }

/* ------------------------------------------------------------------ the header marks where you are */
.nav { position: relative; }
.nav-ind { position: absolute; left: 0; bottom: -2px; width: 1px; height: 2px; background: var(--signal); box-shadow: 0 0 10px rgba(58,120,255,.9); transform-origin: left; transform: translateX(var(--x, 0px)) scaleX(var(--w, 0)); opacity: 0; pointer-events: none; transition: transform .75s var(--out), opacity .4s; }
.nav.has .nav-ind { opacity: 1; }
.nav a.cur { color: var(--bone); }
.nav-sub { display: inline-block; max-width: 0; margin-left: 0; overflow: hidden; vertical-align: -1px; white-space: nowrap; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; color: var(--ember); opacity: 0; transition: max-width .6s var(--out), margin-left .6s var(--out), opacity .4s; }
.nav a.sub .nav-sub { max-width: 64px; margin-left: 9px; opacity: 1; }

/* ------------------------------------------------------------------ the station's name, crossing the screen in flight */
.chap { position: fixed; left: max(46vw, 520px); right: calc(var(--gut) + 40px); top: 50%; z-index: 2; transform: translateY(-58%); pointer-events: none; visibility: hidden; }
.chap.on { visibility: visible; }
.chap-n { display: block; margin: 0 0 14px 6px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ember); opacity: 0; }
.chap-t { display: block; overflow: hidden; padding: .08em .04em .16em 0; font: 820 clamp(60px, 9.4vw, 168px)/.86 var(--sans); font-stretch: 72%; letter-spacing: -.04em; color: var(--bone); }
.chap-t span { display: block; white-space: nowrap; transform-origin: 0 60%; will-change: transform; text-shadow: 0 0 70px rgba(10,10,11,.75), 0 0 2px rgba(10,10,11,.6); }
.chap-t span i { display: inline-block; font-style: normal; }
@media (max-width: 820px) { .chap { left: var(--gut); right: var(--gut); top: 34%; } }

/* ------------------------------------------------------------------ what comes next, in the margin under the rail */
.next { text-shadow: 0 0 6px #0a0a0b, 0 0 2px #0a0a0b, 0 0 14px #0a0a0b; position: fixed; right: calc(var(--gut) - 6px); top: calc(50% + 150px); z-index: 20; display: flex; align-items: center; gap: 10px; writing-mode: vertical-rl; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--ash); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .5s, transform .7s var(--out), color .3s; }
.next.on { opacity: 1; pointer-events: auto; transform: none; }
.next b { font-weight: 500; color: var(--bone); }
.next i { width: 1px; height: 38px; background: linear-gradient(var(--signal), transparent); transform-origin: top; animation: cue 2.2s var(--out) infinite; }
.next:hover { color: var(--bone); }
.next:hover b { color: var(--ember); }
body.on-paper .next { opacity: 0; pointer-events: none; }

/* …and at a station, at the end of its progress strip */
.proc { grid-template-columns: 170px 1fr auto; }
.proc-next { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 168px; padding: 9px 40px 10px 16px; text-decoration: none; font: 500 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ash); transition: background .35s, color .3s; }
.proc-next b { font: 600 13.5px/1.2 var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--bone); }
.proc-next i { position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 1.5px solid var(--signal); border-bottom: 1.5px solid var(--signal); transform: rotate(45deg); animation: nextBob 1.8s var(--out) infinite; }
.proc-next:hover { background: rgba(58,120,255,.16); color: var(--bone); }
@keyframes nextBob { 0%, 100% { transform: translateY(-2px) rotate(45deg); } 50% { transform: translateY(3px) rotate(45deg); } }
@media (max-width: 1179px) { .proc { grid-template-columns: 170px 1fr; } .proc-next { display: none; } }

/* ------------------------------------------------------------------ words rising through a mask */
.split .sw { display: inline-block; overflow: hidden; vertical-align: top; padding: .09em .05em .17em; margin: -.09em -.05em -.17em; }
.split .si { display: inline-block; transform: translateY(115%) rotate(5deg); transform-origin: 0 100%; transition: transform 1.2s var(--out); transition-delay: calc(var(--i) * 60ms + 60ms); will-change: transform; }
.split.in .si, .ch-card.on .split .si { transform: none; }
.ch-card:not(.on) .split .si { transition-duration: .25s; transition-delay: 0s; }

/* ------------------------------------------------------------------ a card's contents arrive in order, not all at once */
@media (min-width: 821px) {
  html.liquid .ch-card > * { transition: opacity .6s, transform .9s var(--out); }
  html.liquid .ch-card:not(.on) > * { opacity: 0; transform: translateY(14px); transition-duration: .2s; transition-delay: 0s; }
  html.liquid .ch-card.on > :nth-child(1) { transition-delay: .10s; }
  html.liquid .ch-card.on > :nth-child(2) { transition-delay: .16s; }
  html.liquid .ch-card.on > :nth-child(3) { transition-delay: .34s; }
  html.liquid .ch-card.on > :nth-child(4) { transition-delay: .46s; }
  html.liquid .ch-card.on > :nth-child(5) { transition-delay: .58s; }
  html.liquid .ch-card.on > :nth-child(6) { transition-delay: .62s; }
  html.liquid .ch-card.on > :nth-child(7) { transition-delay: .76s; }
  html.liquid .ch-card.on > :nth-child(8) { transition-delay: .90s; }
  html.liquid .ch-card.on > :nth-child(n+9) { transition-delay: 1s; }
}

/* ------------------------------------------------------------------ labels that roll over on hover */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.roll > .roll-a { display: block; transition: transform .6s var(--out); }
.roll::after { content: attr(data-t); position: absolute; left: 0; top: 0; white-space: nowrap; transform: translateY(110%); transition: transform .6s var(--out); }
a:hover > .roll > .roll-a, button:hover > .roll > .roll-a, a:focus-visible > .roll > .roll-a, button:focus-visible > .roll > .roll-a { transform: translateY(-110%); }
a:hover > .roll::after, button:hover > .roll::after, a:focus-visible > .roll::after, button:focus-visible > .roll::after { transform: none; }
.btn .roll, .btn:hover .roll, .lnk .roll, .lnk:hover .roll { transform: none; color: inherit; }
.btn .roll > .roll-a, .lnk .roll > .roll-a { color: inherit; transition: transform .6s var(--out); }
.btn:hover .roll > .roll-a, .lnk:hover .roll > .roll-a { transform: translateY(-110%); }

/* ------------------------------------------------------------------ buttons that lean toward the pointer */
html.liquid .btn { transform: translate(var(--mx, 0px), var(--my, 0px)); }
html.liquid .btn:hover { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 1px)); }
html.liquid .btn.mag { transition: background .2s, box-shadow .3s; }

@media (prefers-reduced-motion: reduce) {
  .split .si { transform: none !important; transition: none !important; }
  .roll > .roll-a, .roll::after { transition: none; }
  .next i, .proc-next i { animation: none; }
}

/* the mark in the header draws itself as the curtain lifts, not behind it */
html.loading .mark .lg-ball, html.loading .mark .lg-trail { animation-play-state: paused; }

/* ------------------------------------------------------------------ the curtain, for a long jump between sections */
.wipe { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.wipe svg { display: block; width: 100%; height: 100%; }
.wipe .fill { fill: #0a0a0b; }
.wipe .edge { fill: none; stroke: #3a78ff; stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 10px rgba(58,120,255,.95)); }

/* ------------------------------------------------------------------ the long dark section's edges bow with the speed of travel */
#approach.paper { overflow: visible; overflow-x: clip; }
.liq-edge { position: absolute; left: 0; width: 100%; height: 130px; pointer-events: none; }
.liq-edge.edge-t { top: -129px; }
.liq-edge.edge-b { bottom: -129px; }
.liq-edge .f { fill: rgba(10,10,11,.62); }
.liq-edge.edge-b .f { fill: rgba(10,10,11,.93); }
.liq-edge .l { fill: none; stroke: var(--signal); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: var(--e, 0); filter: drop-shadow(0 0 8px rgba(58,120,255,.9)); }

/* a card that is leaving goes quickly, so it is clear of whatever crosses next */
@media (min-width: 821px) { html.liquid .ch-card:not(.on) { transition-duration: .22s; } }