/* ============================================================
   SPX hero-panorama — stili dell'unico effetto speciale (Home).
   Namespace: .hero-anim__*  ·  solo token di tokens.css.

   COMPORTAMENTO
   - Layout "finestra": foto in cornice blu Ionio (--c-accent) con barra
     arancio-firma (--c-ash) in basso a sinistra sul blu; logo + payoff
     su fondo crema (--color-bg). Desktop: foto 46% / testo 54%.
     Mobile: foto sopra, testo sotto.
   - INGRESSO in CSS (keyframe hero-anim-rise + animation-delay per lo
     stagger). Lo stato di DEFAULT delle regole è GIA' lo stato finale
     (opacita' 1, nessuna traslazione): con JS disattivato o con
     prefers-reduced-motion la hero e' subito completa e ferma.
   - La foto e' FERMA: nessun ken-burns/zoom. Il movimento e' solo l'arrivo.
   - Durata totale ~600ms (tetto duro 1s), payoff leggibile entro ~500ms.
   ============================================================ */

.hero-anim {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Quando c'e' la foto: contenitore centrato e largo al massimo del sito. */
.hero-anim--with-photo {
  max-width: var(--maxw-content);
  margin-inline: auto;
}

/* ---------- COLONNA FOTO + CORNICE ---------- */
.hero-anim__mediacol {
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-6) var(--space-3);
}

/* Cornice blu: finestra piena e generosa attorno alla foto.
   Angoli vivi (--radius-none) per il carattere sobrio. */
.hero-anim__frame {
  position: relative;
  background: var(--c-accent);
  border-radius: var(--radius-none);
  padding: var(--space-6) var(--space-6) var(--space-7);
  line-height: 0;
  box-shadow:
    0 var(--space-5) var(--space-7) calc(-1 * var(--space-5))
    color-mix(in srgb, var(--c-accent) 45%, transparent);
}

/* La foto dentro la cornice, sempre 4:5, ferma. */
.hero-anim__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}

/* Barra arancio: unico accento lineare, sul blu, in basso a sinistra. */
.hero-anim__bar {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-4);
  width: var(--space-9);
  height: var(--space-1);
  background: var(--c-ash);
}

/* ---------- COLONNA TESTO (crema) ---------- */
.hero-anim__textcol {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-8);
}

.hero-anim__logo {
  width: clamp(7.5rem, 14vw, 9.5rem);
  height: auto;
}

.hero-anim__payoff {
  margin: 0;
  max-width: var(--maxw-prose);
}

/* Payoff IT: Inter 400 su inchiostro (AAA su crema). */
.hero-anim__payoff span[lang="it"] {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-300);
  line-height: var(--lh-normal);
  color: var(--color-text);
}

/* Payoff EN: corsivo, un passo piu' piccolo, su arancio agrume. */
.hero-anim__payoff span[lang="en"] {
  display: block;
  margin-top: var(--space-3);
  font-style: italic;
  font-size: var(--fs-200);
  line-height: var(--lh-normal);
  color: var(--c-ash);
}

/* ============================================================
   INGRESSO DAL BASSO (solo CSS)
   Default = stato finale. L'animazione parte da opacita' 0 e +20px
   grazie a animation-fill-mode: both (durante il delay tiene il "from",
   a fine sequenza torna al "to" che coincide col default).
   Durata elemento = --duration-fast (200ms); stagger derivato da token.
   Sequenza: cornice -> logo -> payoff IT -> payoff EN -> barra.
   Fine sequenza ~600ms; payoff IT visibile ~400ms, EN ~500ms.
   ============================================================ */
@keyframes hero-anim-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-anim__frame,
.hero-anim__logo,
.hero-anim__payoff span[lang="it"],
.hero-anim__payoff span[lang="en"],
.hero-anim__bar {
  animation: hero-anim-rise var(--duration-fast) var(--ease-out) both;
}

.hero-anim__frame                    { animation-delay: 0ms; }
.hero-anim__logo                     { animation-delay: calc(var(--duration-fast) * 0.5); }
.hero-anim__payoff span[lang="it"]   { animation-delay: var(--duration-fast); }
.hero-anim__payoff span[lang="en"]   { animation-delay: calc(var(--duration-fast) * 1.5); }
.hero-anim__bar                      { animation-delay: calc(var(--duration-fast) * 2); }

/* ---------- TELEFONO (< 768px) ----------
   Foto piu' bassa (stessa 4:5, solo piu' piccola) cosi' logo e payoff
   entrano nel primo schermo. */
@media (max-width: 767px) {
  .hero-anim__mediacol {
    padding: var(--space-5) var(--space-5) var(--space-2);
  }
  .hero-anim__frame {
    padding: var(--space-4) var(--space-4) var(--space-6);
  }
  .hero-anim__photo {
    width: auto;
    height: 38svh;
  }
  .hero-anim__bar {
    left: var(--space-4);
    bottom: var(--space-3);
    width: var(--space-8);
  }
  .hero-anim__textcol {
    gap: var(--space-3);
    padding-top: var(--space-4);
  }
  .hero-anim__logo {
    width: 6.5rem;
  }
}

/* ---------- DESKTOP (>= 768px) ---------- */
@media (min-width: 768px) {
  .hero-anim--with-photo {
    display: grid;
    grid-template-columns: 46% 54%;
    align-items: stretch;
    min-height: 82vh;
  }
  .hero-anim__mediacol {
    padding: var(--space-8);
  }
  .hero-anim__frame {
    padding: var(--space-6) var(--space-6) var(--space-7);
  }
  .hero-anim__bar {
    left: var(--space-6);
    bottom: var(--space-5);
  }
  .hero-anim__textcol {
    align-items: flex-start;
    text-align: left;
    gap: var(--space-5);
    padding: var(--space-8) clamp(var(--space-6), 6vw, var(--space-9));
  }
  .hero-anim__payoff span[lang="it"] {
    font-size: var(--fs-400);
  }
}

/* ---------- REDUCED MOTION: stato finale statico ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-anim__frame,
  .hero-anim__logo,
  .hero-anim__payoff span[lang="it"],
  .hero-anim__payoff span[lang="en"],
  .hero-anim__bar {
    animation: none;
  }
}

/* ---------- TELEFONO IN ORIZZONTALE (schermo basso) ----------
   Con il telefono girato lo schermo è largo ma alto ~330px: la regola
   "telefono" (foto sopra, alta 38svh) la riduceva a un francobollo.
   Qui foto e testo stanno affiancati e la foto usa tutta l'altezza utile.
   Va in fondo al file per battere sia la regola telefono sia quella desktop. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero-anim--with-photo {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    align-items: center;
    min-height: 0;
  }

  .hero-anim__mediacol {
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
  }

  .hero-anim__frame {
    padding: var(--space-3) var(--space-3) var(--space-5);
  }

  .hero-anim__photo {
    width: auto;
    max-width: 100%;
    height: max(11rem, calc(100svh - 8.5rem));
  }

  .hero-anim__bar {
    left: var(--space-3);
    bottom: var(--space-2);
    width: var(--space-8);
  }

  .hero-anim__textcol {
    align-items: flex-start;
    text-align: left;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6) var(--space-4) var(--space-3);
  }

  .hero-anim__logo {
    width: 6.5rem;
  }

  .hero-anim__payoff span[lang="it"] {
    font-size: var(--fs-300);
  }

  .hero-anim__payoff span[lang="en"] {
    font-size: var(--fs-200);
  }
}