/* =========================================================
   Hero della Home · "Forno" (scelta da Alice, 21/10/2026)
   Slogan del vecchio sito: "La tua pizzeria a PORTO VIRO anche da asporto!"
   Tutto è guidato da --e (0→1, lo imposta il JS allo scroll): l'arco è un clip-path calcolato in CSS,
   quindi la composizione iniziale esiste anche senza JS o con movimento ridotto.
   Rosa #EF88A1 su navy #223E8C = 4,08:1 → solo testo grande (occhielli ≥ 24px).
   Misure Staatliches: PORTO 2,20 em · VIRO 1,58 em · maiuscole alte 0,70 em.
   ========================================================= */
.hb {
  --e: 0;
  --g: 4vw;                                           /* margine laterale */
  --aw: 25vw;                                         /* larghezza dell'arco */
  --at: 12%;                                          /* distanza dell'arco dal bordo alto */
  --F: min(14vw, 30svh);                              /* PORTO riempie lo spazio a sinistra dell'arco */
  --zona: calc(50% - var(--aw) / 2 - var(--g) - 2.5vw); /* spazio utile ai lati dell'arco */
  --riga: 41%;                                        /* altezza della riga PORTO · VIRO */
  position: relative;
  height: calc(100svh - var(--header-h) + 110vh);
}
.hb__stage {
  position: sticky; top: var(--header-h);
  height: calc(100svh - var(--header-h)); min-height: 540px;
  overflow: hidden; isolation: isolate;
  background: var(--navy) repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 9px, transparent 9px 24px);
}

/* ---------- lo slogan ---------- */
.hb__titolo { position: absolute; inset: 0; z-index: 1; margin: 0; pointer-events: none; font-family: var(--font-titoli); font-weight: 400; font-size: 1rem; }
.hb__w {
  position: absolute; top: var(--riga); width: var(--zona); text-align: center;
  font-family: var(--font-titoli); font-weight: 400; text-transform: uppercase;
  font-size: var(--F); line-height: .8; letter-spacing: .005em; color: var(--rosa); white-space: nowrap;
  opacity: calc(1 - var(--e) * 1.5);
}
.hb__w--porto { left: var(--g); transform: translateX(calc(var(--e) * -55vw)); }
.hb__w--viro { right: var(--g); transform: translateX(calc(var(--e) * 55vw)); }
.hb__occhiello {
  position: absolute; font-family: var(--font-display); font-style: italic; font-weight: 460; text-transform: none;
  font-size: clamp(1.6rem, 1rem + 1.5vw, 2.6rem); line-height: 1.1; letter-spacing: .005em; color: var(--rosa); white-space: nowrap;
  opacity: calc(1 - var(--e) * 2.2);
}
/* "La tua pizzeria a" sopra l'inizio di PORTO; "anche da asporto!" sotto la fine di VIRO */
.hb__occhiello--su { left: calc(var(--g) + (var(--zona) - var(--F) * 2.2) / 2); top: calc(var(--riga) - 1.45em); transform: translateX(calc(var(--e) * -55vw)); }
.hb__occhiello--giu { right: calc(var(--g) + (var(--zona) - var(--F) * 1.58) / 2); top: calc(var(--riga) + var(--F) * .78 + .35em); transform: translateX(calc(var(--e) * 55vw)); }

/* ---------- l'arco: la bocca del forno che si apre ---------- */
.hb__arco {
  position: absolute; inset: 0; z-index: 2; background: var(--navy-900);
  clip-path: inset(
    calc(var(--at) * (1 - var(--e)))
    calc((50% - var(--aw) / 2) * (1 - var(--e)))
    0
    calc((50% - var(--aw) / 2) * (1 - var(--e)))
    round calc(var(--aw) / 2 * (1 - var(--e))) calc(var(--aw) / 2 * (1 - var(--e))) 0 0);
}
/* il forno nella foto è a sinistra del centro: a riposo l'immagine si sposta per metterlo nell'arco */
.hb__arco-img { position: absolute; inset: 0; transform: translateX(calc((1 - var(--e)) * 10%)) scale(calc(1.14 - var(--e) * .14)); }
.hb__arco-img picture, .hb__arco-img img { width: 100%; height: 100%; }
.hb__arco-img img { object-fit: cover; object-position: 50% 55%; }
.hb__bordo {
  position: absolute; z-index: 2; pointer-events: none;
  top: calc(var(--at) - 14px); bottom: -2px; left: calc(50% - var(--aw) / 2 - 14px); width: calc(var(--aw) + 28px);
  border: 2px solid var(--rosa); border-bottom: 0;
  border-radius: calc(var(--aw) / 2 + 14px) calc(var(--aw) / 2 + 14px) 0 0;
  opacity: calc(1 - var(--e) * 4);
}

/* ---------- scheda con i menù luminosi (al posto del neon, 25/10/2026) ---------- */
.hb__card {
  position: absolute; z-index: 3; right: 4.5vw; top: 7%; width: 14vw; max-width: 260px;
  border-radius: 14px; overflow: hidden; border: 3px solid var(--navy-900);
  box-shadow: 0 22px 34px -16px rgba(0, 0, 0, .55);
  transform: rotate(6deg) translateY(calc(var(--e) * -40vh)); opacity: calc(1 - var(--e) * 2);
}
.hb__card img { display: block; width: 100%; animation: hb-card .7s var(--ease-out) .5s backwards; }
@keyframes hb-card { from { opacity: 0; transform: scale(1.06); } }

/* ---------- pizza in primo piano, sul bordo dell'arco ---------- */
.hb__pizza {
  position: absolute; z-index: 4; width: 14vw; left: calc(50% - var(--aw) / 2); top: 80%;
  transform: translate(-50%, -50%) translate(calc(var(--e) * -30vw), calc(var(--e) * 45vh)) rotate(calc(var(--e) * -300deg));
}
.hb__pizza::before { content: ""; position: absolute; inset: 14% 6% -8% 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent); filter: blur(8px); }
.hb__pizza-gira { animation: hb-gira 70s linear infinite; }
@keyframes hb-gira { to { transform: rotate(360deg); } }

/* ---------- stato + pulsanti ---------- */
.hb__ui { position: absolute; z-index: 3; left: var(--g); bottom: 6%; opacity: calc(1 - var(--e) * 2.5); }
.hb.is-aperto .hb__ui { visibility: hidden; }
.hb__ui .stato { margin-top: 0; }
.hb__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.hb :focus-visible { outline-color: var(--rosa); }

/* =================== MOBILE: PORTO sopra l'arco, VIRO sotto =================== */
@media (max-width: 899px) {
  .hb {
    --g: 16px;
    --aw: 56vw;
    --F: min(calc((100vw - 2 * var(--g)) / 2.2), 15svh);
    --at: calc(12px + 1.9rem + var(--F) * .8 + 10px);
    --ah: calc(100% - var(--at) - var(--F) * .8 - 2.3rem - 196px);
    height: calc(100svh - var(--header-h) + 90vh);
  }
  .hb__w { left: var(--g); right: var(--g); width: auto; }
  .hb__w--porto { top: calc(12px + 1.9rem); transform: translateY(calc(var(--e) * -30vh)); }
  .hb__w--viro { top: calc(var(--at) + var(--ah) + 10px); transform: translateY(calc(var(--e) * 30vh)); }
  .hb__occhiello { font-size: 1.5rem; }
  .hb__occhiello--su { left: var(--g); top: 12px; transform: translateY(calc(var(--e) * -30vh)); }
  .hb__occhiello--giu { left: auto; right: var(--g); top: calc(var(--at) + var(--ah) + 14px + var(--F) * .78); transform: translateY(calc(var(--e) * 30vh)); }
  .hb__arco {
    clip-path: inset(
      calc(var(--at) * (1 - var(--e)))
      calc((50% - var(--aw) / 2) * (1 - var(--e)))
      calc((100% - var(--at) - var(--ah)) * (1 - var(--e)))
      calc((50% - var(--aw) / 2) * (1 - var(--e)))
      round calc(var(--aw) / 2 * (1 - var(--e))) calc(var(--aw) / 2 * (1 - var(--e))) calc(16px * (1 - var(--e))) calc(16px * (1 - var(--e))));
  }
  .hb__arco-img { transform: scale(calc(1.1 - var(--e) * .1)); }
  .hb__bordo { top: calc(var(--at) - 10px); bottom: auto; height: calc(var(--ah) + 20px); border-bottom: 2px solid var(--rosa); left: calc(50% - var(--aw) / 2 - 10px); width: calc(var(--aw) + 20px); border-radius: calc(var(--aw) / 2 + 10px) calc(var(--aw) / 2 + 10px) 22px 22px; }
  .hb__card { right: auto; left: calc(50% + var(--aw) / 2 - 15vw); top: calc(var(--at) + 3%); width: 28vw; transform: rotate(7deg) translateY(calc(var(--e) * -30vh)); }
  .hb__pizza { width: 30vw; left: calc(50% - var(--aw) / 2); top: calc(var(--at) + var(--ah) * .74); transform: translate(-50%, -50%) translate(calc(var(--e) * -25vw), calc(var(--e) * 40vh)) rotate(calc(var(--e) * -300deg)); }
  /* su mobile la pizza gira solo con lo scroll: stessa posizione, stessa rotazione */
  .hb__pizza-gira { animation: none; }
  .hb__ui { left: var(--g); right: var(--g); bottom: calc(72px + 14px + env(safe-area-inset-bottom)); }
  .hb__ui .stato { font-size: .875rem; }
  .hb__cta { flex-wrap: nowrap; margin-top: .7rem; }
  .hb__cta .btn { flex: 1 1 0; min-width: 0; }
}

/* =================== movimento ridotto: composizione ferma =================== */
@media (prefers-reduced-motion: reduce) {
  .hb { height: auto; }
  .hb__stage { position: relative; top: 0; }
  .hb__card img { animation: none; }
  .hb__pizza-gira { animation: none; }
}