/* ═══════════════════════════════════════════
   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;
}

.hero-curtain-l,
.hero-curtain-r {
  position:   absolute;
  top: 0; bottom: 0;
  width:      1px;
  background: linear-gradient(to bottom,
    transparent 0%, var(--gold) 20%, var(--gold) 80%, transparent 100%);
  opacity:    .14;
  pointer-events: none;
}
.hero-curtain-l { left: 14%; }
.hero-curtain-r { right: 14%; }

.hero-floor {
  position:   absolute;
  bottom:     0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(to right,
    transparent, var(--gold) 25%, var(--gold-light) 50%, var(--gold) 75%, transparent);
  opacity:    .4;
}

.hero-eyebrow {
  font-family:    var(--font-label);
  font-size:      .5rem;
  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;
}

.hero-scroll {
  position:       absolute;
  bottom:         2.5rem;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .5rem;
  opacity: 0;
  animation: fadeIn 1s ease forwards 2s;
}
.hero-scroll span {
  font-family:    var(--font-label);
  font-size:      .42rem;
  letter-spacing: .42em;
  color:          var(--text-dim);
  text-transform: uppercase;
}
.hero-scroll-line {
  width:      1px;
  height:     50px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation:  scrollDrop 2.2s ease-in-out infinite 2s;
}

/* ─── PREVIEW STRIP ─── */
.preview-strip {
  padding: 7rem 0 5rem;
}
.strip-label {
  font-family:    var(--font-label);
  font-size:      .48rem;
  letter-spacing: .42em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  3rem;
}
.strip-grid {
  display:               grid;
  grid-template-columns: repeat(3, 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:      .44rem;
  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:      .45rem;
  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:      .4rem;
  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:      .45rem;
  letter-spacing: .42em;
  color:          var(--gold);
  text-transform: uppercase;
}

/* ─── HOME RESPONSIVE ─── */
@media (max-width: 900px) {
  .strip-grid { grid-template-columns: 1fr; }
  .next-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
@media (max-width: 600px) {
  .hero-actions { flex-direction: column; align-items: center; }
}