/* Menu a schermo intero (zs-menu). Si apre da un bottone [data-zs-menu] con aria-controls.
 * Tendina che scende dall'alto con clip-path, voci giganti in minuscolo, social e note legali in fondo.
 * Valori dalla sorgente della reference (fonti.json, voce "menu"): clip-path polygon dall'alto,
 * apertura ~800 ms in-out-quart dopo ~250 ms, chiusura ~630 ms in-out-quint dopo il fade delle voci.
 * Colori e font solo dalle variabili del template. */
.zs-menu {
  --zs-menu-bg: var(--z-accent, var(--b-primary));
  --zs-menu-ink: var(--z-accent-ink, var(--b-bg));
  --zs-menu-open: 800ms;
  --zs-menu-close: 630ms;
  --zs-menu-delay: 250ms;
  --zs-menu-ease-open: cubic-bezier(.76, 0, .24, 1);
  --zs-menu-ease-close: cubic-bezier(.83, 0, .17, 1);
  --zs-menu-stagger: var(--zb-anim-stagger, 70ms);
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: var(--z-gap, 1.5rem);
  padding: 1rem 1.25rem 1.5rem;
  background: var(--zs-menu-bg);
  color: var(--zs-menu-ink);
  font-family: var(--b-font-body);
  overflow-y: auto;
  overscroll-behavior: contain;
  clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
  transition: clip-path var(--zs-menu-close) var(--zs-menu-ease-close) 250ms}
.zs-menu, .zs-menu *, .zs-menu *::before, .zs-menu *::after { box-sizing: border-box}
.zs-menu[hidden] { display: none}
.zs-menu.is-open {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path var(--zs-menu-open) var(--zs-menu-ease-open) var(--zs-menu-delay)}

/* Bottone di chiusura: nasce sopra il bottone che apre (posizione misurata dal JS) e il burger diventa X */
.zs-menu__close {
  position: fixed;
  top: var(--zs-menu-btn-top, 1rem);
  right: var(--zs-menu-btn-right, 1rem);
  z-index: 1;
  display: grid;
  place-items: center;
  width: max(4rem, var(--zs-menu-btn-size, 3rem));
  height: max(4rem, var(--zs-menu-btn-size, 3rem));
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer}
.zs-burger {
  position: relative;
  display: block;
  width: 1.75rem;
  height: 1.1rem}
.zs-burger i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform .45s var(--zs-menu-ease-open, cubic-bezier(.76, 0, .24, 1)), opacity .2s linear}
.zs-burger i:nth-child(1) { top: 0}
.zs-burger i:nth-child(2) { top: 50%}
.zs-burger i:nth-child(3) { top: 100%}
/* nel pannello il burger è già X, grande e sottile come nella reference */
.zs-menu__close .zs-burger { width: 100%; height: 100%}
.zs-menu__close .zs-burger i { top: 50%; height: 1px}
.zs-menu.is-open .zs-menu__close .zs-burger i:nth-child(1) { transform: rotate(45deg) scaleX(1.414)}
.zs-menu.is-open .zs-menu__close .zs-burger i:nth-child(3) { transform: rotate(-45deg) scaleX(1.414)}
.zs-menu.is-open .zs-burger i:nth-child(1),
[data-zs-menu][aria-expanded="true"] .zs-burger i:nth-child(1) { transform: translateY(.55rem) rotate(45deg)}
.zs-menu.is-open .zs-burger i:nth-child(2),
[data-zs-menu][aria-expanded="true"] .zs-burger i:nth-child(2) { opacity: 0}
.zs-menu.is-open .zs-burger i:nth-child(3),
[data-zs-menu][aria-expanded="true"] .zs-burger i:nth-child(3) { transform: translateY(-.55rem) rotate(-45deg)}

/* Bottone che apre: solo struttura, l'aspetto lo dà l'header che lo ospita */
.zs-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-width: 44px;
  min-height: 44px;
  padding: .5rem;
  border: 0;
  background: none;
  color: inherit;
  font:var(--b-font-body);
  cursor: pointer}

.zs-menu__links {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--b-font-body);
  font-size: clamp(3.4rem, 18.5vw, 8.5rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  text-transform: lowercase}
.zs-menu__links a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  opacity: .2;
  transition: opacity .4s ease}
.zs-menu__links a[aria-current],
.zs-menu__links a:hover,
.zs-menu__links a:focus-visible { opacity: 1}
.zs-menu__links a:focus-visible,
.zs-menu__foot a:focus-visible,
.zs-menu__close:focus-visible { outline: 2px solid currentColor; outline-offset: 4px}

/* Ingresso delle voci a cascata, dopo che la tendina è a metà corsa */
.zs-menu__links li {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .3s ease, transform .3s ease}
.zs-menu.is-open .zs-menu__links li {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .9s var(--zb-anim-ease, cubic-bezier(.23, 1, .32, 1));
  transition-delay: calc(var(--zs-menu-delay) + var(--zs-menu-open) * .45 + var(--i, 0) * var(--zs-menu-stagger))}

.zs-menu__foot {
  display: grid;
  gap: calc(var(--z-gap, 1.5rem) * 1.5);
  margin-top: auto}
.zs-menu__foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 0;
  margin: 0;
  padding: 0;
  list-style: none}
.zs-menu__foot li + li::before { content: "/"; margin: 0 .6rem; opacity: .35}
.zs-menu__foot a { color: inherit; text-decoration: none}
.zs-menu__foot a:hover { text-decoration: underline; text-underline-offset: .2em}
.zs-menu__social { font-size: 1rem}
.zs-menu__legal { font-size: .75rem}
.zs-menu__legal p { margin: .75rem 0 0}

@media (min-width: 64rem) {
  .zs-menu { padding-inline: 2rem}
  .zs-menu__foot { grid-template-columns: 1fr auto; align-items: end}
}

@media (prefers-reduced-motion: reduce) {
  .zs-menu, .zs-menu.is-open, .zs-menu__links li, .zs-menu.is-open .zs-menu__links li, .zs-burger i {
    transition-duration: .01ms !important;
    transition-delay: 0s !important}
}