/* tako-header.css — header animato condiviso (identico alla homepage).
   Estratto da "Tako Landing.html" così che TUTTE le pagine del sito usino
   esattamente lo stesso header. Richiede le variabili --coral/--ink ecc.,
   .glass, .logo-bob e .btn-coral (già presenti nelle pagine). */

/* ——— Niente scorrimento orizzontale (soprattutto su mobile): swipe laterali
   non spostano la pagina. Uso `clip` e non `hidden` così lo scroll verticale
   resta normale (hidden forzerebbe overflow-y:auto rompendo lo scroll). ——— */
html { overflow-x: clip; }
body { overflow-x: clip; overscroll-behavior-x: none; max-width: 100%; }

/* ——— Animated header (icons + scroll-collapse to floating island) ——— */
.tnav-inner {
  max-width: 1280px;
  padding: 18px 28px;
  margin-top: 0;
  border-radius: 0;
  background: rgba(255, 248, 243, 0);
  border: 1px solid rgba(237, 113, 89, 0);
  box-shadow: 0 0 0 rgba(42,31,26,0);
  transition: max-width .55s cubic-bezier(.65,0,.35,1), padding .55s cubic-bezier(.65,0,.35,1),
    margin-top .55s cubic-bezier(.65,0,.35,1), border-radius .55s cubic-bezier(.65,0,.35,1),
    background .4s ease, border-color .4s ease, box-shadow .5s ease;
}
.tnav-scrolled .tnav-inner {
  max-width: 860px;
  padding: 8px 14px 8px 18px;
  margin-top: 12px;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 38%, rgba(255,248,243,0.04) 60%, rgba(255,255,255,0.22) 100%),
    rgba(255, 248, 243, 0.28);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 14px 40px -14px rgba(42,31,26,0.30),
    inset 0 1px 1px rgba(255,255,255,0.85),
    inset 0 -1px 2px rgba(255,255,255,0.18);
}

/* nav links: icon over label */
.tnav-link {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0 12px; position: relative; color: var(--ink); text-decoration: none;
}
.tnav-ico-wrap {
  height: 50px; display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
  transition: height .55s cubic-bezier(.65,0,.35,1), opacity .4s ease, margin .55s cubic-bezier(.65,0,.35,1);
}
.tnav-ico {
  width: 46px; height: 46px; object-fit: contain; display: block;
  filter: drop-shadow(0 7px 9px rgba(217,83,58,0.24));
  transform-origin: 50% 100%;
  transition: transform .42s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
}
.tnav-scrolled .tnav-ico-wrap { height: 0; margin-bottom: 0; }
.tnav-scrolled .tnav-ico { transform: translateY(-82px) scale(.85); opacity: 1; }

.tnav-label { white-space: nowrap; transition: color .2s ease; line-height: 1.6; }
.tnav-link.is-active .tnav-label, .tnav-link:hover .tnav-label { color: var(--coral-deep); }
.tnav-underline {
  height: 3px; border-radius: 99px; background: var(--coral); width: 0; margin-top: 1px;
  transition: width .28s cubic-bezier(.34,1.56,.64,1);
}
.tnav-link:hover .tnav-underline { width: 55%; }
.tnav-link.is-active .tnav-underline { width: 78%; }
/* da scrollato: l'underline esce dal flusso così la label resta centrata in altezza */
.tnav-scrolled .tnav-underline {
  position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); margin-top: 0;
}

/* per-icon hover animations (only while icons are visible) */
.tnav-link:hover .nav-bounce { animation: navBounce .9s ease-in-out infinite; }
.tnav-link:hover .nav-wiggle { animation: navWiggle .7s ease-in-out infinite; }
.tnav-link:hover .nav-tilt   { animation: navTilt 1.1s ease-in-out infinite; }
.tnav-link:hover .nav-swing  { animation: navSwing .9s ease-in-out infinite; transform-origin: 50% 8%; }
/* click feedback: shrink then spring back */
.tnav-link:active .tnav-ico { animation: none !important; transform: scale(.78); }
@keyframes navBounce { 0%,100% { transform: translateY(0); } 35% { transform: translateY(-7px) scale(1.05); } 60% { transform: translateY(-2px); } }
@keyframes navWiggle { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes navTilt   { 0%,100% { transform: rotate(0) scale(1); } 50% { transform: rotate(4deg) scale(1.07); } }
@keyframes navSwing  { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }

/* "Tako" word + "Accedi" slide up & fade on scroll */
.tnav-word {
  display: inline-block; max-width: 90px; overflow: hidden;
  transition: transform .5s cubic-bezier(.5,0,.2,1), opacity .35s ease .12s, max-width .5s cubic-bezier(.5,0,.2,1), margin-left .5s cubic-bezier(.5,0,.2,1);
}
.tnav-word-hidden { transform: translateY(-70px); opacity: 0; max-width: 0; margin-left: -8px; }
.tnav-accedi {
  color: var(--ink); display: inline-block; max-width: 90px; overflow: hidden; white-space: nowrap;
  transition: transform .5s cubic-bezier(.5,0,.2,1), opacity .35s ease .12s, max-width .5s cubic-bezier(.5,0,.2,1);
}
.tnav-scrolled .tnav-accedi { transform: translateY(-70px); opacity: 0; max-width: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .tnav-link:hover .tnav-ico { animation: none !important; }
}

/* ——— Mobile: da scrollato l'header diventa una pillola flottante più corta ——— */
@media (max-width: 767px) {
  .tnav-inner { padding: 14px 18px; }
  .tnav-scrolled .tnav-inner {
    max-width: calc(100% - 28px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    padding: 7px 12px 7px 16px;
    border-radius: 22px;
  }
}