/* ==============================================
   MENU MOBILE — burger + tenda a bordo liquido

   Sotto i 768px style.css nasconde .n-links e .n-dot senza mettere
   niente al loro posto: da telefono non si poteva navigare. Qui c'è il
   burger e la tenda che scorre da destra, con il bordo che si incurva
   di quanto sta correndo.

   Il markup lo inietta js/mobile-menu.js, così vale su tutte le pagine
   che hanno #nav senza doverle toccare una per una.
   ============================================== */

/* fisso, allineato alla riga del logo: sta fuori da #nav per non
   restare intrappolato nel contesto di impilamento di <main> */
.mm-burger{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;
  width:42px;height:42px;padding:0;margin:0;border:none;background:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  position:fixed;top:17px;right:calc(var(--pad-x,20px) - 2px);z-index:1250;
}
.mm-burger i{
  display:block;width:26px;height:3px;border-radius:2px;
  /* segue il colore adattivo della nav (js/persistent-nav.js) */
  background:var(--nav-ink,#ece4c3);
  transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .2s ease,background-color .35s ease;
}
.mm-burger:focus-visible{outline:2px solid var(--nav-ink,#ece4c3);outline-offset:6px;border-radius:4px;}

.mm-scrim{
  position:fixed;inset:0;z-index:1190;
  background:rgba(20,6,52,.5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s ease,visibility 0s linear .45s;
}
.mm-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:1200;
  width:min(80%,340px);
  background:#ece4c3;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(10px,2.4vh,20px);
  padding:0 clamp(22px,6vw,34px);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .62s cubic-bezier(.16,1,.3,1),visibility 0s linear .62s;
}
/* la curva vive fuori dal pannello, sul suo bordo d'attacco */
.mm-curve{
  position:absolute;top:0;right:100%;width:92px;height:100%;
  overflow:visible;pointer-events:none;
}

.mm-links{display:flex;flex-direction:column;gap:clamp(6px,1.6vh,14px);list-style:none;margin:0;padding:0;}
.mm-links a{
  font-family:'New Title','New Title Static',sans-serif;font-weight:700;
  font-size:clamp(34px,11vw,52px);line-height:1.02;letter-spacing:-.015em;
  text-transform:uppercase;text-decoration:none;color:#3e168b;
  display:block;width:max-content;max-width:100%;
  transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s ease;
}
.mm-links a:active{transform:translateX(6px);}
.mm-links a:focus-visible{outline:3px solid #3e168b;outline-offset:6px;border-radius:3px;}
.mm-links a[aria-current="page"]{opacity:.45;}

.mm-dot{
  align-self:flex-start;margin-top:clamp(14px,3vh,26px);
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#3e168b;border:3px solid #3e168b;border-radius:100px;padding:7px 16px 7px 13px;
}
.mm-dot b{width:9px;height:9px;border-radius:50%;background:#22c55e;display:block;}

/* ── stato aperto ── */
.mm-open .mm-panel{
  transform:none;visibility:visible;
  transition:transform .62s cubic-bezier(.16,1,.3,1),visibility 0s linear 0s;
}
.mm-open .mm-scrim{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .45s ease,visibility 0s linear 0s;
}
/* il burger resta sopra la tenda, in inchiostro sul crema */
.mm-open .mm-burger i{background:#0a0907;}
.mm-open .mm-burger i:nth-child(1){transform:translateY(9px) rotate(45deg);}
.mm-open .mm-burger i:nth-child(2){opacity:0;}
.mm-open .mm-burger i:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

/* le voci entrano una dopo l'altra da sotto una maschera */
.mm-links li{display:block;overflow:hidden;}
.mm-links a{transform:translateY(112%);}
.mm-open .mm-links a{transform:none;transition:transform .55s cubic-bezier(.16,1,.3,1);}
.mm-open .mm-links li:nth-child(1) a{transition-delay:.14s;}
.mm-open .mm-links li:nth-child(2) a{transition-delay:.2s;}
.mm-open .mm-links li:nth-child(3) a{transition-delay:.26s;}
.mm-open .mm-links li:nth-child(4) a{transition-delay:.32s;}
.mm-dot{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1);}
.mm-open .mm-dot{opacity:1;transform:none;transition-delay:.34s;}

/* mentre la tenda è aperta la pagina sotto non scorre */
html.mm-lock,body.mm-lock{overflow:hidden;height:100%;}

@media(max-width:768px){
  .mm-burger{display:flex;}
  /* experience.css rimette in riga i link della nav sotto i 900px con
     un selettore su #nav: da telefono si vedevano insieme al burger e
     si sovrapponevano. Qui sotto comanda la tenda, quindi i link
     inline spariscono — stessa specificità, ma questo foglio è dopo. */
  #nav .n-links,#nav .n-dot{display:none;}
}
/* sopra il breakpoint la nav vera è di nuovo visibile: la tenda non
   deve poter comparire in nessun caso */
@media(min-width:769px){
  .mm-panel,.mm-scrim{display:none;}
}

@media(prefers-reduced-motion:reduce){
  .mm-panel,.mm-scrim,.mm-links a,.mm-dot,.mm-burger i{transition-duration:.01ms;}
}