/* =====================================================================
   PANTALLA · Web pública · INICIO → la PORTADA
   Qué hace:    la foto a pantalla completa con la cabecera encima, la frase
                que se escribe sola, «Ver diseños» con su flecha y las tres
                capas de ondas que suben como nubes al bajar. Solo tokens del
                sistema (§4).
   Quién la usa: index.html (la portada de la web)
   Depende de:  tokens.css, base.css, componentes (icono, boton)
   Requisitos:  R-WEB-14
   ===================================================================== */

/* ---------- Portada: foto a pantalla completa con la cabecera encima ---------- */
.web-inicio__portada {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.web-inicio__foto {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 170%;   /* más alta que la portada y apoyada abajo: el cielo queda fuera y la pareja se ve grande */
  object-fit: cover;
  object-position: 48% 100%;   /* en celular, la pareja entera y apenas a la derecha */
  transform-origin: 50% 100%;
  animation: web-inicio-acercar 12s var(--curva-salida) both;
}

/* Un velo del color del fondo, más fuerte arriba (donde va el texto): en oscuro, oscurece */
.web-inicio__portada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-fondo) 80%, transparent) 0%,
    color-mix(in srgb, var(--color-fondo) 55%, transparent) 45%,
    color-mix(in srgb, var(--color-fondo) 10%, transparent) 100%);
}

.web-inicio__portada-texto {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--espacio-5);
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--espacio-7) var(--espacio-4);
}

.web-inicio__titulo {
  max-width: 32rem;
  margin: 0;
  font-size: var(--tamano-2xl);
  font-weight: 400;
}

/* La única frase manuscrita de la página (regla §4.6): se escribe sola, de izquierda a derecha */
.web-inicio__manuscrita {
  display: block;
  width: fit-content;
  color: var(--color-acento);
  font-family: var(--letra-manuscrita);
  font-size: var(--tamano-manuscrita);
  font-weight: 400;
  line-height: 1.3;
  /* Un halo suave del color del fondo: el dorado se despega de la foto (sobre todo en oscuro) */
  text-shadow: 0 0 0.5em var(--color-fondo), 0 0 1em var(--color-fondo);
}

/* inicio.js pone esta clase cada vez que la portada entra a la pantalla (y la quita al salir) */
.web-inicio__manuscrita--escribir {
  animation: web-inicio-escribir 2.2s 0.5s ease-in-out both;
}

/* Tres capas de ondas del color del fondo (33 %, 66 % y 100 %), como nubes: al bajar, SUBEN más
   rápido que la página y se mueven de lado en direcciones opuestas, tapando la foto de abajo hacia
   arriba; al subir, vuelven (inicio.js pone --desplazo en px y --avance de 0 a 1). Cada capa es la
   onda + un bloque macizo debajo, y mide 4 pantallas de ancho (centrada) para no ver el borde al
   correrse hasta 1,2 pantallas de lado. */
.web-inicio__ondas {
  --alto-onda: clamp(5rem, 12vw, 9rem);
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.web-inicio__capa {
  position: absolute;
  top: calc(100% - var(--alto-onda) + 1px);
  left: -150%;
  width: 400%;
  height: calc(100% + var(--alto-onda));
  transform: translate3d(calc(var(--avance, 0) * var(--de-lado) * 100vw), calc(var(--desplazo, 0) * var(--hacia-arriba) * -1px), 0);
  will-change: transform;
}

.web-inicio__capa::after {
  content: "";
  display: block;
  height: calc(100% - var(--alto-onda));
  background: var(--color-fondo);
}

.web-inicio__onda {
  display: block;
  width: 100%;
  max-width: none;   /* base.css limita los dibujos al ancho de la pantalla: estas son más anchas */
  height: var(--alto-onda);
  margin-bottom: -1px;
  fill: var(--color-fondo);
}

/* Las transparentes van adelante (suben más rápido) y la maciza las sigue; de lado, intercaladas */
.web-inicio__capa--1 { --de-lado: -1.2; --hacia-arriba: 1.1; opacity: 0.33; }
.web-inicio__capa--2 { --de-lado: 1.2; --hacia-arriba: 0.75; opacity: 0.66; }
.web-inicio__capa--3 { --de-lado: -0.8; --hacia-arriba: 0.45; }

/* «Ver diseños»: la flecha se adelanta cada tanto y el botón se levanta al pasar el mouse */
.web-inicio__ver {
  transition: transform var(--duracion-media) var(--curva-salida);
}

.web-inicio__ver:hover {
  transform: translateY(-2px);
}

.web-inicio__flecha {
  animation: web-inicio-empujar 2.8s ease-in-out 3s infinite;
}

@keyframes web-inicio-empujar {
  0%, 70%, 100% { transform: translateX(0); }
  80% { transform: translateX(5px); }
  90% { transform: translateX(0); }
  95% { transform: translateX(3px); }
}

/* El recorte deja 1em de margen alrededor: si no, cortaría el halo en forma de recuadro */
@keyframes web-inicio-escribir {
  from { clip-path: inset(-1em 100% -1em -1em); }
  to { clip-path: inset(-1em -1em -1em -1em); }
}

@keyframes web-inicio-acercar {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}