/* Glass menu drop: a dark frosted panel drops 8px out from under the nav bar while it fades in (heavy 500/80/3
   spring), then its links come into focus one by one (blur 1px -> 0, 8px rise, fade) on a long 1.8 s no-bounce
   spring, 50ms apart. Closing is instant (Ripe unmounts the panel). Behaviour in part.js.

   Markup: .gmd (your fixed header) > .gmd__bar (holds button.gmd__toggle[aria-controls]) + nav.gmd__panel#id[hidden]
   > a.gmd__link ...   (part.js adds a .gmd__scrim click-catcher if you have none)

   Knobs (on .gmd or :root):
     --gmd-drop        panel start offset (-8px: it drops down from the bar)
     --gmd-panel-dur   panel drop + fade (790ms = the 500/80/3 spring settling)
     --gmd-panel-ease  that spring as linear() (36% at 100 ms, 72% at 200 ms, 89% at 300 ms)
     --gmd-rise        link start offset (8px below)
     --gmd-blur        link start blur (1px)
     --gmd-link-dur    link focus-in (1800ms: spring 1.8 s bounce 0)
     --gmd-link-ease   that spring as linear() (27% at 200 ms, 46% at 300 ms, 81% at 600 ms)
     --gmd-first       first link delay (200ms)  --gmd-step  link-to-link (50ms)
     --gmd-glass       panel backdrop blur (32px)  --gmd-bg  panel colour (rgba(8,18,16,.88))  --gmd-radius (16px)
     --gmd-gap         panel to bar (8px)  --gmd-pad  panel padding (32px)  --gmd-link-gap  between links (24px) */
.gmd {
  --gmd-drop: -8px;
  --gmd-panel-dur: 790ms;
  --gmd-panel-ease: linear(0, 0.013, 0.046, 0.092, 0.147, 0.206, 0.267, 0.328, 0.387, 0.444, 0.497, 0.547, 0.593, 0.635, 0.674, 0.709, 0.741, 0.769, 0.795, 0.818, 0.839, 0.858, 0.874, 0.889, 0.902, 0.913, 0.923, 0.933, 0.941, 0.948, 0.954, 0.959, 0.964, 0.969, 0.972, 0.976, 0.979, 0.981, 0.984, 0.986, 0.987, 0.989, 0.99, 0.991, 0.992, 0.993, 0.994, 0.995, 0.996, 0.996, 0.997, 0.997, 0.997, 0.998, 0.998, 0.998, 0.998, 0.999, 0.999, 0.999, 1);
  --gmd-rise: 8px;
  --gmd-blur: 1px;
  --gmd-link-dur: 1800ms;
  --gmd-link-ease: linear(0, 0.011, 0.039, 0.079, 0.127, 0.18, 0.236, 0.293, 0.349, 0.403, 0.455, 0.505, 0.551, 0.594, 0.634, 0.671, 0.705, 0.736, 0.764, 0.789, 0.812, 0.833, 0.852, 0.868, 0.883, 0.897, 0.909, 0.919, 0.929, 0.937, 0.944, 0.951, 0.957, 0.962, 0.967, 0.971, 0.974, 0.977, 0.98, 0.983, 0.985, 0.987, 0.988, 0.99, 0.991, 0.992, 0.993, 0.994, 0.995, 0.995, 0.996, 0.997, 0.997, 0.997, 0.998, 0.998, 0.998, 0.998, 0.999, 0.999, 1);
  --gmd-first: 200ms;
  --gmd-step: 50ms;
  --gmd-glass: 32px;
  --gmd-bg: rgba(8, 18, 16, .88);
  --gmd-ink: #fff7eb;
  --gmd-radius: 16px;
  --gmd-gap: 8px;
  --gmd-pad: 32px;
  --gmd-link-gap: 24px;
}
@supports not (transition-timing-function: linear(0, 1)) {
  .gmd { --gmd-panel-ease: cubic-bezier(.22, 1, .36, 1); --gmd-link-ease: cubic-bezier(.22, 1, .36, 1); }
}

.gmd__bar { position: relative; z-index: 2; }
.gmd__panel {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gmd-link-gap);
  margin-top: var(--gmd-gap); padding: var(--gmd-pad);
  border-radius: var(--gmd-radius); background: var(--gmd-bg); color: var(--gmd-ink);
  -webkit-backdrop-filter: blur(var(--gmd-glass)); backdrop-filter: blur(var(--gmd-glass));
  /* waiting state: shown but not yet open (one frame), and the state it snaps back to on close */
  opacity: 0; transform: translateY(var(--gmd-drop));
}
.gmd__panel[hidden] { display: none; }
.gmd__panel.is-open {
  opacity: 1; transform: none;
  transition: opacity var(--gmd-panel-dur) var(--gmd-panel-ease), transform var(--gmd-panel-dur) var(--gmd-panel-ease);
}
.gmd__link { opacity: 0; filter: blur(var(--gmd-blur)); transform: translateY(var(--gmd-rise)); }
.gmd__panel.is-open .gmd__link {
  opacity: 1; filter: blur(0); transform: none;
  transition: opacity var(--gmd-link-dur) var(--gmd-link-ease), filter var(--gmd-link-dur) var(--gmd-link-ease), transform var(--gmd-link-dur) var(--gmd-link-ease);
  transition-delay: calc(var(--gmd-first) + var(--gmd-i, 0) * var(--gmd-step));
}
/* everything under the bar and panel catches the outside tap that closes it (Ripe's full-viewport "Disable Dropdown") */
.gmd__scrim { position: fixed; inset: 0; z-index: 1; cursor: pointer; }
.gmd__scrim[hidden] { display: none; }

/* toggle icon: bars <-> X swap at once (Ripe swaps the icon with the variant) */
.gmd__toggle .gmd__x, .gmd__toggle[aria-expanded="true"] .gmd__bars { display: none; }
.gmd__toggle[aria-expanded="true"] .gmd__x { display: block; }

@media (prefers-reduced-motion: reduce) {
  .gmd__panel.is-open, .gmd__panel.is-open .gmd__link { transition: none; }
}