/* ═══════════════════════════════════════════
   TEATRO AURORA — HOME PAGE
═══════════════════════════════════════════ */

/* ─── HERO ─── */
#hero {
  position:        relative;
  height:          100vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  overflow:        hidden;
}

.hero-spotlight {
  position:         absolute;
  width:            820px;
  height:           820px;
  background:       radial-gradient(ellipse at center,
    rgba(201,168,76,.1) 0%,
    rgba(201,168,76,.04) 40%,
    transparent 70%);
  top:              -220px;
  left:             50%;
  transform:        translateX(-50%);
  pointer-events:   none;
  animation:        spotPulse 7s ease-in-out infinite;
  transition:       transform .1s linear;
}

/* Le linee decorative della hero — i due montanti dorati verticali
   (.hero-curtain-l / -r) e il filo a terra (.hero-floor) — sono state
   rimosse: nate sul vecchio hero a fondo pieno, sopra le immagini a
   tutto schermo del carosello tagliavano la foto invece di incorniciarla.
   Restano nella cronologia git se dovessero riservire. */

.hero-eyebrow {
  font-family:    var(--font-label);
  font-size:      .7rem;
  letter-spacing: .55em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  2rem;
  opacity: 0;
  animation: fadeUp .8s ease forwards .4s;
}

.hero-title {
  font-family:   var(--font-display);
  font-size:     clamp(5.5rem, 13vw, 12rem);
  font-weight:   300;
  line-height:   .88;
  letter-spacing: -.02em;
  opacity: 0;
  animation: fadeUp .9s ease forwards .6s;
}
.hero-title em {
  font-style: italic;
  color:      var(--gold-light);
  display:    block;
}

.hero-sub {
  font-family:   var(--font-display);
  font-style:    italic;
  font-size:     1.25rem;
  color:         var(--text-dim);
  margin-top:    2rem;
  letter-spacing: .06em;
  opacity: 0;
  animation: fadeUp .9s ease forwards .9s;
}

.hero-actions {
  display:     flex;
  gap:         1.2rem;
  margin-top:  3.5rem;
  opacity: 0;
  animation: fadeUp .9s ease forwards 1.2s;
}

/* ═══════════════════════════════════════════
   CAROSELLO HERO
   Una slide per spettacolo: l'immagine riempie
   lo schermo, il testo le sta sopra sulla metà
   sinistra. Gestito da js/carosello.js.
═══════════════════════════════════════════ */
#hero.hero--carousel {
  justify-content: center;
  padding:         7rem var(--pad-x) 6rem;
}

/* intestazione fissa sopra il carosello: dice di chi è il sito,
   che il logo gigante non lo dice più */
.hero-eyebrow--carousel {
  position:       relative;
  z-index:        2;
  margin-bottom:  0;
  font-size:      .6rem;
  letter-spacing: .42em;
  text-shadow:    0 1px 12px rgba(4,16,17,.9);
}

.hero-slides {
  position:  relative;
  width:     100%;
  max-width: 1120px;
  flex:      1;
  display:   flex;
  align-items: center;
}

.hero-slide {
  position:    absolute;
  inset:       0;
  display:     flex;
  align-items: center;
  opacity:     0;
  visibility:  hidden;
  transition:  opacity .7s ease, visibility .7s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }

/* ═══ SFONDI A TUTTO SCHERMO ═══
   Un .hero-bg-item per slide; solo quello attivo è visibile. */
.hero-bg {
  position:  absolute;
  inset:     0;
  overflow:  hidden;
  z-index:   -2;
  pointer-events: none;
}
.hero-bg-item {
  position:   absolute;
  inset:      0;
  opacity:    0;
  transition: opacity .9s ease;
}
.hero-bg-item.is-active { opacity: 1; }

/* Le immagini restano a piena luminosità: a scurirle ci pensa il velo,
   che agisce solo dove passa il testo. */
.hero-bg-item > img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  filter:     saturate(1.08) contrast(1.05);
}

/* Velo: scurisce quanto basta a far leggere il testo, senza cancellare
   l'immagine. Più denso in basso, dove passano i pulsanti. */
#hero.hero--carousel::before {
  content:  '';
  position: absolute;
  inset:    0;
  z-index:  -1;
  background:
    /* Fascia scura sotto il testo. Deve reggere anche le locandine, che
       hanno il proprio lettering al centro: senza, si leggerebbero due
       titoli sovrapposti. Dopo il 70% l'immagine resta libera. */
    linear-gradient(95deg, rgba(8,31,33,.95) 0%, rgba(8,31,33,.88) 30%,
                           rgba(8,31,33,.6) 50%, rgba(8,31,33,.2) 70%,
                           transparent 84%),
    /* appena un accenno sopra e sotto, per nav e comandi */
    linear-gradient(to bottom, rgba(8,31,33,.62) 0%, transparent 22%,
                               transparent 74%, rgba(8,31,33,.66) 100%);
  pointer-events: none;
}

/* ─── Testo della slide ─── */
/* Larghezza contenuta: a tutto schermo il testo lascerebbe un vuoto a destra.
   L'ombra permette di tenere il velo leggero: senza, su una foto chiara il
   titolo bianco sparirebbe. */
.hero-slide-body {
  text-align:  left;
  max-width:   620px;
  text-shadow: 0 2px 18px rgba(4,16,17,.85), 0 1px 3px rgba(4,16,17,.7);
}

.hero-slide-label {
  font-family:    var(--font-label);
  font-size:      .58rem;
  letter-spacing: .3em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  1.1rem;
}
.hero-slide-title {
  font-family:    var(--font-display);
  font-size:      clamp(2.6rem, 6vw, 5rem);
  font-weight:    300;
  line-height:    .98;
  letter-spacing: -.015em;
  margin-bottom:  1.2rem;
}
.hero-slide-title em { font-style: italic; color: var(--gold-light); }

.hero-slide-sub {
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   1.2rem;
  color:       var(--text-light);
  margin-bottom: 1.6rem;
}

.hero-slide-meta {
  display:   flex;
  flex-wrap: wrap;
  gap:       2.2rem;
  margin-bottom: 2.2rem;
  padding-top:   1.4rem;
  border-top:    1px solid rgba(201,168,76,.15);
}
.hero-slide-meta-l {
  font-family:    var(--font-label);
  font-size:      .5rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  .35rem;
}
.hero-slide-meta-v {
  font-family: var(--font-display);
  font-size:   1.05rem;
  color:       var(--cream);
}
.hero-slide-meta-v em { font-style: italic; color: var(--gold-light); }

.hero-slide-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Il pulsante secondario è trasparente: sopra una foto chiara sparirebbe.
   Un fondo scuro lo stacca senza toglierlo dal fondo dell'immagine. */
.hero-slide-actions .btn-ghost {
  background:      rgba(8,31,33,.55);
  backdrop-filter: blur(3px);
  text-shadow:     none;
}
.hero-slide-actions .btn-ghost:hover { background: rgba(201,168,76,.16); }
/* il pulsante pieno ha già il suo fondo: l'ombra ereditata sporcherebbe il testo */
.hero-slide-actions .btn-gold { text-shadow: none; }

/* ─── Comandi ─────────────────────────────────
   Frecce e pallini stanno insieme in basso: ai
   lati le frecce finirebbero sopra il titolo,
   che ora occupa tutta la metà sinistra.
═══════════════════════════════════════════════ */
.hero-controls {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             1.6rem;
  margin-top:      2.5rem;
  position:        relative;
  z-index:         3;
}

.hero-nav {
  width:       38px;
  height:      38px;
  background:  rgba(8,31,33,.45);
  border:      1px solid rgba(201,168,76,.25);
  color:       var(--gold);
  font-family: var(--font-display);
  font-size:   1.3rem;
  line-height: 1;
  cursor:      pointer;
  transition:  background var(--transition-normal), border-color var(--transition-normal);
}
.hero-nav:hover { background: rgba(201,168,76,.15); border-color: var(--gold); }

.hero-dots {
  display:         flex;
  gap:             .7rem;
  justify-content: center;
}
.hero-dot {
  width:      34px;
  height:     2px;
  padding:    0;
  border:     none;
  background: rgba(201,168,76,.25);
  cursor:     pointer;
  transition: background var(--transition-normal);
}
.hero-dot:hover     { background: rgba(201,168,76,.5); }
.hero-dot.is-active { background: var(--gold); }

/* focus visibile per chi naviga da tastiera */
.hero-nav:focus-visible,
.hero-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* .hero-scroll / .hero-scroll-line (l'invito a scorrere, con il suo filo
   dorato) erano rimasti dal template e non li usava nessuna pagina:
   rimossi insieme alle altre linee della hero. */

/* ─── PREVIEW STRIP ─── */
.preview-strip {
  padding: 7rem 0 5rem;
}
.strip-label {
  font-family:    var(--font-label);
  font-size:      .65rem;
  letter-spacing: .42em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  3rem;
}
.strip-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap:                   1px;
}
.strip-card {
  position:        relative;
  padding:         3rem 2.5rem;
  background:      rgba(13, 59, 62, .25);
  border:          1px solid rgba(201,168,76,.1);
  text-decoration: none;
  color:           inherit;
  display:         block;
  overflow:        hidden;
  transition:      background var(--transition-slow),
                   border-color var(--transition-slow);
}
.strip-card:hover {
  background:    rgba(13, 59, 62, .5);
  border-color:  rgba(201,168,76,.3);
}
.strip-card-num {
  font-family:    var(--font-display);
  font-size:      5rem;
  font-style:     italic;
  color:          rgba(201,168,76,.06);
  position:       absolute;
  top:  .5rem; right: 1.5rem;
  line-height:    1;
  transition:     color var(--transition-slow);
}
.strip-card:hover .strip-card-num { color: rgba(201,168,76,.13); }
.strip-card-label {
  font-family:    var(--font-label);
  font-size:      .62rem;
  letter-spacing: .28em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  1rem;
}
.strip-card-title {
  font-family: var(--font-display);
  font-size:   2rem;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: .8rem;
}
.strip-card-desc {
  font-size:   .84rem;
  color:       var(--text-dim);
  line-height: 1.72;
}
.strip-card-arrow {
  position:   absolute;
  bottom:     2rem; right: 2rem;
  font-size:  1.2rem;
  color:      var(--gold);
  opacity:    0;
  transform:  translateX(-8px);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.strip-card:hover .strip-card-arrow { opacity: 1; transform: none; }

/* ─── NEXT SHOW ─── */
.next-show {
  padding: 0 0 8rem;
}
.next-inner {
  display:     grid;
  grid-template-columns: 1.2fr 1fr;
  gap:         5rem;
  align-items: center;
  border:      1px solid rgba(201,168,76,.15);
  padding:     4rem;
  position:    relative;
}
.next-inner::before {
  content:    '';
  position:   absolute;
  top: -1px; left: 8%; right: 55%;
  height:     2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.next-label {
  font-family:    var(--font-label);
  font-size:      .62rem;
  letter-spacing: .38em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  1.2rem;
}
.next-title {
  font-family: var(--font-display);
  font-size:   clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: .5rem;
}
.next-title em {
  font-style: italic;
  color:      var(--gold-light);
}
.next-author {
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   1.1rem;
  color:       var(--text-dim);
  margin-bottom: 2rem;
}
.next-meta {
  display:       flex;
  gap:           2.5rem;
  margin-bottom: 2rem;
}
.meta-item .meta-l {
  font-family:    var(--font-label);
  font-size:      .58rem;
  letter-spacing: .28em;
  color:          var(--text-dim);
  text-transform: uppercase;
  margin-bottom:  .25rem;
}
.meta-item .meta-v {
  font-family: var(--font-display);
  font-size:   1.05rem;
}
.next-desc {
  font-size:   .9rem;
  line-height: 1.88;
  color:       var(--text-light);
}
.next-actions {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

/* ─── QUOTE BAND ─── */
.quote-band {
  padding:       6rem var(--pad-x);
  text-align:    center;
  border-top:    1px solid rgba(201,168,76,.08);
  border-bottom: 1px solid rgba(201,168,76,.08);
  margin-bottom: 2rem;
}
.quote-band blockquote {
  font-family:   var(--font-display);
  font-style:    italic;
  font-size:     clamp(1.8rem, 4vw, 3rem);
  font-weight:   300;
  color:         var(--gold-pale);
  line-height:   1.45;
  max-width:     800px;
  margin:        0 auto 1.5rem;
}
.quote-band cite {
  font-family:    var(--font-label);
  font-style:     normal;
  font-size:      .62rem;
  letter-spacing: .42em;
  color:          var(--gold);
  text-transform: uppercase;
}

/* ─── HOME RESPONSIVE ─── */
@media (max-width: 1200px) {
  /* meno spazio: il testo si stringe per lasciar respirare l'immagine */
  .hero-slide-body { max-width: 52%; }
}

@media (max-width: 900px) {
  .strip-grid { grid-template-columns: 1fr; }
  .next-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  #hero.hero--carousel { height: auto; min-height: 100vh; padding-top: 7rem; }
  .hero-slide          { position: relative; justify-content: center; }
  /* fuori dal flusso solo le slide non attive: così l'altezza segue quella visibile */
  .hero-slide:not(.is-active) { position: absolute; inset: 0; }
  .hero-slide-body     { text-align: center; }
  .hero-slide-meta,
  .hero-slide-actions  { justify-content: center; }
  .hero-nav            { width: 38px; height: 56px; font-size: 1.3rem; }

  /* il testo passa al centro e non ha più una metà libera: serve buio uniforme */
  .hero-slide-body { max-width: 100%; }
  #hero.hero--carousel::before {
    background: linear-gradient(to bottom, rgba(8,31,33,.88) 0%, rgba(8,31,33,.62) 35%,
                                           rgba(8,31,33,.68) 65%, rgba(8,31,33,.92) 100%);
  }
}

@media (max-width: 600px) {
  .hero-actions      { flex-direction: column; align-items: center; }
  /* a spaziatura piena la riga si spezza su "stagione 2026" */
  .hero-eyebrow--carousel { font-size: .5rem; letter-spacing: .26em; }
  .hero-slide-meta   { gap: 1.4rem; }
  .hero-slide-actions{ flex-direction: column; width: 100%; }
  .hero-slide-actions .btn { width: 100%; text-align: center; }
  /* le frecce coprirebbero il testo: restano i pallini */
  .hero-nav          { display: none; }
}

/* Niente dissolvenze né autoplay per chi ha chiesto meno animazioni */
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-bg-img { transition: none; }
}