/* Phone menu rise. The burger turns into an X and a full-screen sheet is simply there; on it the links rise 20px
   into place one after another, a hairline draws out under each link a beat after it lands, and the contact card
   rises last. Closing is instant. Numbers measured on the live Sadewa template (Framer), 390 x 844.
   Markup:
     <button class="pmr-burger" aria-controls="menu" aria-expanded="false" aria-label="Open menu"></button>
     <div class="pmr" id="menu" aria-hidden="true">
       <nav class="pmr__links"> <a class="pmr__link">...</a> ... </nav>     (part.js puts a rule between links)
       <div class="pmr__card"> ... </div>                                   (optional)
     </div> */

/* Framer spring, bounce 0: critically damped, time constant 86ms over an .8s window (fitted to the live page, squared
   error .0001); the burger uses the same shape over .4s */
.pmr, .pmr-burger {
  --pmr-ease: linear(0, .0232 2.5%, .0798 5%, .155 7.5%, .2386 10%, .3239 12.5%, .4066 15%, .484 17.5%, .5549 20%, .6186 22.5%, .675 25%, .7244 27.5%, .7673 30%, .8043 32.5%, .8359 35%, .8629 37.5%, .8857 40%, .905 42.5%, .9211 45%, .9347 47.5%, .946 50%, .9555 52.5%, .9633 55%, .9698 57.5%, .9752 60%, .9797 62.5%, .9833 65%, .9864 67.5%, .9888 70%, .9909 72.5%, .9926 75%, .9939 77.5%, .9951 80%, .996 82.5%, .9967 85%, .9973 87.5%, .9978 90%, .9982 92.5%, .9986 95%, .9988 97.5%, 1);
}

.pmr {
  --pmr-dur: .8s;                       /* rise + fade window per item */
  --pmr-rise: 20px;                     /* each item comes up this far */
  --pmr-first: 120ms;                   /* sheet shown -> first link starts */
  --pmr-stagger: 100ms;                 /* link to link, last link to card */
  --pmr-rule-lag: 305ms;                /* a link starts -> the rule under it starts drawing */
  --pmr-rule-dur: 1s;
  --pmr-rule-ease: cubic-bezier(.4, 0, .2, 1);
  --pmr-close: 0s;                      /* Sadewa: gone at once; set e.g. .35s for a fade-out */
  --pmr-top: 95px;                      /* room for the bar: 72px nav + 23px */
  --pmr-side: 20px;
  --pmr-gap: 40px;                      /* link -> rule -> link */
  --pmr-bg: #fff;
  --pmr-line: #e5e5e5;
  --pmr-z: 49;                          /* keep your nav bar (burger + logo) above it */

  position: fixed; inset: 0; z-index: var(--pmr-z);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--pmr-top) var(--pmr-side) 15px;
  background: var(--pmr-bg);
  overflow: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0;
  transition: opacity var(--pmr-close) linear, visibility 0s linear var(--pmr-close);
}
.pmr.is-open { visibility: visible; opacity: 1; transition: none; }

.pmr__links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pmr-gap); padding-bottom: 40px; }
.pmr__links > .pmr__link { align-self: flex-start; }

/* items wait 20px low and invisible; opening plays them in on the stagger, closing snaps them back unseen */
.pmr__link, .pmr__card { opacity: 0; transform: translateY(var(--pmr-rise)); }
.pmr__rule {
  display: block; align-self: stretch; height: 1px; flex: none;
  background: var(--pmr-line);
  transform: scaleX(0); transform-origin: 0 50%;   /* Sadewa animates width 0 -> 100%; scaleX draws the same line */
}
.pmr.is-open .pmr__link, .pmr.is-open .pmr__card,
.pmr.is-closing .pmr__link, .pmr.is-closing .pmr__card { opacity: 1; transform: none; }
.pmr.is-open .pmr__rule, .pmr.is-closing .pmr__rule { transform: none; }
.pmr.is-open .pmr__link, .pmr.is-open .pmr__card {
  transition: opacity var(--pmr-dur) var(--pmr-ease), transform var(--pmr-dur) var(--pmr-ease);
  transition-delay: calc(var(--pmr-first) + var(--pmr-i, 0) * var(--pmr-stagger));
}
.pmr.is-open .pmr__rule {
  transition: transform var(--pmr-rule-dur) var(--pmr-rule-ease);
  transition-delay: calc(var(--pmr-first) + var(--pmr-rule-lag) + var(--pmr-i, 0) * var(--pmr-stagger));
}

/* burger -> X. "fade" (Sadewa): the bars fade out as the X fades in, .4s on the same spring shape.
   "morph" (data-pmr-burger="morph" on the button): outer bars swing to +-45deg on the middle line, middle bar fades. */
.pmr-burger {
  --pmr-icon-dur: .4s;
  --pmr-icon-ink: currentColor;
  position: relative; width: 40px; height: 40px; flex: none;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
}
.pmr-burger__icon { position: absolute; inset: 0; transition: opacity var(--pmr-icon-dur) var(--pmr-ease, ease-out); }
.pmr-burger i { position: absolute; left: 10px; width: 20px; height: 2px; border-radius: 2px; background: var(--pmr-icon-ink); }
.pmr-burger__bars i:nth-child(1) { top: 13px; } .pmr-burger__bars i:nth-child(2) { top: 19px; } .pmr-burger__bars i:nth-child(3) { top: 25px; }
.pmr-burger__x i { top: 19px; } .pmr-burger__x i:nth-child(1) { transform: rotate(45deg); } .pmr-burger__x i:nth-child(2) { transform: rotate(-45deg); }
.pmr-burger__x { opacity: 0; }
.pmr-burger[aria-expanded="true"] .pmr-burger__bars { opacity: 0; }
.pmr-burger[aria-expanded="true"] .pmr-burger__x { opacity: 1; }
.pmr-burger[data-pmr-burger="morph"] .pmr-burger__x { display: none; }
.pmr-burger[data-pmr-burger="morph"] .pmr-burger__bars { opacity: 1; }
.pmr-burger[data-pmr-burger="morph"] .pmr-burger__bars i { transition: transform .45s var(--pmr-ease, ease-out), top .45s var(--pmr-ease, ease-out), opacity .3s; }
.pmr-burger[data-pmr-burger="morph"][aria-expanded="true"] .pmr-burger__bars i:nth-child(1) { top: 19px; transform: rotate(45deg); }
.pmr-burger[data-pmr-burger="morph"][aria-expanded="true"] .pmr-burger__bars i:nth-child(2) { opacity: 0; }
.pmr-burger[data-pmr-burger="morph"][aria-expanded="true"] .pmr-burger__bars i:nth-child(3) { top: 19px; transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .pmr.is-open .pmr__link, .pmr.is-open .pmr__card, .pmr.is-open .pmr__rule,
  .pmr-burger__icon, .pmr-burger i { transition-duration: 1ms !important; transition-delay: 0s !important; }
}