/* The phone menu, shared by every page (loaded after each page's own styles, so it takes over from them).
   The button: two glass slivers, the same shard as the arrows on the site, with a small splinter beside them; tapped,
   the slivers snap into a cross like the sigil's blades.
   The menu: a slanted edge sweeps across from the right with a thin line of light riding on it, uncovering the
   footer's painting, which drifts in a little and comes into focus under the film grain; the four words come in one
   after another, each drawing its line beneath. Closing, the edge sweeps back to the right, light and all.
   A word tapped only melts the menu away (the script). */

/* ---------- the button ---------- */
.menu-btn {
  display: none; place-items: center; width: 44px; height: 44px; padding: 0; margin: -8px -7px -8px 0;
  color: var(--silver); -webkit-tap-highlight-color: transparent; letter-spacing: 0; text-shadow: none;
}
.mb-ico { width: 30px; height: 18px; overflow: visible; filter: drop-shadow(0 0 6px rgba(200, 194, 245, 0.45)); transition: filter .5s ease; }
.mb-ico polygon { fill: url(#mbG); }
.mb-a, .mb-b, .mb-bit { transition: transform .5s cubic-bezier(.7, -0.6, .25, 1.6), opacity .3s ease; }   /* a snap, not a turn */
.mb-a { transform: translate(15px, 5px); }
.mb-b { transform: translate(18.6px, 12.6px) scale(.74, 1); transition-delay: .04s; }
.mb-bit { transform: translate(3.4px, 12.6px); transform-box: fill-box; transform-origin: center; opacity: .75; }
.menu-open .mb-a { transform: translate(15px, 9px) rotate(45deg) scale(.86); }
.menu-open .mb-b { transform: translate(15px, 9px) rotate(-45deg) scale(.86); }
.menu-open .mb-bit { transform: translate(3.4px, 12.6px) scale(0) rotate(90deg); opacity: 0; }
.menu-open .mb-ico { filter: drop-shadow(0 0 9px rgba(225, 220, 255, 0.8)); }
@media (hover: hover) {
  .menu-btn:hover .mb-ico { filter: drop-shadow(0 0 9px rgba(225, 220, 255, 0.8)); }
  .topbar:not(.menu-open) .menu-btn:hover .mb-b { transform: translate(15px, 12.6px) scale(1); }
}

.mn-fx, .mn-flash { display: none; }

@media (max-width: 640px) {
  .topbar { padding-right: calc(var(--gutter) + 6px); }   /* the button keeps clear of the screen's edge */
  .menu-btn { display: grid; margin-left: 0.7rem; }

  /* ---------- the panel: a slanted edge sweeps across from the right (closing, back to the right) ----------
     The edge leans 20° (its top 36.4vh further right than its foot); the light line rides exactly on it. */
  .topnav, .topbar.menu-open .topnav { -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; transform: none; }
  .topnav {
    background: #0a0a10; visibility: hidden; will-change: clip-path;
    clip-path: polygon(calc(100% + 36.4vh) 0, calc(200% + 40vh) 0, calc(200% + 40vh) 100%, 100% 100%);
    transition: clip-path .6s cubic-bezier(.65, 0, .35, 1), visibility 0s linear .6s;
  }
  .topbar.menu-open .topnav {
    visibility: visible;
    clip-path: polygon(0 0, calc(200% + 40vh) 0, calc(200% + 40vh) 100%, -36.4vh 100%);
    transition: clip-path .8s cubic-bezier(.77, 0, .18, 1), visibility 0s;
  }
  /* the light line along the edge: only while it sweeps */
  .mn-flash { display: block; position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0; }
  .mn-flash i {
    position: absolute; left: 0; top: 0; height: 100%; width: 1.5px; transform-origin: 0 100%;
    background: linear-gradient(transparent, rgba(244, 242, 255, 0.95) 22%, #fff 50%, rgba(244, 242, 255, 0.95) 78%, transparent);
    box-shadow: 0 0 10px 1px rgba(210, 204, 255, 0.75), 0 0 28px 2px rgba(200, 194, 245, 0.35);
    transform: translateX(100vw) skewX(-20deg);
    transition: transform .6s cubic-bezier(.65, 0, .35, 1);
  }
  .menu-open .mn-flash i { transform: translateX(-36.4vh) skewX(-20deg); transition: transform .8s cubic-bezier(.77, 0, .18, 1); }
  .menu-open .mn-flash { animation: mn-flash-in .8s linear both; }
  .menu-closing .mn-flash { animation: mn-flash-out .6s linear both; }
  @keyframes mn-flash-in { 0% { opacity: 0; } 6% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; } }
  @keyframes mn-flash-out { 0% { opacity: 0; } 8% { opacity: .9; } 75% { opacity: .8; } 100% { opacity: 0; } }
  /* a word tapped (the script): on this page the whole menu melts away, to another page only the words go out */
  .topbar.menu-open.menu-leaving .topnav { opacity: 0; transition: opacity .3s ease; }
  .topbar.menu-open.menu-going .topnav a { opacity: 0; filter: blur(6px); transition: opacity .25s ease, filter .25s ease; }
  .topbar.menu-instant .topnav, .topbar.menu-instant .topnav *, .topbar.menu-instant .mn-flash, .topbar.menu-instant .mn-flash i, .topbar.menu-instant .topnav *::after { transition: none !important; animation: none !important; }

  /* ---------- the words: they come in from the right a beat after the panel, one after another ---------- */
  .topnav a {
    position: relative; letter-spacing: 0.3em;
    opacity: 0; filter: blur(6px); transform: translate3d(2.2em, 0, 0);
    transition: opacity .2s ease, filter .2s ease, transform .3s ease, letter-spacing .3s ease, color .3s ease, text-shadow .3s ease;
  }
  .topbar.menu-open .topnav a {
    --w: calc(.32s + var(--i, 0) * .07s);
    letter-spacing: 0.2em; opacity: 1; filter: blur(0); transform: none;
    transition: opacity .6s ease var(--w), filter .8s cubic-bezier(.2, .7, .1, 1) var(--w), transform 1s cubic-bezier(.16, .84, .3, 1) var(--w),
      letter-spacing 1.1s cubic-bezier(.2, .7, .1, 1) var(--w), color .3s ease, text-shadow .3s ease;
  }
  .topnav a::after {   /* a fine line under the word, opening from its middle */
    content: ""; position: absolute; left: 50%; right: calc(50% + 0.2em); bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(236, 235, 243, 0.8), transparent);
    opacity: 0; transition: left .2s ease, right .2s ease, opacity .2s ease;
  }
  .topbar.menu-open .topnav a::after {
    left: 22%; right: calc(22% + 0.2em); opacity: .4;
    transition: left 1s cubic-bezier(.2, .7, .1, 1) calc(var(--w) + .3s), right 1s cubic-bezier(.2, .7, .1, 1) calc(var(--w) + .3s), opacity .6s ease calc(var(--w) + .3s);
  }
  .topbar.menu-open .topnav a[aria-current]::after { left: 6%; right: calc(6% + 0.2em); opacity: .9; }
  .topnav a:active, .topnav a:focus-visible { color: #fff; text-shadow: var(--glow-text); outline: none; }

  /* ---------- behind the words ---------- */
  .mn-fx { display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

  /* the painting from the footer: it drifts in a little from the right as the edge sweeps over it (so it seems
     further away) and comes into focus; closing, it stays whole until the edge has passed */
  .mn-art { position: absolute; inset: 0; overflow: hidden; will-change: transform, filter;
    transform: translate3d(18%, 0, 0) scale(1.12); filter: blur(10px);
    transition: transform .6s cubic-bezier(.65, 0, .35, 1), filter .5s ease; }
  .menu-open .mn-art { transform: none; filter: blur(0);
    transition: transform 1.1s cubic-bezier(.77, 0, .18, 1), filter 1.1s cubic-bezier(.3, .6, .2, 1) .15s; }
  .mn-art i {
    position: absolute; inset: -3%;
    background: url("foot-bg.jpg") 12% 50% / auto 100% no-repeat;
    animation: mn-pan 38s ease-in-out infinite alternate; animation-play-state: paused;
  }
  .menu-open .mn-art i { animation-play-state: running; }
  @keyframes mn-pan { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(2%, -1.2%, 0); } }
  .mn-art::after {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 78% 36% at 50% 50%, rgba(8, 8, 13, 0.8), rgba(8, 8, 13, 0.35) 100%),
      linear-gradient(rgba(8, 8, 13, 0.75), rgba(8, 8, 13, 0) 18%, rgba(8, 8, 13, 0) 82%, rgba(8, 8, 13, 0.6));
  }

  /* the film grain of the rest of the site, the tile twice over so it reads over the dark painting */
  .mn-grain {
    position: absolute; inset: -64px; background-size: 192px 192px; background-position: 0 0, 101px 67px;
    animation: grain 0.42s steps(1) infinite; animation-play-state: paused;
  }
  .menu-open .mn-grain, .menu-closing .mn-grain { animation-play-state: running; }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .topnav, .topbar.menu-open .topnav { transform: none; opacity: 0; transition: opacity .3s ease, visibility 0s linear .3s; }
  .topbar.menu-open .topnav { opacity: 1; transition: opacity .3s ease, visibility 0s; }
  .topnav { clip-path: none !important; }
  .mn-flash { display: none !important; }
  .topnav a, .topbar.menu-open .topnav a { filter: none; transform: none; letter-spacing: 0.2em; transition: opacity .3s ease; }
  .mn-art, .menu-open .mn-art { transform: none; filter: none; transition: none; }
  .mn-art i, .mn-grain { animation: none; }
  .mb-a, .mb-b, .mb-bit { transition: none; }
}