/* Corner grow menu: a small square button in a corner that grows into a dark panel of links.
   Measured from the Moka Framer template's burger (cafe-moka.framer.website, Menu component):
   desktop 40x40 -> 228x220, phone 40x40 -> 287x240, one .3s tween on cubic-bezier(.44,0,.56,1) for everything.
   The panel is laid out at its full size the whole time and revealed by a clip that starts as the button's own
   square in the anchor corner; the links ride the growing box's top-left corner (translated from the old corner
   to the new, never scaled), and the button never moves.
   Markup: <nav class="cgm" data-cgm-corner="top-right">
             <button class="cgm__btn" aria-label="Menu"><span class="cgm__dot"></span></button>
             <div class="cgm__panel"><ul class="cgm__links"><li><a href="#">...</a></li>...</ul></div>
           </nav>
   Position .cgm yourself (fixed/absolute in a corner); the panel grows out of the same corner of it. */
.cgm {
  --cgm-size: 40px;                          /* the button */
  --cgm-radius: 8px;                         /* button + panel corners */
  --cgm-w: 228px;                            /* open panel width (desktop) */
  --cgm-w-phone: 287px;                      /* open panel width (<= 809px, Framer's phone breakpoint) */
  --cgm-pad: 24px;                           /* links block padding */
  --cgm-gap: 8px;                            /* between links */
  --cgm-link-size: 20px;                     /* link type (desktop) */
  --cgm-link-size-phone: 24px;               /* link type (phone) */
  --cgm-track: 2px;                          /* link letter-spacing */
  --cgm-font: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", system-ui, sans-serif;
  --cgm-dur: .3s;
  --cgm-ease: cubic-bezier(.44, 0, .56, 1);
  --cgm-fill: #362618;                       /* open panel + open button */
  --cgm-fill-closed: transparent;            /* panel colour at the start of the grow (phone: the fill itself) */
  --cgm-ink: #ffffa8;                        /* links + open dot */
  --cgm-btn: #ffffa8;                        /* closed button */
  --cgm-btn-open: var(--cgm-fill);
  --cgm-dot: 8px;                            /* closed dot */
  --cgm-dot-open: 24px;                      /* open dot */
  --cgm-dot-color: var(--cgm-fill);
  --cgm-dot-color-open: var(--cgm-ink);
  --cgm-vis-delay: 0s;                       /* set by data-cgm-close="ride" */
  position: relative;
  width: var(--cgm-size);
  height: var(--cgm-size);
  z-index: 50;
}

/* the button: sits in its corner for good, above the panel */
.cgm__btn {
  position: absolute; inset: 0;
  z-index: 2;
  margin: 0; padding: 0; border: 0;
  border-radius: var(--cgm-radius);
  background: var(--cgm-btn);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--cgm-dur) var(--cgm-ease);
}
.cgm__dot {
  position: absolute; left: 50%; top: 50%;
  width: var(--cgm-dot); height: var(--cgm-dot);
  border-radius: 50%;
  background: var(--cgm-dot-color);
  translate: -50% -50%;
  transition: width var(--cgm-dur) var(--cgm-ease), height var(--cgm-dur) var(--cgm-ease),
    background-color var(--cgm-dur) var(--cgm-ease);
}
.cgm__btn:focus-visible { outline: 2px solid var(--cgm-ink); outline-offset: 3px; }
.cgm.is-open .cgm__btn { background: var(--cgm-btn-open); }
.cgm.is-open .cgm__dot { width: var(--cgm-dot-open); height: var(--cgm-dot-open); background: var(--cgm-dot-color-open); }

/* the panel: full size at all times, revealed by the clip; S = the button square */
.cgm__panel {
  position: absolute;
  z-index: 1;
  width: var(--cgm-w);
  box-sizing: border-box;
  display: flex; flex-direction: column;
  padding-top: var(--cgm-size);
  border-radius: var(--cgm-radius);
  background: var(--cgm-fill-closed);
  pointer-events: none;
  visibility: hidden;                        /* at rest closed (no dark fringe round the button's corners) */
  transition: clip-path var(--cgm-dur) var(--cgm-ease), background-color var(--cgm-dur) var(--cgm-ease),
    visibility 0s linear var(--cgm-dur);
}
.cgm.is-open .cgm__panel { background: var(--cgm-fill); pointer-events: auto; visibility: visible; transition-delay: 0s, 0s, 0s; }

.cgm__links {
  list-style: none; margin: 0;
  padding: var(--cgm-pad);
  display: flex; flex-direction: column; gap: var(--cgm-gap);
  visibility: hidden;
  transition: translate var(--cgm-dur) var(--cgm-ease), visibility 0s linear var(--cgm-vis-delay);
}
.cgm.is-open .cgm__links { visibility: visible; transition-delay: 0s, 0s; }
.cgm[data-cgm-close="ride"] { --cgm-vis-delay: var(--cgm-dur); }   /* links stay and ride back into the corner */
.cgm__links a {
  display: block;
  color: var(--cgm-ink);
  font: 700 var(--cgm-link-size) / 1 var(--cgm-font);
  letter-spacing: var(--cgm-track);
  text-transform: lowercase;
  text-decoration: none;
  white-space: nowrap;
}
.cgm__links a:hover, .cgm__links a:focus-visible { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; outline: none; }

/* anchor corners: the panel hangs off the same corner as the button; the closed clip is the button's square in that
   corner; the links start translated so their box's top-left sits at the clip's top-left (they ride that corner) */
.cgm[data-cgm-corner="top-right"] .cgm__panel, .cgm:not([data-cgm-corner]) .cgm__panel {
  top: 0; right: 0;
  clip-path: inset(0 0 calc(100% - var(--cgm-size)) calc(100% - var(--cgm-size)) round var(--cgm-radius));
}
.cgm[data-cgm-corner="top-right"] .cgm__links, .cgm:not([data-cgm-corner]) .cgm__links { translate: calc(100% - var(--cgm-size)) 0; }
.cgm[data-cgm-corner="top-left"] .cgm__panel {
  top: 0; left: 0;
  clip-path: inset(0 calc(100% - var(--cgm-size)) calc(100% - var(--cgm-size)) 0 round var(--cgm-radius));
}
.cgm[data-cgm-corner="top-left"] .cgm__links { translate: 0 0; }
.cgm[data-cgm-corner="bottom-right"] .cgm__panel {
  bottom: 0; right: 0; padding-top: 0; padding-bottom: var(--cgm-size);
  clip-path: inset(calc(100% - var(--cgm-size)) 0 0 calc(100% - var(--cgm-size)) round var(--cgm-radius));
}
.cgm[data-cgm-corner="bottom-right"] .cgm__links { translate: calc(100% - var(--cgm-size)) 100%; }
.cgm[data-cgm-corner="bottom-left"] .cgm__panel {
  bottom: 0; left: 0; padding-top: 0; padding-bottom: var(--cgm-size);
  clip-path: inset(calc(100% - var(--cgm-size)) calc(100% - var(--cgm-size)) 0 0 round var(--cgm-radius));
}
.cgm[data-cgm-corner="bottom-left"] .cgm__links { translate: 0 100%; }
/* open: the whole box, the links at rest (after the corner rules, same specificity) */
.cgm.is-open .cgm__panel { clip-path: inset(0 0 0 0 round var(--cgm-radius)); }
.cgm.is-open .cgm__links { translate: 0 0; }

/* phone (Framer's phone breakpoint): wider panel, bigger links, the panel is dark from the first frame */
@media (max-width: 809px) {
  .cgm__panel { width: min(var(--cgm-w-phone), calc(100vw - 32px)); }
  .cgm { --cgm-fill-closed: var(--cgm-fill); }
  .cgm__links a { font-size: var(--cgm-link-size-phone); }
}

@media (prefers-reduced-motion: reduce) {
  .cgm__btn, .cgm__dot, .cgm__panel, .cgm__links { transition-duration: 0s; transition-delay: 0s; }
}