/* web-studio design system: CHROME. The top bar, the footer, the bold that marks the page you are
   on, page-to-page View Transitions, the entrance cascade and smooth anchors. Every page of a site
   loads this file (both sides of a View Transition must opt in). Needs tokens.css and base.css.
   Generalised from AirwayControl's chrome.css (2026-09-28/29). */

/* ---------- top bar ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; height: var(--nav-h); display: flex; align-items: center;
  background: var(--nav-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line); view-transition-name: site-nav; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; text-decoration: none; }
.nav .brand img, .nav .brand svg { width: 32px; height: auto; }
.nav .links { display: flex; align-items: center; gap: 20px; font-size: 12px; }
.nav .links a { color: var(--soft); }
.nav .links .btn { min-height: 28px; padding: 4px 12px; font-size: 12px; color: var(--on-ink); white-space: nowrap; }

/* ---------- footer ---------- */
.foot { background: var(--foot-bg); color: var(--soft); font-size: 12px; line-height: 1.33; padding-block: 28px 40px; }
.foot .wrap { display: grid; gap: 14px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot nav a { color: var(--soft); }
.foot hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- the page you are on is bold (aria-current="page"), and the bold FADES ----------
   Each text link carries its label in data-text. ::after is an invisible, zero-height bold copy
   that holds the link at its bold width on every page, so nothing beside it moves. ::before is a
   visible bold copy laid exactly over the regular text. Turning bold is a cross-fade, never a
   weight switch (the system font is not variable everywhere, so a weight transition would jump). */
.nav .links a:not(.btn), .foot nav a { position: relative; display: inline-flex; flex-direction: column; align-items: center; text-decoration-line: none; }
.foot nav a { align-items: flex-start; }
.nav .links a:not(.btn)::after, .foot nav a::after,
.nav .links a:not(.btn)::before, .foot nav a::before {
  content: attr(data-text); content: attr(data-text) / "";
  font-weight: 600; pointer-events: none; user-select: none;
}
.nav .links a:not(.btn)::after, .foot nav a::after { height: 0; overflow: hidden; visibility: hidden; }
.nav .links a:not(.btn)::before, .foot nav a::before {
  position: absolute; inset: 0; text-align: center; color: var(--ink); opacity: 0;
  transition: opacity var(--dur-base) var(--ease-in-out);
}
.foot nav a::before { text-align: left; }
/* hover must not reach the active link, or the regular text shows through under the bold ("AAbout") */
.nav .links a:not(.btn):not([aria-current]):hover, .foot nav a:not([aria-current]):hover { color: var(--ink); }
.nav .links a[aria-current="page"], .foot nav a[aria-current="page"] {
  color: transparent; transition: color var(--dur-base) var(--ease-in-out);
  animation: bold-regular-out var(--dur-base) var(--ease-in-out) var(--page-in-start) backwards;
}
.nav .links a[aria-current="page"]::before, .foot nav a[aria-current="page"]::before {
  opacity: 1; animation: bold-in var(--dur-base) var(--ease-in-out) var(--page-in-start) backwards;
}
@keyframes bold-in { from { opacity: 0; } }
@keyframes bold-regular-out { from { color: var(--soft); } }
@media (forced-colors: active) {
  .nav .links a:not(.btn)::before, .foot nav a::before { display: none; }
  .nav .links a[aria-current="page"], .foot nav a[aria-current="page"] { color: LinkText; font-weight: 600; }
}

/* ---------- page to page, same tab: cross-document View Transitions ----------
   Chrome/Edge 126+, Safari 18.2+. The top bar is its own layer and stays put; old and new bars
   cross-fade in place (that fades the old bold out and the new bold in). The old page fades out
   ON TOP of the new one (z-index 1), whose content is live and runs its own cascade underneath.
   mix-blend-mode: normal, or two paper surfaces add up and the page flares white mid-transition.
   Firefox has no cross-document VT and simply gets the new page's cascade on load: that is the floor. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out var(--dur-page-out) var(--ease-in-out) both; mix-blend-mode: normal; z-index: 1; }
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(site-nav) { animation-duration: var(--dur-base); animation-timing-function: var(--ease-in-out); }
::view-transition-old(site-nav), ::view-transition-new(site-nav) { animation-duration: var(--dur-base); animation-timing-function: var(--ease-in-out); }
@keyframes page-out { to { opacity: 0; } }

/* ---------- the entrance cascade ----------
   ONE cascade that starts on the first frame. Mark a container .cascade and its children rise in
   --stagger apart; set --i on a child to choose its step. CSS animations with a backwards fill:
   nothing is hidden by script, nothing waits on an image, and if CSS fails the text is simply there.
   A late entrance is fixed by moving its START, never by shortening its duration. */
@keyframes rise-in { from { opacity: 0; transform: translateY(var(--rise)); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(calc(-1 * var(--hero-drop))) scale(var(--settle-scale)); } }
.cascade > * { animation: rise-in var(--dur-enter) var(--ease-out) backwards; animation-delay: calc(var(--cascade-start, 0ms) + var(--i, 7) * var(--stagger)); }
.cascade > :nth-child(1) { --i: 0; } .cascade > :nth-child(2) { --i: 1; } .cascade > :nth-child(3) { --i: 2; }
.cascade > :nth-child(4) { --i: 3; } .cascade > :nth-child(5) { --i: 4; } .cascade > :nth-child(6) { --i: 5; }
.cascade > :nth-child(7) { --i: 6; }
.cascade--calm > * { animation-name: rise-in; animation-duration: var(--dur-hero); animation-timing-function: var(--ease); }
.cascade--drop > * { animation-name: drop-in; animation-duration: var(--dur-hero); animation-timing-function: var(--ease); }
.cascade--page { --cascade-start: var(--page-in-start); }

/* ---------- in-page links glide, and never land under the sticky bar ---------- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
[id] { scroll-margin-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }

/* ---------- the bar on a phone: section links give way, .keep links stay, the pill says "Get" ---------- */
@media (max-width: 600px) {
  .nav .links a:not(.btn) { display: none; }
  .nav .links a.keep { display: inline-flex; }
  .nav .links { gap: 14px; }
  .nav .brand { font-size: 17px; gap: 8px; }
  .nav .links .btn { padding-inline: 14px; }
  .nav .links .btn .long { display: none; }
}
@media (max-width: 380px) { .nav .links { gap: 8px; } .nav .wrap { gap: 10px; } .nav .brand { font-size: 16px; gap: 6px; } .nav .brand img, .nav .brand svg { width: 28px; } }

/* ---------- skip link, only on keyboard focus ---------- */
.skip-link { position: fixed; top: 10px; left: var(--gutter); z-index: 30; padding: 10px 14px; border-radius: var(--radius-pill); background: var(--ink); color: var(--bg); font-size: 14px; transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease-in-out); }
.skip-link:focus { transform: none; text-decoration: none; }
main:focus { outline: none; }