/* Paleta del home: cambiar estas variables tiñe el fondo, el logo y el header */
.landing {
  --home-bg: #29c4d4;
  --home-logo-color: #ffffff;
  --header-nav-color: #ffffff;
  --header-logo-color: #ffffff;
  --header-tbc-color: #deb043;
  --header-tbc-bg: #ffffff;
  /* Ancho del logo respecto a la pantalla */
  --home-logo-width: 86%;
  /* Artista: ancho, distancia inicial al borde superior y velocidad del parallax (<1 = más lento que el scroll) */
  --artist-width: 50vw;
  --artist-top: 11svh;
  --parallax-speed: 0.6;

  background-color: var(--home-bg);
}

.landing .body {
  height: auto;
}

.landing .nav-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background-color: transparent;
}

@media (min-width: 768px) {
  .landing .nav-container {
    padding: 20px var(--header-gutter);
  }
}

.landing .navbar {
  margin: 0;
}

/* En escritorio el logo grande del hero basta; en móvil el header deja solo este enlace centrado */
.landing .header-center {
  display: none;
}

/* El alto de .hero lo calcula landing.js según el recorrido de la imagen.
   100lvh = viewport con las barras de Safari ocultas. Con 100svh el marco
   no crecía al esconderlas y overflow recortaba los pies. */
.hero {
  position: relative;
  height: 100svh;
  height: 100lvh;
}

.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
}

/* Logo a pantalla completa: la máscara deja ver el color de --home-logo-color */

.hero-logo {
  position: absolute;
  inset: 0;
  background-color: var(--home-logo-color);
  -webkit-mask-image: url('../images/home/logo-lines.svg');
          mask-image: url('../images/home/logo-lines.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: var(--home-logo-width) auto;
          mask-size: var(--home-logo-width) auto;
  top: 14%;
  left: 4%;
  right: 4%;
  height: 83vh;
}

.hero-artist {
  position: absolute;
  left: 50%;
  top: var(--artist-top);
  width: var(--artist-width);
  transform: translate3d(-50%, var(--artist-shift, 0px), 0);
  will-change: transform;
}

.hero-artist img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .landing {
    --home-logo-width: 100%;
    --artist-width: 80vw;
    --artist-top: 10svh;
  }

  .hero-logo {
    top: 0;
  }
}

@media (max-width: 767.98px) {
  .landing .header-center {
    display: block;
  }
}