/* ==========================================================================
   MENU A TUTTA PAGINA — componente condiviso (lo crea js/menu.js)
   Due voci tipografiche: Pirata per le destinazioni, l'etichetta in Heebo.
   I font hanno nomi propri, cosi' non si scontrano con quelli delle pagine.
   ========================================================================== */
@font-face{font-family:'Menu Pirata';font-weight:400;font-display:swap;src:url(../fonts/pirata-one-400-latin.woff2) format('woff2')}
@font-face{font-family:'Menu Heebo';font-weight:400;font-display:swap;src:url(../fonts/heebo-400-latin.woff2) format('woff2')}
@property --liv{syntax:'<number>';inherits:true;initial-value:0}

/* ---------- il bottone: il cerchio rosso della favicon ---------- */
.menu-tasto{
  position:fixed;top:16px;right:clamp(16px,4vw,48px);z-index:1600;
  width:50px;height:50px;border:0;padding:0;margin:0;cursor:pointer;
  background:var(--menu-tasto,#ff0000);border-radius:50%;
  display:grid;place-items:center;
  transition:background-color .35s ease,transform .45s cubic-bezier(.2,.7,.2,1);
}
.menu-attesa .menu-tasto{display:none}
.menu-tasto.nasce{animation:menu-nasce .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes menu-nasce{from{transform:scale(0)}}
/* due tratti bianchi storti, come segni di pennarello */
.menu-tasto i{position:absolute;left:50%;top:50%;width:20px;height:3px;margin:-1.5px 0 0 -10px;
  background:var(--menu-tratti,#fff);border-radius:3px;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1),height .3s ease,background-color .3s ease}
.menu-tasto i:nth-child(1){transform:translateY(-4px) rotate(-6deg)}
.menu-tasto i:nth-child(2){transform:translate(-3px,4px) rotate(4deg);width:14px}
/* al passaggio il cerchio diventa liquido, come la colata d'apertura */
.menu-tasto:hover,.menu-tasto:focus-visible{animation:menu-goccia 1.6s ease-in-out infinite}
.menu-tasto:hover i:nth-child(1){transform:translateY(-5px) rotate(4deg)}
.menu-tasto:hover i:nth-child(2){transform:translateY(5px) rotate(-5deg);width:20px}
@keyframes menu-goccia{
  0%,100%{border-radius:50%}
  25%{border-radius:58% 42% 50% 50% / 45% 55% 45% 55%}
  50%{border-radius:46% 54% 42% 58% / 56% 44% 56% 44%}
  75%{border-radius:52% 48% 58% 42% / 48% 52% 50% 50%}
}
.menu-tasto:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* dentro la barra di una pagina: misure e colori della barra */
.menu-tasto--barra{position:relative;top:auto;right:auto;z-index:auto;width:38px;height:38px;flex:none}
.menu-tasto--barra i{width:16px;margin-left:-8px}
.menu-tasto--barra i:nth-child(2){width:11px}

/* aperto: il cerchio sparisce, restano due pennellate nere a croce */
.menu-aperto .menu-tasto{background:transparent;animation:none}
.menu-aperto .menu-tasto i{background:#000;height:5px;margin-top:-2.5px}
.menu-aperto .menu-tasto i:nth-child(1){width:34px;margin-left:-17px;transform:rotate(41deg)}
.menu-aperto .menu-tasto i:nth-child(2){width:30px;margin-left:-15px;transform:translate(1px,-1px) rotate(-47deg)}
.menu-aperto .menu-tasto:hover{transform:rotate(90deg)}
.menu-aperto .menu-tasto:focus-visible{outline-color:#000}

/* ---------- il menu ---------- */
.menu{
  position:fixed;inset:0;z-index:1500;overflow-y:auto;overscroll-behavior:contain;
  background:#ff0000;color:#000;text-align:left;
  clip-path:circle(0 at var(--cx,calc(100% - 60px)) var(--cy,41px));
  transition:clip-path .85s cubic-bezier(.7,0,.2,1),visibility 0s .85s;
  visibility:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:110px clamp(16px,6vw,96px) clamp(32px,7vh,72px);
}
.menu-aperto .menu{
  clip-path:circle(150vmax at var(--cx,calc(100% - 60px)) var(--cy,41px));
  transition:clip-path .85s cubic-bezier(.7,0,.2,1),visibility 0s;visibility:visible;
}
.menu-aperto,.menu-aperto body{overflow:hidden}

.menu__eti{margin:0 0 clamp(22px,4vh,40px);font:400 12px/1.4 'Menu Heebo',sans-serif;letter-spacing:.22em;text-transform:uppercase}
.menu__lista{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,3.2vh,34px)}
.menu__lista a{display:inline-block;text-decoration:none;color:#000;padding:1px 0}
.menu__lista b{
  display:inline-block;font:400 clamp(36px,4.6vw,76px)/.95 'Menu Pirata',serif;white-space:nowrap;
  padding-bottom:.1em;margin-bottom:-.1em;
  /* al passaggio la voce si riempie di bianco dal basso, come il logo */
  color:transparent;-webkit-background-clip:text;background-clip:text;
  background-repeat:repeat-x,no-repeat;background-size:.7em .16em,100% 100%;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8V4c5-4 10-4 15 0s10 4 15 0 7-3 10-1v5z' fill='%23ffffff'/%3E%3C/svg%3E"),
    linear-gradient(to top,#fff calc(var(--liv) * 100%),#000 calc(var(--liv) * 100%));
  background-position:0 calc((1 - var(--liv)) * 1.1em - .08em),0 0;
  transition:--liv .8s cubic-bezier(.5,0,.2,1.15);
}
.menu__lista a:hover b,.menu__lista a:focus-visible b{--liv:1;animation:menu-onda 1s linear infinite}
@keyframes menu-onda{
  from{background-position:0 calc((1 - var(--liv)) * 1.1em - .08em),0 0}
  to{background-position:.7em calc((1 - var(--liv)) * 1.1em - .08em),0 0}
}
.menu__lista a:focus-visible{outline:2px solid #000;outline-offset:4px}

/* entrata delle voci: sfocate e in salita */
.menu [data-i]{opacity:0;filter:blur(10px);transform:translateY(.4em);
  transition:opacity .4s ease,filter .4s ease,transform .4s ease}
.menu-aperto .menu [data-i]{opacity:1;filter:none;transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1) calc(.35s + var(--i) * 60ms),
             filter .7s cubic-bezier(.2,.7,.2,1) calc(.35s + var(--i) * 60ms),
             transform .7s cubic-bezier(.2,.7,.2,1) calc(.35s + var(--i) * 60ms)}

@media (max-width:820px){
  .menu{justify-content:flex-start;padding-top:96px}
  .menu__lista b{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .menu,.menu-aperto .menu,.menu [data-i],.menu-tasto,.menu-tasto i,.menu__lista b{animation:none !important;transition:none !important}
  .menu-aperto .menu [data-i]{opacity:1;filter:none;transform:none}
}