/* Corner menu card. A tall menu card that grows out of the corner the burger sits in: the page behind goes dark and
   soft under a blurred backdrop, the card scales up from 0 at its top-right corner, and its contents drop into place
   from 2rem above in groups, 100ms apart, starting only once the card has mostly landed (links at 300ms, then each
   next group, the close button last at 700ms). Closing fades the contents first while the card falls back into its
   corner on an accelerating curve, and the backdrop lets go last.
   part.js toggles .is-open / .is-closing, numbers the groups (--cmc-i) and sets html.is-menu-open; this file is the
   motion. Numbers: the Alture Webflow template's menu (IX2 a-8 open / a-20 close).

   Markup:
   <button class="cmc-burger" type="button" aria-controls="site-menu" aria-label="Open menu"><i></i><i></i></button>
   <div class="cmc" id="site-menu" role="dialog" aria-modal="true" aria-label="Menu">
     <div class="cmc__backdrop"></div>
     <div class="cmc__panel">
       <div class="cmc__card">
         <div class="cmc__content">
           <nav class="cmc__group"> links </nav>             (each .cmc__group drops in on its own beat)
           <div class="cmc__group"> socials </div>
           ...
         </div>
         <button class="cmc__close" type="button" aria-label="Close menu"> x </button>
       </div>
     </div>
   </div> */

.cmc {
  --cmc-ease-out: cubic-bezier(.215, .61, .355, 1);  /* Webflow outCubic: 1-(1-t)^3 */
  --cmc-ease-in: cubic-bezier(.55, .085, .68, .53);  /* Webflow inQuad: t^2 */
  --cmc-grow: 500ms;                                 /* card scale, open (outCubic) and close (inQuad) */
  --cmc-origin: 100% 0;                              /* the corner it grows from: top right */
  --cmc-card-fade: 200ms;                            /* card opacity 0 -> 1 as it starts to grow */
  --cmc-blur: 20px;                                  /* backdrop filter blur, tweened 0 -> 20px ... */
  --cmc-blur-dur: 250ms;                             /* ... over 250ms ease */
  --cmc-backdrop-blur: 15px;                         /* the backdrop's own static backdrop-filter */
  --cmc-backdrop: rgba(0, 0, 0, .3);
  --cmc-drop: -2rem;                                 /* groups start this far ABOVE their place */
  --cmc-move: 700ms;                                 /* group drop, outCubic */
  --cmc-fade: 350ms;                                 /* group fade in / out, ease */
  --cmc-start: 300ms;                                /* first group's delay */
  --cmc-step: 100ms;                                 /* each next group (the close button comes after the last) */
  --cmc-width: 50vw;
  --cmc-inset: .75rem;                               /* the gap round the card */
  --cmc-radius: 3rem;
  --cmc-bg: #fff;
  --cmc-fg: #111;
  --cmc-z: 99;
  position: fixed; inset: 0; z-index: var(--cmc-z);
  visibility: hidden;
}
.cmc.is-open, .cmc.is-closing { visibility: visible; }

.cmc__backdrop {
  position: absolute; inset: 0;
  background: var(--cmc-backdrop);
  -webkit-backdrop-filter: blur(var(--cmc-backdrop-blur)); backdrop-filter: blur(var(--cmc-backdrop-blur));
  filter: blur(0);
}
.cmc__panel {
  position: absolute; top: 0; right: 0;
  width: var(--cmc-width); height: 100%;
  padding: var(--cmc-inset); box-sizing: border-box;
}
.cmc__card {
  position: relative; height: 100%;
  border-radius: var(--cmc-radius); overflow: clip;
  background: var(--cmc-bg); color: var(--cmc-fg);
  transform-origin: var(--cmc-origin);
  transform: scale(0); opacity: 0;
}
.cmc__content {
  height: 100%; box-sizing: border-box; overflow: auto;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 2rem;
  padding: 2.25rem;
}
.cmc__group { opacity: 0; transform: translateY(var(--cmc-drop)); }
.cmc__close {
  position: absolute; top: 1rem; right: 1rem;
  width: 4rem; aspect-ratio: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: #f3f3f3; color: inherit; cursor: pointer;
  opacity: 0;
}
.cmc__close:hover { transform: scale(.9); }

/* closed: everything resets at once (it's hidden) */
.cmc__backdrop, .cmc__card, .cmc__group, .cmc__close { transition: none; }
.cmc__close { transition: transform .2s; }

/* open */
.cmc.is-open .cmc__backdrop { filter: blur(var(--cmc-blur)); transition: filter var(--cmc-blur-dur) ease; }
.cmc.is-open .cmc__card {
  transform: scale(1); opacity: 1;
  transition: transform var(--cmc-grow) var(--cmc-ease-out), opacity var(--cmc-card-fade) ease;
}
.cmc.is-open .cmc__group {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--cmc-fade) ease, transform var(--cmc-move) var(--cmc-ease-out);
  transition-delay: calc(var(--cmc-start) + var(--cmc-i, 0) * var(--cmc-step));
}
.cmc.is-open .cmc__close {
  opacity: 1;
  transition: opacity var(--cmc-fade) ease calc(var(--cmc-start) + var(--cmc-i, 4) * var(--cmc-step)), transform .2s;
}

/* closing: contents fade where they are, the card falls back into its corner (accelerating), it and the backdrop
   fade over the last part */
.cmc.is-closing .cmc__backdrop {
  filter: blur(var(--cmc-blur)); opacity: 0;
  transition: opacity 200ms ease 300ms;
}
.cmc.is-closing .cmc__card {
  transform: scale(0); opacity: 0;
  transition: transform var(--cmc-grow) var(--cmc-ease-in), opacity 300ms ease 300ms;
}
.cmc.is-closing .cmc__group { opacity: 0; transform: translateY(0); transition: opacity var(--cmc-fade) ease; }
.cmc.is-closing .cmc__close { opacity: 0; transition: opacity var(--cmc-fade) ease; }

/* the burger: two plain lines (the card covers it; the card's own close button is the X) */
.cmc-burger {
  width: 3.5rem; height: 2.5rem; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .375rem;
  border: 0; border-radius: .5rem; background: none; color: inherit; cursor: pointer;
}
.cmc-burger i { display: block; width: 2.25rem; height: 2px; background: currentColor; }

@media (max-width: 991px) {
  .cmc { --cmc-width: 100vw; --cmc-radius: 1.5rem; }
}
@media (max-width: 767px) {
  .cmc { --cmc-radius: 1.25rem; }
  .cmc__close { width: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cmc .cmc__backdrop, .cmc .cmc__card, .cmc .cmc__group, .cmc .cmc__close { transition-duration: 1ms !important; transition-delay: 0s !important; }
}