/* Hero: el título y la entradilla.
   Parte de styles/ — se cargan en orden desde index.html. */

.hero {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 3rem) var(--bleed) 4rem;
  /* minmax(0,1fr): sin esto la columna se estira al ancho de "SESSIONS" y
     arrastra a todo lo demás fuera de la pantalla en móvil. */
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;
  max-width: var(--maxw); margin-inline: auto;
}

.hero__eyebrow {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 1.6rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--hueso-70);
  /* En móvil el sol le queda justo detrás y se lavaba. Aquí sí sirve
     text-shadow —el texto es sólido, no hueco como "SESSIONS"— y es mucho
     más barato que un filter. */
  text-shadow: 0 0 12px rgb(7 8 15 / .6);
}
.hero__title {
  margin: 0;
  font-family: var(--display); font-variation-settings: 'wdth' 125;
  font-weight: 900;
  /* Topes calculados para que "SESSIONS" (la palabra más larga) quepa
     desde 320px hasta pantallas grandes sin desbordar. */
  font-size: clamp(2.4rem, 13vw, 11.5rem);
  line-height: .82; letter-spacing: -.025em; text-transform: uppercase;
  text-wrap: balance;

  /* Halo oscuro pegado a las letras, para que el título no se pierda cuando
     pasa por el núcleo del sol (que es casi blanco).

     drop-shadow y no text-shadow: text-shadow dibuja la silueta del glifo, y
     como "SESSIONS" tiene el relleno transparente la sombra se vería POR
     DENTRO y las letras dejarían de ser huecas. drop-shadow trabaja sobre el
     alfa ya renderizado, así que en esa línea sombrea sólo el contorno.

     Van dos: una corta que define el borde y otra ancha que separa del
     fondo. Sobre el cielo oscuro no se nota; sólo aparece donde hay luz
     detrás. El sol no se toca. */
  filter: drop-shadow(0 0 clamp(8px, 1.3vw, 20px) rgb(7 8 15 / .62));
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .w { display: block; }
.hero__title .line:nth-child(2) .w { color: transparent; -webkit-text-stroke: 1.5px var(--hueso); }

.hero__lede {
  max-width: min(34ch, 100%); margin: 2rem 0 0;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
  color: var(--hueso-70); text-wrap: pretty;
}

/* --- la flecha de "baja" --- */
.scrollcue {
  position: absolute; left: var(--bleed); bottom: 2rem;
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--hueso-70); text-decoration: none;
  /* Cae sobre los edificios: sin esto se pierde entre las ventanas. */
  text-shadow: 0 0 10px rgb(7 8 15 / .85);
}
.scrollcue svg { width: 11px; height: 30px; fill: none; stroke: var(--oro); stroke-width: 1.4; }
.scrollcue svg path { animation: baja 2.2s var(--ease) infinite; }
@keyframes baja {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(5px); opacity: 1; }
}

@media (max-width: 780px) {
  .scrollcue span { display: none; }   /* sólo queda la flecha */
}

@media (max-width: 560px) {
  .hero__title .line:nth-child(2) .w { -webkit-text-stroke-width: 1px; }
}