/* Tracium website: the menu, at every width. After Osmo's fixed underlay navigation, in CSS: the page slides aside,
   the menu underneath shows, the page's edge gets rounded corners. The open state carries the curves that open it,
   the closed state the curves that close it, so each direction moves in its own way. */
@property --tq-779491 { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
:root {
  --mw: min(80vw, 480px);
  --en: cubic-bezier(0.32, 0.72, 0, 1);        /* Osmo's "energy" */
  --io: cubic-bezier(0.45, 0, 0.55, 1);        /* power2.inOut */
  --po: cubic-bezier(0.215, 0.61, 0.355, 1);   /* power3.out */
  --pi: cubic-bezier(0.55, 0.055, 0.675, 0.19);/* power3.in */
  --bo: cubic-bezier(0.34, 1.56, 0.64, 1);     /* back.out */
  scrollbar-gutter: stable;
}
/* While the menu is open the page holds still. */
:root:has(.mnav.is-open) { overflow: hidden; }

.topbar .tr-nav { display: none; }
.mnav { display: block; font-family: var(--font-sans); }

/* The page sits over the menu and slides aside to show it. */
.pg { position: relative; z-index: 2; background: var(--tr-neutral-0); transition: transform 0.6s var(--en); }
.mnav.is-open ~ .pg { transform: translateX(calc(-1 * var(--mw))); transition: transform 0.7s var(--en); }

/* The toggle: a pill that stays on top, level with the logo, on the content's right edge. */
.mnav-t { position: fixed; z-index: 101; top: 28px; right: clamp(20px, 5%, 56px); display: flex; align-items: center; gap: 12px; box-sizing: border-box; height: 44px; margin: 0; padding: 0 16px 0 18px; border: 0; border-radius: var(--tr-radius-pill); background: var(--tr-color-ground); color: var(--tr-color-text); box-shadow: inset 0 0 0 var(--tr-stroke-hairline) var(--tr-color-hairline); font: inherit; font-size: 15px; line-height: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (min-width: 1200px) {
  .mnav-t { top: calc(50 * min(1px, 100vw / 1440) - 22px); right: max(calc(50% - 648px), 5%); }
}
/* Open, it moves onto the menu's edge, level with the menu's first line of type, with the page's curves. */
.mnav-t { transition: box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1), right 0.6s var(--en), top 0.6s var(--en); }
.mnav.is-open .mnav-t { top: 28px; right: clamp(24px, 3vw, 40px); transition: box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1), right 0.7s var(--en), top 0.7s var(--en); }
.mnav-t:hover { box-shadow: inset 0 0 0 var(--tr-stroke-hairline) var(--tr-color-mark-quiet); }
.mnav-t:focus-visible { outline: 2px solid var(--tr-color-accent); outline-offset: 2px; }
.mnav-tt { display: flex; flex-direction: column; height: 20px; overflow: hidden; }
.mnav-tl { display: block; transition: transform 0.25s var(--pi); }
.mnav.is-open .mnav-tl { transform: translateY(-100%); transition: transform 0.4s var(--en); }
.mnav-ti { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 16px; }
.mnav-tb { display: block; height: 1.5px; background: currentColor; transition: transform 0.25s var(--pi); }
.mnav.is-open .mnav-tb:first-child { transform: translateY(3.25px) rotate(45deg); transition: transform 0.35s var(--bo) 0.05s; }
.mnav.is-open .mnav-tb:last-child { transform: translateY(-3.25px) rotate(-45deg); transition: transform 0.35s var(--bo) 0.05s; }

/* The menu, under the page. */
.mnav-m { position: fixed; z-index: 1; top: 0; right: 0; bottom: 0; width: var(--mw); overflow-y: auto; overscroll-behavior: contain; background: var(--tr-color-ground); color: var(--tr-color-text); visibility: hidden; transition: visibility 0s 0.7s; }
.mnav.is-open .mnav-m { visibility: visible; transition: none; }
/* Sized to the height of the window too. On a short screen the links, their spacing and the space above and below
   them shrink together (--mu below 1px), so the whole menu fits, the demo button with it, down to about 620 px of
   height. Full size from about 920 px. Measured against the window with its toolbars shown, where there is one. */
.mnav-m { --mu: clamp(0.55px, (100vh - 280px) / 640, 1px); }
@supports (height: 100svh) { .mnav-m { --mu: clamp(0.55px, (100svh - 280px) / 640, 1px); } }
/* Clipped at its own box: the links come in from the side and the bottom section from below, and that offset is not
   content. Counted as content it gave the menu a scrollbar for a moment, which pushed the bottom section around. */
.mnav-in { box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: calc(48 * var(--mu)); min-height: 100%; padding: 40px clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px); overflow: clip; }
/* No logo in the menu: the page's own logo is the one. The list starts where it did under it. */
.mnav-l { margin: min(clamp(76px, calc(6vw + 20px), 108px), calc(108 * var(--mu))) 0 0; padding: 0; list-style: none; }
.mnav-l li { border-top: var(--tr-stroke-hairline) solid var(--tr-color-hairline); opacity: 0; transform: translateX(25%); transition: opacity 0.3s var(--io), transform 0s 0.3s; }
.mnav-l li:last-child { border-bottom: var(--tr-stroke-hairline) solid var(--tr-color-hairline); }
.mnav.is-open .mnav-l li { opacity: 1; transform: none; transition: opacity 0.7s var(--en) calc(var(--i) * 50ms), transform 0.7s var(--en) calc(var(--i) * 50ms); }
.mnav-l a { display: flex; align-items: center; padding: min(clamp(12px, 1vw, 14px), calc(14 * var(--mu))) 0; font-size: min(clamp(32px, 3.3vw, 48px), calc(48 * var(--mu))); line-height: 1.1; letter-spacing: -0.035em; color: var(--tr-color-text); text-decoration: none; }
/* The current page reads like a kicker: the tick in the kicker's proportion to its text (1.12 em high, 0.72 em wide),
   so it grows with the link. The gap to the word grows much slower: about the kicker's 14 px, 16 px at 48 px.
   The real tick, drawn at k 4 (56 high) and scaled to the text. */
.mnav-k { position: relative; flex: none; width: 0.72em; height: 1.12em; margin-right: calc(0.12em + 10px); }
.mnav-k .tr-tick { transform-origin: 0 0; scale: tan(var(--tq-779491)); --tq-779491: atan2(1.12em, 56px); }
.mnav-l a:focus-visible, .mnav-sl a:focus-visible { outline: 2px solid var(--tr-color-accent); outline-offset: 2px; }
.mnav-b { position: relative; padding-top: 24px; }
.mnav-b::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--tr-stroke-hairline); background: var(--tr-color-hairline); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s var(--io); }
.mnav.is-open .mnav-b::before { transform: none; transition: transform 0.5s var(--en) 0.3s; }
.mnav-cta { display: flex; width: 100%; height: 48px; justify-content: center; font-size: 16px; line-height: 20px; }
.mnav-sl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.mnav-sl a { display: inline-block; padding: 12px 0; font-size: 15px; line-height: 20px; color: var(--tr-color-meta); text-decoration: none; }
.mnav-s { opacity: 0; transform: translateY(100%); transition: opacity 0.3s var(--io), transform 0s 0.3s; }
.mnav.is-open .mnav-s { opacity: 1; transform: none; transition: opacity 0.5s var(--po) calc(0.3s + var(--i) * 30ms), transform 0.5s var(--po) calc(0.3s + var(--i) * 30ms); }

/* Over the page, moving with it: the dim, and the menu's ground framing the page's edge with rounded corners. */
.mnav-o { position: fixed; z-index: 100; inset: 0 -1px 0 0; overflow: clip; visibility: hidden; pointer-events: none; touch-action: none; cursor: pointer; transition: transform 0.6s var(--en), visibility 0s 0.6s; }
.mnav.is-open .mnav-o { visibility: visible; pointer-events: auto; transform: translateX(calc(-1 * var(--mw))); transition: transform 0.7s var(--en), visibility 0s; }
.mnav-d { position: absolute; inset: 0; background: var(--tr-alpha-black-30); opacity: 0; transition: opacity 0.35s var(--io); }
.mnav.is-open .mnav-d { opacity: 1; transition: opacity 0.5s var(--en); }
.mnav-f { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.mnav-r { display: flex; flex-direction: column; align-items: flex-end; transform: translateY(-100%); transition: transform 0.5s var(--en); }
.mnav-r.is-b { transform: translateY(100%); }
.mnav.is-open .mnav-r { transform: none; }
.mnav-bar { width: 100%; height: 16px; background: var(--tr-color-ground); }
.mnav-c { width: 32px; height: 32px; transform: scale(0); transform-origin: 100% 0; background: radial-gradient(circle farthest-side at 0 100%, transparent 99%, var(--tr-color-ground) 100%); transition: transform 0.5s var(--en); }
.mnav-c.is-b { transform-origin: 100% 100%; background: radial-gradient(circle farthest-side at 0 0, transparent 99%, var(--tr-color-ground) 100%); }
.mnav.is-open .mnav-c { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pg, .mnav *, .mnav *::before { transition: none !important; }
}