/* ═════════ Musionic — shared site motion (all pages) ═════════
   1. NAV letters: on hover each letter dives under and resurfaces as the serif italic (a ripple runs through the word)
   2. MOBILE MENU: opens like the giant's mouth — a lime-rimmed circle bursts out of the burger, links rise letter by letter
   3. PAGE CHANGE ("the river"): the Bow River film rises over the page like water, the next page's name splashes in and
      bobs, a paper sailboat crosses the river line while the page loads, then the water drains away. */

/* ── 1. nav letters ── */
.nl { position: relative; display: inline-flex; white-space: pre; }
.nl-a, .nl-b { display: inline-flex; white-space: pre; }
.nl-b { position: absolute; left: 0; top: 0; pointer-events: none; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--nav-hi, #C8FF2E); }
.nl .c { display: inline-block; will-change: transform; transition: transform .55s cubic-bezier(.65,-0.35,.3,1.35), opacity .35s ease; transition-delay: calc(var(--i) * 32ms); }
.nl-b .c { transform: translateY(-115%) rotate(-12deg); opacity: 0; }
.nl-wrap { display: inline-block; overflow: hidden; overflow: clip; overflow-clip-margin: .25em; vertical-align: bottom; padding: 0 .08em; margin: 0 -.08em; }
a:hover > .nl-wrap .nl-a .c, a:focus-visible > .nl-wrap .nl-a .c { transform: translateY(115%) rotate(10deg); opacity: 0; }
a:hover > .nl-wrap .nl-b .c, a:focus-visible > .nl-wrap .nl-b .c { transform: none; opacity: 1; }
.nl-b .c:nth-child(odd) { --tilt: 1; }

/* ── 2. mobile menu: the mouth ── */
html body .mnav { opacity: 1; visibility: hidden; clip-path: circle(0px at var(--mx, 92%) var(--my, 40px));
  transition: clip-path .62s cubic-bezier(.7,0,.25,1), visibility 0s linear .62s; }
html body.menu-open .mnav { visibility: visible; clip-path: circle(var(--mr, 150vmax) at var(--mx, 92%) var(--my, 40px));
  transition: clip-path .85s cubic-bezier(.76,0,.24,1), visibility 0s; }
.mt-ring { position: fixed; z-index: 795; left: var(--mx, 92%); top: var(--my, 40px); width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%);
  border: 3px solid #C8FF2E; box-shadow: 0 0 0 1px rgba(200,255,46,.25), inset 0 0 30px rgba(200,255,46,.35); pointer-events: none; opacity: 0; }
.mnav a { position: relative; }
.mnav .nl-a .c { transform: translateY(110%); }
.menu-open .mnav .nl-a .c { transform: none; transition-delay: calc(.28s + var(--row, 0) * 70ms + var(--i) * 26ms); }
.menu-open .mnav a:hover > .nl-wrap .nl-a .c { transform: translateY(115%) rotate(10deg); transition-delay: calc(var(--i) * 32ms); }
.mnav .mt-menu-foot { position: absolute; left: var(--pad, 1.5rem); right: var(--pad, 1.5rem); bottom: calc(1.6rem + env(safe-area-inset-bottom)); display: flex; justify-content: space-between;
  font: 500 .68rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,241,234,.55);
  opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .5s ease; }
.menu-open .mnav .mt-menu-foot { opacity: 1; transform: none; transition-delay: .7s; }

/* ── 3. page changes are plain navigations (the 3D-logo transition is archived in _archive/logo-loader-v3/) ── */
@media (prefers-reduced-motion: reduce) {
  .nl .c, .mnav .nl-a .c { transition: none !important; transform: none !important; }
  .nl-b { display: none; }
  html body .mnav, html body.menu-open .mnav { clip-path: none; transition: visibility 0s; }
  .mt-ring { display: none; }
}

/* ── language switch (EN | FR) in the header, every page; English is the main site, /fr/ the French one ── */
.lang-sw { display: inline-flex; align-items: center; gap: 2px; margin-left: 1.6rem; padding: 3px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent); font: 600 .7rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; }
.lang-sw + .talk { margin-left: .9rem; }
.lang-sw a { display: inline-grid; place-items: center; min-width: 2.15rem; height: 1.85rem; padding: 0 .55rem; border-radius: 999px; color: inherit; text-decoration: none;
  opacity: .72; transition: opacity .2s ease, background-color .2s ease, color .2s ease; }
.lang-sw a:hover, .lang-sw a:focus-visible { opacity: 1; }
.lang-sw a:focus-visible { outline: 2px solid #C8FF2E; outline-offset: 2px; }
.lang-sw a[aria-current] { background: #C8FF2E; color: #0A0A0B; opacity: 1; pointer-events: none; }
@media (max-width: 900px) {
  .lang-sw { margin-left: auto; margin-right: .6rem; }
  .lang-sw a { min-width: 2.4rem; height: 2.15rem; }   /* bigger touch target on phones */
}
@media (prefers-reduced-motion: reduce) { .lang-sw a { transition: none; } }

/* ── 4. page changes cross-fade (2026-10-29): browsers that support it blend one page into the next instead of a blank flash ── */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }