/* Circle menu. A full-screen menu that grows out of the round burger as a circle: closed, the overlay is clipped to
   a circle the size of the burger itself, centred on it; opening blows that circle out past the far corner on a
   bouncy curve, the links rise 8px out of a 2px blur one after another, and the extras (a button, a quiet link)
   fade in after them. Closing pulls the circle back into the burger on a calm curve while the overlay fades.
   part.js toggles .is-open, centres the circle on the burger (--cm-x / --cm-y / --cm-r0), numbers the items
   (--cm-i) and sets html.is-menu-open; this file is the motion. Numbers: Decimals' mobile menu (decimals.co).

   Markup:
   <button class="cm-burger" type="button" aria-controls="site-menu" aria-label="Open menu"><i></i><i></i></button>
   <div class="cm" id="site-menu">
     <nav class="cm__links"><a class="cm__link" href="...">...</a> ...</nav>
     <a class="cm__fade cm__cta" href="...">Get started</a>        (optional extras: fade only, after the links)
     <a class="cm__fade cm__small" href="...">Log in</a>
   </div>
   Keep the burger above the overlay (it is the close button too): the burger's bar sits over --cm-z. */

.cm {
  --cm-r0: 18px;                                   /* closed radius (part.js: half the burger's width) */
  --cm-r1: 142%;                                   /* open radius: 142% of the viewport's diagonal/sqrt2 = past every corner */
  --cm-x: calc(100% - 34px);                       /* circle centre (part.js: the burger's centre) */
  --cm-y: 36px;
  --cm-open-dur: 350ms;
  --cm-open-ease: cubic-bezier(.34, 1.25, .64, 1); /* overshoots ~2% past --cm-r1, out beyond the corners */
  --cm-close-dur: 250ms;
  --cm-close-ease: cubic-bezier(.22, 1, .36, 1);   /* Decimals' house ease */
  --cm-fade-in: .15s;                              /* overlay opacity on open (with the circle) */
  --cm-fade-out: .2s;                              /* ... and on close */
  --cm-rise: 8px;                                  /* links start this far down */
  --cm-blur: 2px;                                  /* ... and this blurred */
  --cm-item-dur: .3s;
  --cm-start: 50ms;                                /* first link's delay */
  --cm-step: 50ms;                                 /* each next link / extra */
  --cm-bg: rgba(237, 232, 225, .97);               /* near-opaque wash: no backdrop blur needed */
  --cm-fg: #4d4638;
  --cm-z: 40;
  position: fixed; inset: 0; z-index: var(--cm-z);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
  background: var(--cm-bg); color: var(--cm-fg);
  opacity: 0; visibility: hidden;
  clip-path: circle(var(--cm-r0) at var(--cm-x) var(--cm-y));
  /* closing: calm, and the fade runs alongside so it shrinks AND dissolves back into the burger */
  transition:
    clip-path var(--cm-close-dur) var(--cm-close-ease),
    opacity var(--cm-fade-out) ease,
    visibility .25s ease;
}
.cm.is-open {
  opacity: 1; visibility: visible;
  clip-path: circle(var(--cm-r1) at var(--cm-x) var(--cm-y));
  transition:
    clip-path var(--cm-open-dur) var(--cm-open-ease),
    opacity var(--cm-fade-in) ease;
}

.cm__links { display: flex; flex-direction: column; align-items: center; gap: 22px; }

/* links rise out of a blur; extras only fade. No delay on the base rules: closes never wait */
.cm__link {
  opacity: 0;
  transform: translateY(var(--cm-rise));
  filter: blur(var(--cm-blur));
  transition: opacity var(--cm-item-dur) ease, transform var(--cm-item-dur) ease, filter var(--cm-item-dur) ease;
}
.cm__fade { opacity: 0; transition: opacity var(--cm-item-dur) ease; }
.cm.is-open .cm__link { opacity: 1; transform: none; filter: blur(0); }
.cm.is-open .cm__fade { opacity: var(--cm-fade-to, 1); }
.cm.is-open :is(.cm__link, .cm__fade) { transition-delay: calc(var(--cm-start) + var(--cm-i, 0) * var(--cm-step)); }

/* the burger: two bars that cross into an X */
.cm-burger {
  --cm-bar: 14px;
  --cm-gap: 2.5px;                                 /* each bar sits this far off centre */
  position: relative;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid rgba(77, 70, 56, .25); border-radius: 999px;
  background: rgba(255, 253, 248, .55);
  cursor: pointer;
}
.cm-burger i {
  position: absolute; left: 50%; top: 50%;
  width: var(--cm-bar); height: 1.5px;
  background: currentColor;
  transition: transform .25s ease;
}
.cm-burger i:nth-child(1) { transform: translate(-50%, calc(-50% - var(--cm-gap))); }
.cm-burger i:nth-child(2) { transform: translate(-50%, calc(-50% + var(--cm-gap))); }
.cm-burger[aria-expanded="true"] i:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.cm-burger[aria-expanded="true"] i:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .cm, .cm.is-open, .cm__link, .cm__fade, .cm-burger i { transition: none; }
  .cm, .cm.is-open { clip-path: none; }
  .cm__link { filter: none; }
}