/* Underlay push menu. Rewritten from Osmo's "Fixed Underlay Navigation" resource (inline GSAP timeline + Webflow CSS;
   clone + numbers: ~/Dev/osmo-underlay-nav-recreate/PARTS.md).

   <div class="upm" data-upm>                             fixed layers; sits BEFORE the page in the DOM
     <header class="upm-header"> logo ... <button class="upm-toggle" aria-expanded="false" aria-label="open menu">
         <span class="upm-toggle-text"><span class="upm-toggle-label">Menu</span><span class="upm-toggle-label">Close</span></span>
         <span class="upm-toggle-icon"><span class="upm-toggle-bar"></span><span class="upm-toggle-bar"></span></span></button></header>
     <nav class="upm-menu"><div class="upm-inner">
       <ul class="upm-list"><li data-upm-l><a class="upm-link-large"><span class="upm-link-label">Home</span></a></li> ...</ul>
       <div class="upm-bottom"><div class="upm-line"></div> <div class="upm-col"><div data-upm-s>...</div> ...</div></div>
     </div></nav>
     <div class="upm-overlay"><div class="upm-dark"></div><div class="upm-edges">
       <div class="upm-edge-row"><div class="upm-edge"></div><div class="upm-corner"></div></div>
       <div class="upm-edge-row"><div class="upm-corner is-bottom"></div><div class="upm-edge"></div></div></div></div>
   </div>
   <main class="upm-page" data-upm-page> ... the whole site ... </main>

   The menu is fixed to the right edge UNDER the page (z 1 vs the page's 2), the colour of the body. Opening slides the
   page AND a fixed overlay left by exactly the menu's width, so the menu is uncovered in place, never moves itself. The
   overlay rides with the page and turns its trailing edge into a card: two bands of the menu colour (1em) grow in from
   the top and bottom, and at the right end of each a 2em inverted-radius corner (a radial gradient: transparent quarter
   circle, menu colour outside it) scales up from the corner point, so the page reads as a rounded card lying on the menu.
   A 30% black wash darkens it. */
.upm {
  --upm-width: 30em;                       /* menu width = how far the page slides (source 30em; 80vw under 768px) */
  --upm-bg: #fff;                          /* the menu colour = body colour = the bands and corners round the page */
  --upm-ink: #312e2e;                      /* menu text; the toggle tweens to it as the page leaves it */
  --upm-toggle-ink: #fff;                  /* toggle colour while it sits over the page */
  --upm-accent: #f85931;                   /* current link fill */
  --upm-accent-ink: #ededed;
  --upm-wash: rgba(0, 0, 0, .3);           /* darkens the pushed page */
  --upm-band: 1em;                         /* top/bottom band height */
  --upm-radius: 2em;                       /* the card corner */
  /* timing (read once by part.js; ms numbers or cubic-bezier()) */
  --upm-ease: cubic-bezier(.32, .72, 0, 1);    /* Osmo "energy": CustomEase M0,0 C0.32,0.72 0,1 1,1 */
  --upm-slide: 700;                        /* page + overlay out */
  --upm-slide-back: 600;                   /* page + overlay home */
  --upm-fade: 500;                         /* wash, bands, corners, bottom line in */
  --upm-stagger-l: 50;                     /* big links */
  --upm-stagger-s: 30;                     /* small links */
  --upm-small-at: 300;                     /* small links + bottom line start */
  font-size: inherit;
}
@media (max-width: 767px) { .upm { --upm-width: 80vw; } }

body:has(> .upm), body:has(.upm) { background: var(--upm-bg); }
.upm-page { position: relative; z-index: 2; width: 100%; overflow: clip; }

/* header: never moves */
.upm-header { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--upm-toggle-ink); pointer-events: none; }
.upm-bar { display: flex; justify-content: space-between; align-items: center; padding: 2.5em; }
.upm-bar > * { pointer-events: auto; }
.upm-toggle {
  display: flex; justify-content: center; align-items: center; gap: .75em; margin: -1em; padding: 1em;
  color: var(--upm-toggle-ink); background: transparent; border: 0; font: inherit; cursor: pointer;
}
.upm-toggle-text { display: flex; flex-direction: column; align-items: flex-end; height: 1.5em; overflow: hidden; flex: none; }
.upm-toggle-label { font-size: 1.25em; line-height: 1.25; }
.upm-toggle-icon { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .375em; width: 1.5em; margin-bottom: -.3em; flex: none; }
.upm-toggle-bar { display: block; width: 100%; height: .125em; background: currentColor; flex: none; }

/* the menu: fixed under the page */
.upm-menu { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1; width: var(--upm-width); color: var(--upm-ink); background: var(--upm-bg); }
.upm-inner { display: flex; flex-direction: column; justify-content: space-between; gap: 2em; height: 100%; padding: 7.5em 2em 2em; overflow: auto; box-sizing: border-box; }
.upm-list { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; list-style: none; }
.upm-list.is-small { gap: .75em; }
.upm-link-large { display: block; border-radius: .25em; padding: .75em 1em; color: inherit; text-decoration: none; }
.upm-link-large[aria-current] { background: var(--upm-accent); color: var(--upm-accent-ink); }
.upm-link-label { font-size: 3.25em; line-height: .9; letter-spacing: -.04em; }
.upm-bottom { position: relative; display: flex; align-items: flex-start; width: 100%; padding-top: 1.5em; }
.upm-col { display: flex; flex-direction: column; align-items: flex-start; gap: 1em; flex: 1; }
.upm-link-small { font-size: 1em; line-height: 1.1; color: inherit; text-decoration: none; }
.upm-link-small.is-faded { opacity: .5; }
.upm-line { position: absolute; inset: 0 0 auto; height: 1px; background: currentColor; opacity: .15; transform-origin: 0 50%; }

/* the overlay: rides with the page, turns its trailing edge into a rounded card */
.upm-overlay { position: fixed; inset: 0 -1px 0 0; z-index: 100; overflow: clip; visibility: hidden; pointer-events: none; cursor: pointer; }
.upm-dark { position: absolute; inset: 0; background: var(--upm-wash); opacity: 0; }
.upm-edges { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.upm-edge-row { display: flex; flex-direction: column; align-items: flex-end; }
.upm-edge { width: 100%; height: var(--upm-band); background: var(--upm-bg); }
.upm-corner {
  width: var(--upm-radius); height: var(--upm-radius); transform-origin: 100% 0;
  background: radial-gradient(circle farthest-side at 0 100%, transparent 99%, var(--upm-bg));
}
.upm-corner.is-bottom { transform-origin: 100% 100%; background: radial-gradient(circle farthest-side at 0 0, transparent 99%, var(--upm-bg)); }

/* closed state before part.js runs (no flash) */
.upm-corner { scale: 0; }
.upm-edge-row:first-child { translate: 0 -100%; }
.upm-edge-row:last-child { translate: 0 100%; }
.upm-line { scale: 0 1; }
[data-upm-l], [data-upm-s] { opacity: 0; }

@media (max-width: 767px) {
  .upm-bar { padding: 1.25em; }
  .upm-toggle-text { height: 1.25em; }
  .upm-toggle-label { font-size: 1em; }
  .upm-inner { padding: 5em 1.25em 1.25em; }
  .upm-link-label { font-size: 2em; }
  .upm-bottom { flex-direction: column; gap: 2em; padding-left: 1em; padding-right: 1em; }
}