/* Proposte di hero A, B, C. Solo disposizione: colori, font e movimento vengono da stile.css. */

/* cornice fotografica comune: angoli morbidi, ingresso con zoom che si assesta */
.cornice { position: relative; margin: 0; overflow: hidden; border-radius: 24px; clip-path: inset(0 round 24px); background: var(--tono-nero); }
.cornice__strato { position: absolute; inset: -8% 0; will-change: transform; }
.cornice picture, .cornice .lento { display: block; width: 100%; height: 100%; }
.cornice img { width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.16); transition: transform 2200ms var(--curva), opacity 1400ms var(--curva);
  transition-delay: calc(var(--n, 0) * 100ms + 250ms); }
.pronto .cornice img, .no-js .cornice img { opacity: 1; transform: scale(1); }
.etichetta {
  position: absolute; z-index: 1; left: var(--s-200); bottom: var(--s-200); display: inline-flex; align-items: center; gap: var(--s-100);
  padding: var(--s-75) var(--s-200); border-radius: 8px; color: var(--carta); letter-spacing: 0.2em; /* 24 − 16 = 8 */
  background: rgb(18 16 14 / 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.etichetta .punto { animation: respiro 2800ms var(--curva) infinite alternate; }

/* ---------- A · collage sfalsato ---------- */
.collage { position: relative; aspect-ratio: 5 / 6; }
.collage__grande { position: absolute; inset: 0 0 24% 12%; }
.collage__grande .etichetta { top: var(--s-200); bottom: auto; }
/* le foto piccole hanno un bordo Nero che le stacca dalla grande */
.collage__basso, .collage__alto { position: absolute; z-index: 2; border: 8px solid var(--nero); background: var(--nero); }
.collage__basso  { left: 0; bottom: 0; width: 58%; aspect-ratio: 16 / 10; border-radius: 32px; clip-path: inset(0 round 32px); }
.collage__alto   { right: 0; bottom: 6%; width: 34%; aspect-ratio: 1; border-radius: 32px; clip-path: inset(0 round 32px); }
.collage__basso .cornice__strato, .collage__alto .cornice__strato { inset: -8% 0; border-radius: 24px; overflow: hidden; }
.hero--a .hero__globo { right: -120px; }
@media (min-width: 1024px) { .hero--a .collage { max-height: calc(100svh - 180px); justify-self: end; width: 100%; } }
@media (max-width: 767px) { .collage { margin-top: var(--s-200); } .collage__alto { right: 0; top: -4%; } }

/* ---------- B · titolo centrato e nastro di foto ---------- */
.hero--b { padding-bottom: var(--s-700); min-height: 0; display: block; }
.testo--centro { margin-inline: auto; text-align: center; }
.testo--centro .hero__sotto { margin-inline: auto; }
.testo--centro .hero__prova { justify-content: center; }
.hero--b { padding-top: calc(var(--s-900) + var(--s-300)); }
.hero--b .hero__sotto { margin-bottom: var(--s-400); }
.hero--b .hero__prova { margin-top: var(--s-500); }
.nastro { display: grid; grid-template-columns: 3fr 4fr 3fr; align-items: end; gap: var(--s-200); margin-top: var(--s-600); }
.nastro__lato { height: 280px; }
.nastro__centro { height: 400px; }
.nastro .cornice:first-child { transform-origin: right bottom; }
@media (max-width: 767px) {
  .nastro { grid-template-columns: 1fr 1fr; gap: var(--s-100); margin-top: var(--s-600); }
  .nastro__centro { grid-column: 1 / -1; grid-row: 1; height: 280px; }
  .nastro__lato { height: 160px; border-radius: 16px; clip-path: inset(0 round 16px); }
  .hero--b .hero__prova { justify-items: center; text-align: left; }
}

/* ---------- C · immersiva ---------- */
/* Ingresso in tre tempi: la cornice si apre e la foto si assesta (0–2,4 s), poi sale il pannello (0,5 s),
   poi dentro il pannello le righe del titolo, il testo, il pulsante e i numeri che contano. */
.hero--c { --ritardo: 650ms; padding: var(--s-200); min-height: 100svh; display: flex; }
.schermo { position: absolute; inset: var(--s-200); margin: 0; overflow: hidden; border-radius: 32px; clip-path: inset(0 round 32px);
  background: var(--blu); opacity: 0; transform: scale(0.94); transition: opacity 1200ms var(--curva-entrata), transform 1800ms var(--curva-entrata); }
.schermo__strato { position: absolute; inset: -5% 0; will-change: transform; }
.schermo picture { display: block; width: 100%; height: 100%; }
.schermo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transform: scale(1.28); transition: transform 2600ms var(--curva-entrata); }
.lento { width: 100%; height: 100%; animation: lento 28s var(--curva) 2600ms infinite alternate; }
/* lo zoom parte dal bordo sinistro: il container scivola piano verso destra, lontano dal testo */
.lento { transform-origin: 0% 50%; }
@keyframes lento { from { transform: scale(1); } to { transform: scale(1.06); } }
.pronto .schermo { opacity: 1; transform: none; }
.pronto .schermo img { transform: none; }

.schermo__contenuto { position: relative; z-index: 1; display: flex; align-items: center; width: 100%;
  padding: calc(var(--s-900) + var(--s-300)) var(--s-700) var(--s-700) clamp(var(--s-700), 8vw, 160px); }
/* margine sinistro proporzionale allo schermo: 102 px a 1280, 115 a 1440, 154 a 1920 */
/* testo direttamente sul cielo chiaro della foto: Nero e Blu porto (contrasto 11,7:1 e 10:1 sul cielo) */
.vetro { max-width: 640px;
  opacity: 0; transform: translateY(var(--s-500)); transition: opacity 1000ms var(--curva-entrata) 450ms, transform 1400ms var(--curva-entrata) 450ms; }
.pronto .vetro { opacity: 1; transform: none; }
.vetro .hero__testo { max-width: none; }
.vetro h1 { color: var(--nero); letter-spacing: -0.01em; margin-bottom: var(--s-300); }
.vetro .hero__sotto { max-width: 480px; color: var(--nero); margin-bottom: var(--s-400); }
.vetro .pulsante:hover { background: var(--nero); color: var(--carta); }
.vetro .hero__prova { margin-top: var(--s-600); gap: var(--s-200) var(--s-500); }
.vetro .hero__prova dd { color: var(--nero); }
.vetro .hero__prova dt { color: var(--blu); }
[data-conta] { font-variant-numeric: tabular-nums; }

/* titolo un passo più piccolo dove il cielo libero è più stretto */
@media (min-width: 1024px) and (max-width: 1365px) { .vetro h1 { font-size: 3rem; line-height: 1; } }

/* mobile e tablet: stessa idea del desktop in verticale. Foto a tutta altezza con il container
   intero in alto, testo in Nero sul cielo in basso. Niente sfocature né zoom continui. */
@media (max-width: 1023px) {
  .hero--c { --ritardo: 450ms; min-height: max(100svh, 720px); padding: var(--s-75); }
  .schermo { inset: var(--s-75); border-radius: 24px; clip-path: inset(0 round 24px); transform: scale(0.97); }
  .schermo__strato { inset: -4% 0; }
  .schermo img { object-position: 50% 0%; transform: scale(1.12); }
  .lento { animation: none; }
  .schermo__contenuto { align-items: flex-end; padding: 0 var(--s-300) calc(var(--s-400) + env(safe-area-inset-bottom)); }
  .vetro { width: 100%; transform: translateY(var(--s-300)); }
  .vetro .hero__sotto { margin-bottom: var(--s-300); }
  .vetro .hero__prova { margin-top: var(--s-400); }
  .vetro .pulsante { width: 100%; justify-content: center; padding-block: var(--s-100); }
}
@media (min-width: 768px) and (max-width: 1023px) { .schermo__contenuto { padding-inline: var(--s-600); } .vetro { max-width: 560px; } }

@media (prefers-reduced-motion: reduce) {
  .cornice img { transform: none !important; }
  .lento, .etichetta .punto { animation: none; }
  .schermo, .schermo img, .vetro { transform: none !important; }
}