/* The site menu. Ported 3 Nov from the AD boards (menu/, then menu-r2/) with Calvin's calls:
   - "menu -- m2": Work · Services · Thoughts · Contact in a row centred above the mark (About became Work, Calvin 3 Nov:
     "kill about in menu, change to work. this is going to become the work page"); on scroll the hero's own cutout
     mark rises and shrinks into the lockup and the words part two to each side of it.
   - "use the hover animation from f2 index": a link's hover is the scramble (sparks.js), not an underline; "fonts,
     leave": the words stay Plex Sans.
   - "kind of want to steal the pill look on scroll from mobile, instead of the full width rectangular bar": docked, the
     words and the lockup sit in a rounded black capsule, on desktop as on phones.
   - Phones: "capsule and drop panel" (menu-r2's S1 and O3): docked, the capsule holds the lockup and a Menu pill; Menu
     drops a rounded panel under the capsule with the four words, the page still in view behind it.
   One mechanism (menu.js): every piece is driven by one number, --d (0 at the top of the page, 1 docked), so the whole
   menu moves as one, scrubbed by the scroll, and comes back on the way up. The letters are the PNGs from letters.js,
   scaled; clicking the lockup still flicks every letter on one beat. */

.mn { --d: 0; --dk: .44; --m0: 0; --m1: 0; --mx: 0; position: relative; z-index: 60; }
.mn__a { position: fixed; left: 0; top: 0; z-index: 62; display: block; white-space: nowrap; text-decoration: none; color: #F7F7F5;
         padding: 6px 0; font: 400 15px/1 var(--font-body); letter-spacing: -.005em;
         transform: translate(calc((var(--x0, 0) + (var(--x1, 0) - var(--x0, 0)) * var(--d)) * 1px), calc((var(--y0, 0) + (var(--y1, 0) - var(--y0, 0)) * var(--d)) * 1px));
         will-change: transform; -webkit-tap-highlight-color: transparent; }
.mn:not(.is-set) .mn__a, .mn:not(.is-set) .mn__more { visibility: hidden; }   /* until menu.js has measured: no jump on load */
.mn.is-relayout .mn__a, .mn.is-relayout .mn__cap { transition: transform .3s cubic-bezier(.2, .8, .2, 1), width .3s cubic-bezier(.2, .8, .2, 1); }   /* a new combo's width */
.mn__a:focus-visible, .mn__more:focus-visible { outline: 1px solid #F7F7F5; outline-offset: 4px; }
.mn__mark { position: fixed; left: 0; right: 0; top: 0; z-index: 61; height: var(--L); display: flex; justify-content: center; pointer-events: none;
            transform: translate(calc(var(--mx) * var(--d) * 1px), calc((var(--m0) + (var(--m1) - var(--m0)) * var(--d)) * 1px)) scale(calc(1 + (var(--dk) - 1) * var(--d)));
            transform-origin: 50% 50%; will-change: transform; }
.mn__mark .mark { pointer-events: auto; }
.hero__spacer { height: var(--L); flex: none; }           /* the mark's place in the hero while it rides fixed */

/* the capsule: forms at the top of the window as the menu docks, round the words and the lockup */
.mn__cap { position: fixed; top: 10px; left: 50%; z-index: 59; height: 52px; width: calc(var(--capw, 600) * 1px); border-radius: 999px; pointer-events: none;
           transform: translateX(calc(-50% + var(--capx, 0) * 1px)) scale(calc(.94 + .06 * var(--d))); opacity: var(--d);
           background: rgba(10, 10, 10, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
           box-shadow: inset 0 0 0 1px #2E2E2E, 0 14px 36px rgba(0, 0, 0, .4); }
.mn__more, .mn__sheet { display: none; }

/* the hover: F2 · Index's scramble (sparks.js writes the cells) */
.spk { display: inline-block; width: 1ch; text-align: center; overflow: hidden; vertical-align: top;
       pointer-events: none; }   /* the pointer passes through to the word, which stays put while its letters are swapped
                                    every 100 ms, so a click mid-flip still lands (Calvin, 4 Nov: "should be clickable the whole time") */
.spk--o { box-shadow: inset 0 0 0 1px currentColor; border-radius: 2px; }
.spk--f { background: currentColor; border-radius: 2px; }
.spk--f > i { color: #000; font-style: normal; }
.spk > i { font-style: normal; }

/* phones: the words fit one row at the top; docked, they rise and fade and the capsule holds the lockup and Menu */
@media (max-width: 600px) {
  .mn__a { padding: 3px 0; font-size: 14px; opacity: calc(1 - var(--d) * 1.6); }
  .mn.is-docked .mn__a { visibility: hidden; }
  .mn.is-words-out .mn__a { pointer-events: none; }   /* menu.js: once they have faded out (d >= .625) */
  .mn__more { position: fixed; left: 0; top: 0; z-index: 63; display: block; height: 30px; margin: 0; padding: 0 13px; border: 0; border-radius: 999px; cursor: pointer;
              background: #EFEFEC; color: #000; font: 400 12px/30px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
              -webkit-tap-highlight-color: transparent;
              opacity: calc(var(--d) * 1.6 - .6); transform: translate(calc(var(--mmx, 0) * 1px), calc(var(--mmy, 0) * 1px)); }
  .mn:not(.is-more-in) .mn__more { pointer-events: none; }   /* menu.js: tappable as soon as it shows (d > .375), not only once docked */

  /* the open menu: a rounded panel drops from the capsule, on one 220 ms beat; the page under it stops scrolling */
  .mn__sheet { position: fixed; left: 12px; right: 12px; top: 72px; z-index: 80; display: flex; flex-direction: column; padding: 14px 20px 18px; border-radius: 24px;
               background: rgba(10, 10, 10, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
               box-shadow: inset 0 0 0 1px #2E2E2E, 0 20px 50px rgba(0, 0, 0, .4);
               opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.96); transform-origin: 85% 0;
               transition: opacity .22s cubic-bezier(.2, .8, .2, 1), transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s .22s; }
  .mn__sheet.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none;
                       transition: opacity .22s cubic-bezier(.2, .8, .2, 1), transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .mn__sheet a { padding: 12px 0; color: #F7F7F5; text-decoration: none; font: 400 24px/1.1 var(--font-body); letter-spacing: -.02em; box-shadow: inset 0 -1px 0 #2E2E2E; }
  .mn__sheet a:last-of-type { box-shadow: none; }
  .mn__close { align-self: flex-end; order: -1; margin: 0; padding: 4px 0 6px; border: 0; background: none; cursor: pointer;
               font: 400 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #8C8C8C; }
}
html.is-menu-open { overflow: hidden; }

/* Contact copies the email (Calvin, 4 Nov: "a chip show up on hover that says copy email"): menu.js adds the chip to any
   [data-copy]. It hangs under the word, clear of the capsule; "Email copied" once clicked. Touch: only the copied state. */
[data-copy]:not(.mn__a) { position: relative; }
.mn__chip { position: absolute; left: 50%; top: calc(100% + 16px); z-index: 70; padding: 7px 11px 6px; border-radius: 999px; white-space: nowrap; pointer-events: none;
            background: #F7F7F5; color: #000; font: 400 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
            box-shadow: 0 8px 24px rgba(0, 0, 0, .35); opacity: 0; transform: translate(-50%, -4px); transition: opacity .18s ease, transform .18s ease; }
[data-copy]:hover .mn__chip, [data-copy]:focus-visible .mn__chip, [data-copy].is-copied .mn__chip { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { [data-copy]:not(.is-copied) .mn__chip { opacity: 0; } }
.mn__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the pointer as an @ over anything that copies the email (menu.js moves it; Calvin, 4 Nov), as the films' play cursor.
   Hi-vis lime, and the word under it doesn't flip (Calvin, 4 Nov: "get rid of the flick on hover on contact -- since the
   cursor is changing, it's too much at once. have the cursor go hi-vis lime instead"); the dark halo keeps it on light ground */
/* not over a primary or a tertiary button: those keep the plain pointer (Calvin, 4 Nov: "on primary, no cursor switch to @";
   "tertiary -- flip, no cursor switch") */
@media (hover: hover) { [data-copy]:not(.bs-b--pri):not(.bs-b--ter) { cursor: none; } }
.at-cursor { position: fixed; left: 0; top: 0; z-index: 95; width: 40px; height: 40px; margin: -20px 0 0 -20px; display: grid; place-items: center; pointer-events: none;
             color: var(--lime, #D4F073); font: 500 26px/1 var(--font-body); letter-spacing: 0;
             text-shadow: 0 1px 8px rgba(0, 0, 0, .45), 0 0 2px rgba(0, 0, 0, .45);
             opacity: 0; transform: translate(-999px, -999px); transition: opacity .18s ease; }
.at-cursor.is-on { opacity: 1; }
@media (max-width: 600px) {
  .mn__sheet .mn__chip { position: static; display: inline-block; margin-left: 12px; vertical-align: 3px; transform: none; box-shadow: none; }
  .mn__sheet [data-copy]:not(.is-copied) .mn__chip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mn__chip { transition: none; } }

@media (prefers-reduced-motion: reduce) { .mn__a, .mn__mark { will-change: auto; } .mn__sheet { transition: none !important; } }