/* Hero del Carnero: posizione della carne, velo scuro per i testi, titolo che emerge dal fumo */
.hero-carnero {
  --fuoco-x: 63%; --fuoco-y: 50%;
  display: flex; align-items: center;
  background: var(--carbone);
  color: var(--crema);
}
.hero-carnero .hero25d-foto img { object-position: var(--fuoco-x) var(--fuoco-y); }
@media (max-aspect-ratio: 1/1) {
  .hero-carnero { --fuoco-x: 50%; --fuoco-y: 57%; --altezza-scena: 66%; align-items: flex-end; }
}

/* Velo: scuro solo dove stanno i testi */
.hero-carnero .hero25d-velo {
  background:
    linear-gradient(90deg, rgb(var(--carbone-rgb) / 0.88) 0%, rgb(var(--carbone-rgb) / 0.6) 32%, rgb(var(--carbone-rgb) / 0) 58%),
    linear-gradient(0deg, rgb(var(--carbone-rgb) / 0.75) 0%, rgb(var(--carbone-rgb) / 0) 30%);
}
@media (max-aspect-ratio: 1/1) {
  .hero-carnero .hero25d-velo {
    background: linear-gradient(0deg, var(--carbone) 0%, var(--carbone) 34%, rgb(var(--carbone-rgb) / 0.75) 44%, rgb(var(--carbone-rgb) / 0) 62%);
  }
}

.hero-carnero .hero25d-contenuto {
  width: 100%; max-width: var(--larghezza); margin-inline: auto;
  padding: 6rem var(--margine) clamp(2.5rem, 7vh, 4.5rem);
}
.hero-testo { max-width: 32rem; }

.hero-titolo {
  position: relative;
  font-family: var(--font-titoli); font-weight: 400;
  font-size: clamp(3.5rem, min(13vw, 8.5vh), 6rem); line-height: 1; letter-spacing: -0.015em;
  margin: 0 0 0.3em;
}
.hero-titolo-netto { display: block; }
.hero-titolo-fumo {
  position: absolute; inset: 0;
  color: var(--crema); opacity: 0;
  filter: blur(14px);
  pointer-events: none;
}
.hero-frase { font-size: clamp(1.125rem, 4vw, 1.375rem); line-height: 1.35; margin: 0 0 0.9rem; }

.hero-stato {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0 0 1.6rem; padding: 0.3rem 0.85rem;
  border: 1px solid rgb(var(--carbone-rgb) / 0); border-radius: 999px;
  background: rgb(var(--carbone-rgb) / 0.55);
  color: var(--cenere); font-size: 0.9375rem;
}
.hero-stato::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--cenere); }
.hero-stato.aperto { color: var(--crema); }
.hero-stato.aperto::before { background: var(--brace); }

.hero-pulsanti { display: flex; flex-direction: column; gap: 0.75rem; }
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.25rem; padding: 0.75rem 1.5rem;
  border: 2px solid var(--brace); border-radius: 3px;
  background: var(--brace); color: var(--carbone);
  font-weight: 700; font-size: 1.0625rem; text-decoration: none;
  transition: background-color var(--durata-breve), border-color var(--durata-breve), color var(--durata-breve);
}
.pulsante:hover { background: var(--crema); border-color: var(--crema); }
.pulsante-chiaro { background: rgb(var(--carbone-rgb) / 0.45); color: var(--crema); border-color: var(--crema); }
.pulsante-chiaro:hover { background: var(--crema); color: var(--carbone); }
.pulsante svg { width: 1.2em; height: 1.2em; flex: none; }

.hero25d-giroscopio {
  margin-top: 1rem;
  font: inherit; font-size: 0.875rem; color: var(--cenere);
  background: rgb(var(--carbone-rgb) / 0.7);
  border: 1px solid var(--venatura); border-radius: 999px;
  padding: 0.4rem 0.9rem; cursor: pointer;
}

@media (min-width: 560px) {
  .hero-pulsanti { flex-direction: row; }
  .hero-pulsanti .pulsante { min-width: 11rem; }
}

/* Prima dell'ingresso animato i testi sono nascosti, ma solo se JavaScript gira
   (rete di sicurezza: dopo 3 secondi compaiono comunque, vedi prova-hero.html) */
.js:not(.hero-testi-pronti) .hero-titolo-netto,
.js:not(.hero-testi-pronti) .hero-segue { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero25d-tela { transition: none; }
  .pulsante { transition: none; }
}