@charset "UTF-8";
/* Hero condiviso da tutte le pagine (home + pagine interne): modulo mod_maibadhero,
   una istanza per pagina con foto/titolo propri (vedi memoria hero-module). */
.hero {
  background: var(--color-bg-default-dark);
  padding-top: 80px;
  position: relative;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 72px;
  position: relative;
}

.hero-image {
  width: 1037px;
  max-width: 100%;
  height: 618px;
}
.hero-image img {
  transform-origin: 100% 50%;
}

.hero-title {
  position: absolute;
  left: 140px;
  bottom: 120px;
  max-width: 546px;
  color: var(--color-text-primary-dark);
}

/* Pagine interne: titolo hero chiaro (le pagine interne non hanno lo stesso trattamento
   dell'immagine hero della home, che resta con testo scuro). */
.page-inner .hero-title {
  color: var(--color-text-primary-light);
}

/* Effetto "tendina" (reveal a clip-path) sulla foto + parole del titolo in stagger,
   gestito via GSAP (templates/maibad/js/hero-animation.js). Ogni parola è mascherata
   da .hero-word (overflow:hidden) e la sua .hero-word-inner sale dal basso. */
.hero-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Spazio extra per i discendenti (g, j, p, q, y) tagliati dalla maschera overflow:hidden. */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

.hero-word-inner {
  display: inline-block;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero-image, .hero-image img, .hero-word-inner {
    animation: none !important;
    transform: none !important;
    clip-path: none !important;
  }
}
@media (max-width: 960px) {
  .hero-inner {
    padding: 32px 16px;
    gap: 24px;
  }
  .hero-title {
    position: static;
    max-width: 100%;
    margin-top: 24px;
  }
  /* L'altezza fissa da desktop (618px) su schermi stretti crea un'immagine enorme e
     verticale: passa a un rapporto più verticale (vicino al frame mobile di Figma). */
  .hero-image {
    height: auto;
    aspect-ratio: 358/540;
  }
}