/* Menu a tubo FZ INOX (scheda T10 della galleria menu-tubo.html).
   Sostituisce la testata di prima: logo, voci, selettore lingua e preventivo sul tubo.
   Le variabili di colore (--teal, --bone, --dim, --line, --amber, --sans, --serif) sono
   quelle della pagina; i valori dopo la virgola sono solo una rete di sicurezza.
   Soglia del telefono: 880px, la stessa dove la pagina mostra le tre lineette.
   Niente filter, niente backdrop-filter nuovi; si animano solo transform, opacity e
   stroke-dashoffset. */

/* ---------- barra (schermo largo) ---------- */
header .nav.tm {
  position: relative;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 38px 30px;               /* il basso lascia posto al tubo */
}
.tm .word { position: relative; z-index: 1; flex: none; }
.tm-nav {
  position: relative; z-index: 1;
  flex: 1 1 auto; min-width: 0;
  display: flex; justify-content: space-around;
}
.tm-nav a {
  white-space: nowrap;
  padding: 10px 6px;
  font: 500 12px/1 var(--sans, Inter, system-ui, sans-serif);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim, #9DA7A6);
  transition: color .2s;
}
.tm-nav a:hover,
.tm-nav a:focus-visible,
.tm-nav a[aria-current="page"] { color: var(--bone, #EDE8DD); }
.tm-rt { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 16px; }

/* il tubo: un disegno SVG sotto le voci, che non prende il mouse */
.tm-tubo, .tm-tubo-v {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; z-index: 0;
}
.tm-rv { transition: stroke-dashoffset .8s cubic-bezier(.4, 0, .2, 1); }
.tm-fl { animation: tmf .9s linear infinite; }
@keyframes tmf { to { stroke-dashoffset: -14; } }
.tm-n { stroke: #76858a; fill: #182125; stroke-width: 1.6; transition: fill .3s, stroke .3s; }
.tm-n.on { stroke: #bffff4; fill: var(--teal, #16C9B0); }

/* pulsante del preventivo: si riempie quando il liquido ci entra */
.tm-cta {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; white-space: nowrap;
  border: 1px solid var(--teal, #16C9B0); border-radius: 999px;
  padding: 11px 18px;
  font: 600 11px/1 var(--sans, Inter, system-ui, sans-serif);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone, #EDE8DD);
}
.tm-cta i {
  position: absolute; inset: 0;
  background: var(--teal, #16C9B0);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.tm-cta span { position: relative; transition: color .2s; }
.tm-cta.fl { color: #06201c; }
.tm-cta.fl i { transform: scaleY(1); transition-delay: .65s; }
.tm-cta.fl span { color: #06201c; transition-delay: .65s; }

/* selettore lingua (manopola del quadro comandi 09) */
.tsel {
  display: flex; align-items: center; gap: 7px; flex: none;
  min-height: 44px; padding: 0 4px;
  background: none; border: 0; cursor: pointer;
  font: 600 10.5px/1 var(--sans, Inter, system-ui, sans-serif);
  letter-spacing: .12em; color: var(--dim, #9DA7A6);
  -webkit-tap-highlight-color: transparent;
}
.tsel .kn {
  position: relative; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4d5a5f, #1a2225);
  border: 1px solid #55636a;
  transition: transform .3s cubic-bezier(.3, 1.5, .5, 1);
  transform: rotate(-40deg);
}
.tsel .kn::after {
  content: ""; position: absolute; left: 50%; top: 3px;
  width: 3px; height: 10px; margin-left: -1.5px; border-radius: 2px;
  background: var(--amber, #E0934E);
}
.tsel[aria-checked="true"] .kn { transform: rotate(40deg); }
.tsel[aria-checked="false"] .l1,
.tsel[aria-checked="true"] .l2 { color: var(--bone, #EDE8DD); }

/* schermi larghi ma non larghissimi: tutto un po' piu' stretto */
@media (min-width: 881px) and (max-width: 1100px) {
  header .nav.tm { padding-left: 24px; padding-right: 24px; gap: 6px; }
  .tm-nav a { padding: 10px 3px; letter-spacing: .08em; font-size: 11px; }
  .tm-rt { gap: 6px; }
  .tm-cta { padding: 10px 12px; letter-spacing: .08em; font-size: 10px; }
}

/* ---------- pannello del telefono (scheda 08 «Tubo che si srotola») ---------- */
.tm-pan { display: none; }
#hdr.tm-open { background: #090d0e; border-bottom-color: var(--line, rgba(237, 232, 221, .14)); }

@media (max-width: 880px) {
  header .nav.tm { padding: 10px 22px; gap: 8px; }
  .tm-nav, .tm-rt .tm-cta, .tm-tubo { display: none; }
  .tm-rt { margin-left: auto; }

  /* copre tutto lo schermo sotto la testata, a fondo PIENO; se le voci non ci stanno scorre dentro */
  .tm-pan {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0;
    top: var(--tm-top, 72px);
    z-index: 70;
    background: #090d0e;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden;
    /* chiudendo, il tubo si riavvolge (.6s) e poi il pannello svanisce; aprendo, scatta subito */
    transition: opacity .25s ease .4s, visibility 0s linear .65s;
  }
  .tm-pan.open { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }

  /* la croce di chiusura c'e' gia' nella testata (le tre lineette si fanno croce):
     questo pulsante resta per tastiera e per lo script della pagina, ma si mostra solo col fuoco */
  .tm-x {
    position: absolute; top: 8px; right: 14px; z-index: 3;
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line, rgba(237, 232, 221, .14));
    background: #090d0e; color: var(--bone, #EDE8DD);
    font: 400 26px/1 var(--serif, Georgia, serif); cursor: pointer;
    opacity: 0; pointer-events: none;
  }
  .tm-x:focus-visible { opacity: 1; pointer-events: auto; }

  /* il tubo sta a sinistra e fa la S, le voci lo seguono a destra, il preventivo e' in fondo */
  .tm-pv {
    position: relative;
    display: flex; flex-direction: column; align-items: stretch;
    padding: 40px 16px 32px 0;
    min-height: 100%; box-sizing: border-box;
  }
  .tm-pv a.v {
    position: relative; z-index: 1;
    display: flex; align-items: center; min-height: 60px; margin: 0 0 6px 64px; padding: 0 12px 0 0;
    align-self: flex-start; max-width: calc(100% - 64px);
    font: 400 34px/1.05 var(--serif, "Instrument Serif", Georgia, serif);
    letter-spacing: 0; text-transform: none;
    color: var(--dim, #9DA7A6);
    -webkit-tap-highlight-color: transparent;
    transition: opacity .25s, transform .25s, color .25s;
  }
  .tm-pv a.v:nth-child(even) { margin-left: 92px; max-width: calc(100% - 92px); }
  .tm-pv a.v:hover,
  .tm-pv a.v:focus-visible,
  .tm-pv a.v[aria-current="page"] { color: var(--bone, #EDE8DD); }
  .tm-pv a.v:focus-visible { outline: 2px solid var(--teal, #16C9B0); outline-offset: 2px; border-radius: 6px; }
  .tm-pv .tm-cta {
    position: relative; z-index: 1;
    display: flex; justify-content: center; align-items: center;
    margin: 24px 0 8px 96px; min-height: 52px; padding: 0 16px;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .35s;
  }
  /* le voci compaiono al passaggio del tubo (solo se lo script e' attivo: .tm-anim) */
  .tm-pan.tm-anim a.v { opacity: 0; transform: translateX(-14px); }
  .tm-pan.tm-anim .tm-cta { opacity: 0; }
  .tm-pan.tm-anim.open a.v { opacity: 1; transform: none; }
  .tm-pan.tm-anim.open .tm-cta { opacity: 1; }
  .tm-tubo-v { display: block; }
}

/* ---------- niente movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .tm *, .tm *::before, .tm *::after,
  .tm-pan, .tm-pan *, .tm-pan *::before, .tm-pan *::after,
  #hdr .burger span { transition: none !important; animation: none !important; }
  .tm-pan.tm-anim a.v, .tm-pan.tm-anim .tm-cta { opacity: 1 !important; transform: none !important; }
}

/* le tre lineette diventano una croce quando il pannello e' aperto */
header .burger span { transition: transform .25s ease, opacity .2s ease; }
header .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
header .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
header .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* al caricamento della pagina il pulsante gia' pieno non deve riempirsi davanti a chi guarda */
.tm-fermo .tm-cta i, .tm-fermo .tm-cta span { transition: none !important; }