/* Spread drawer menu - the sheet under the bar, its fill, the two spacings, and the burger <-> X crossfade.
   Keep your bar above the sheet (z-index > --sdm-z). Measured defaults: bar 64px, list gap 6px closed / 18px open,
   padding 24px 20px 36px closed / 40px bottom open (sundaetruck.framer.website). */
.sdm {
  --sdm-top: 64px; --sdm-gap-closed: 6px; --sdm-gap: 18px; --sdm-bg: #24160f; --sdm-z: 49; --sdm-side: 20px;
  position: fixed; left: 0; right: 0; top: var(--sdm-top); bottom: 0; z-index: var(--sdm-z);
  display: flex; flex-direction: column; gap: var(--sdm-gap-closed); padding: 24px var(--sdm-side) 36px;
  overflow: hidden auto; overscroll-behavior: contain;
}
.sdm[hidden] { display: none; }
.sdm.is-open { gap: var(--sdm-gap); padding-bottom: 40px; }
.sdm__fill { position: absolute; inset: 0; z-index: -1; background: var(--sdm-bg); transform-origin: 50% 0; pointer-events: none; }
.sdm { isolation: isolate; }
.sdm__list { display: flex; flex-direction: column; align-items: flex-start; gap: inherit; }
.sdm__item { will-change: transform; }
html.is-menu-open { overflow: hidden; }

/* burger: two icons crossfade on the menu's spring timing (Framer swaps the icon variant, ~.4s) */
.sdm-burger { position: relative; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.sdm-burger::before, .sdm-burger::after { content: ""; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; transition: opacity .4s cubic-bezier(.16,1,.3,1); background: currentColor; }
.sdm-burger::before { -webkit-mask: var(--sdm-icon-menu) center / contain no-repeat; mask: var(--sdm-icon-menu) center / contain no-repeat; }
.sdm-burger::after { opacity: 0; -webkit-mask: var(--sdm-icon-close) center / contain no-repeat; mask: var(--sdm-icon-close) center / contain no-repeat; }
.sdm-burger[aria-expanded="true"]::before { opacity: 0; }
.sdm-burger[aria-expanded="true"]::after { opacity: 1; }
.sdm-burger {
  --sdm-icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --sdm-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .sdm-burger::before, .sdm-burger::after { transition: none; } }