/* Drop card menu (transition). Measured from Daemon, a Framer agency template (teardown 10-05), rewritten.
   The burger opens a small 260px light card pinned to it: the card hangs 19px past the burger's right edge, its top
   19px above the burger's, so its close X lands right where the burger was. It drops in from 522px above on a stiff
   spring (stiffness 400 / damping 53) and goes back up the same way; the page does not dim and keeps scrolling.
   Markup and API: part.js header. */
.dcm {
  --dcm-w: 260px;
  --dcm-ink: #111;
  --dcm-rule: rgba(0, 0, 0, 0.1);
  --dcm-bg: linear-gradient(132deg, #fff 0%, rgb(222, 222, 222) 162%);
  --dcm-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  --dcm-social-bg: rgb(199, 199, 199);
  --dcm-social-on: #111;
  --dcm-font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* .4 s / bounce .2 (Framer's default): social cells and the link arrow */
  --dcm-snap: linear(0, 0.0224, 0.0794, 0.1581, 0.2486, 0.3435, 0.4375, 0.5269, 0.6093, 0.6833, 0.7484, 0.8044, 0.8518, 0.8911, 0.9231, 0.9487, 0.9688, 0.9841, 0.9954, 1.0036, 1.0091, 1.0125, 1.0144, 1.0151, 1.015, 1.0142, 1.0131, 1.0118, 1.0104, 1.0089, 1.0076, 1.0063, 1.0051, 1.0041, 1.0032, 1.0024, 1.0018, 1.0013, 1.0009, 1.0006, 1);
  /* stiffness 400 / damping 30 (settles 460 ms, 2.8% overshoot): the link label's slide */
  --dcm-slide: linear(0, 0.0181, 0.0653, 0.1325, 0.2121, 0.2982, 0.3862, 0.4726, 0.5547, 0.6308, 0.7, 0.7615, 0.8153, 0.8616, 0.9006, 0.9329, 0.9592, 0.98, 0.9962, 1.0083, 1.0169, 1.0228, 1.0263, 1.028, 1.0283, 1.0276, 1.0261, 1.0241, 1.0218, 1.0193, 1.0168, 1.0144, 1.0121, 1.01, 1.0081, 1.0064, 1.0049, 1.0036, 1.0026, 1.0017, 1.001, 1.0004, 1, 0.9997, 0.9995, 0.9993, 1);
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;                      /* only the catcher and the card take clicks */
}
.dcm[hidden] { display: none; }
@supports not (transition-timing-function: linear(0, 1)) { .dcm { --dcm-snap: cubic-bezier(.3, 1.3, .5, 1); --dcm-slide: cubic-bezier(.3, 1.3, .5, 1); } }

/* a transparent full-screen catcher behind the card: a click anywhere off the card closes it; wheel still scrolls */
.dcm__catch { position: absolute; inset: 0; pointer-events: auto; }

.dcm__card {
  position: absolute;                        /* left/top set by part.js from the burger's box */
  width: var(--dcm-w);
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--dcm-bg);
  box-shadow: var(--dcm-shadow);
  color: var(--dcm-ink);
  overflow: hidden;
  pointer-events: auto;
  will-change: transform;
}
.dcm__card:focus { outline: none; }

/* header row: logo cell + a square close box, hairline between and under them */
.dcm__head { display: flex; border-bottom: 1px solid var(--dcm-rule); }
.dcm__logo {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 16px;
  color: inherit;
  text-decoration: none;
  font: 800 18px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.04em;
}
.dcm__close {
  position: relative;
  flex: 0 0 62px;
  align-self: stretch;
  border: 0;
  border-left: 1px solid var(--dcm-rule);
  background: none;
  cursor: pointer;
  padding: 0;
}
.dcm__close::before, .dcm__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 25px;
  height: 3px;
  margin: -1.5px 0 0 -12.5px;
  background: var(--dcm-ink);
  rotate: 45deg;
}
.dcm__close::after { rotate: -45deg; }
.dcm__close:focus-visible, .dcm__link:focus-visible, .dcm__social a:focus-visible { outline: 2px solid var(--dcm-ink); outline-offset: -2px; }

/* links: mono caps; hover slides the label 20px right while a small pixel chevron slides in from the left edge */
.dcm__links { display: flex; flex-direction: column; padding: 16px 20px 20px; }
.dcm__link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  font: 400 13px/1.6 var(--dcm-font);
  text-transform: uppercase;
}
.dcm__link > span { transition: translate 460ms var(--dcm-slide) 50ms; }
.dcm__link::before {                          /* 4 squares in a > : Daemon's 8 x 12.6 pixel arrow */
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 12.6px;
  margin-top: -6.3px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 3.4px 3.4px,
    linear-gradient(currentColor, currentColor) 0 4.6px / 3.4px 3.4px,
    linear-gradient(currentColor, currentColor) 0 9.2px / 3.4px 3.4px,
    linear-gradient(currentColor, currentColor) 4.6px 4.6px / 3.4px 3.4px;
  background-repeat: no-repeat;
  translate: -10px 0;
  transition: translate 400ms var(--dcm-snap);
}
@media (hover: hover) {
  .dcm__link:hover > span { translate: 20px 0; }
  .dcm__link:hover::before { translate: 3px 0; }
  .dcm__social a:hover { background: var(--dcm-social-on); color: #fff; }
}
.dcm__link:focus-visible > span { translate: 20px 0; }
.dcm__link:focus-visible::before { translate: 3px 0; }

/* a band of square icon cells on grey, hairlines between them; hover fills a cell with ink */
.dcm__social { display: flex; }
.dcm__social a {
  flex: 1 1 0;
  height: 61px;
  display: grid;
  place-items: center;
  background: var(--dcm-social-bg);
  border-top: 1px solid var(--dcm-rule);
  border-right: 1px solid var(--dcm-rule);
  color: var(--dcm-ink);
  transition: background-color 400ms var(--dcm-snap), color 400ms var(--dcm-snap);
}
.dcm__social a:last-child { border-right: 0; }
.dcm__social svg { width: 20px; height: 20px; }

/* the burger that opens it (bring your own; this is Daemon's: 25 x 20, three 3px bars) */
.dcm-burger {
  width: 25px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  align-content: space-between;
  cursor: pointer;
}
.dcm-burger > i { display: block; height: 3px; background: currentColor; }