/* ==========================================================================
   HERO — OMAR FRAIJA
   Reemplaza al carrusel de Swiper. A pantalla completa.

   Tres fotografias apiladas que entran con una CORTINA: un barrido blando
   de izquierda a derecha (mascara de degradado), lento y con la foto
   asentandose a escala. Mismo sentido de lectura que la cascada de los
   titulares y el revelado de las fotos padre. En bucle.

   Encima, abajo a la izquierda: el wordmark "Omar Fraija", el h1 y el CTA.
   El wordmark y el h1 los revela reveal.js palabra a palabra (por eso el
   h1 lleva tambien .slide-title y el wordmark entra por .hero__marca);
   aqui no se toca su opacidad. hero.js se ocupa de la cortina y del CTA.

   Sin dependencias. Respeta prefers-reduced-motion: sin cortina, sin bucle.
   Todo el estado animado del CSS vive detras de .hero--anim, que pone
   hero.js al arrancar: si el JS no corre, imagen y texto se ven enteros.
   ========================================================================== */

/* La barra fija ya no reserva alto: flota sobre la fotografia. Solo en el
   home, que es la unica pagina con .hero que carga styles.css. */
body:has(.hero) {
  padding-top: 0;
}

.hero {
  --hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* La cortina: lenta y suave. easeInOutQuint — arranca y frena sin tirones. */
  --hero-cortina: 1.8s;
  --hero-cortina-ease: cubic-bezier(0.83, 0, 0.17, 1);

  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--fondo-oscuro);
}

/* --- Capa de imagen --- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* El <picture> es solo un envoltorio para el art direction (vertical en
   movil): que no cuente en el arbol de cajas. La .hero__img de dentro se
   posiciona contra .hero__media igual que antes. */
.hero__media picture {
  display: contents;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Sin JS: la foto entera (la mascara solo se activa con .hero--anim). */
}

/* Con JS: la cortina es una MASCARA de borde blando que crece desde la
   izquierda (el 78%-100% del degradado es la pluma que difumina el frente).
   Se revela agrandando su ancho. Ademas la foto entra un pelin ampliada y
   se asienta a escala 1 mas despacio que la propia cortina: ese arrastre es
   el "efecto top". hero.js pone y quita .is-arming / .is-active / .is-entering
   y maneja el z-index. */
.hero--anim .hero__img {
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0,
    #000 78%,
    transparent 100%
  );
  mask-image: linear-gradient(to right, #000 0, #000 78%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: 0% 100%;
  mask-size: 0% 100%;
  transform: scale(1.06);
  transition:
    -webkit-mask-size var(--hero-cortina) var(--hero-cortina-ease),
    mask-size var(--hero-cortina) var(--hero-cortina-ease),
    transform calc(var(--hero-cortina) + 0.9s) ease-out;
}

.hero--anim .hero__img.is-active,
.hero--anim .hero__img.is-entering {
  -webkit-mask-size: 135% 100%;
  mask-size: 135% 100%;
  transform: scale(1);
}

/* El arranque del barrido: sin transicion, para fijar el "desde". */
.hero--anim .hero__img.is-arming {
  -webkit-mask-size: 0% 100%;
  mask-size: 0% 100%;
  transform: scale(1.06);
  transition: none;
}

/* --- Velo para leer encima. Tinta de la paleta, nunca negro puro.
       Dos bandas ancladas: una arriba para la barra del menu y otra, fuerte,
       abajo para el bloque de texto. En medio, ventana limpia para la foto.
       Tiene que aguantar tanto una foto de playa clara como una recepcion
       oscura, por eso la de abajo llega a 0.9. --- */
.hero__scrim {
  position: absolute;
  inset: 0;
  /* Por encima de cualquier z-index que hero.js ponga a las fotos (max 3),
     para que el velo nunca quede debajo de la que entra. */
  z-index: 5;
  pointer-events: none;
  /* Wordmark arriba, h1 + CTA abajo: hacen falta las DOS bandas fuertes,
     con ventana limpia en el centro para la foto. Tinta de la paleta.
     Medido con muestreo de pixel sobre las 3 fotos: contraste del texto
     blanco por encima de AA en las tres. */
  background: linear-gradient(
    180deg,
    rgba(var(--p-oscuro-rgb), 0.72) 0%,
    rgba(var(--p-oscuro-rgb), 0.36) 20%,
    rgba(var(--p-oscuro-rgb), 0.1) 40%,
    rgba(var(--p-oscuro-rgb), 0.1) 52%,
    rgba(var(--p-oscuro-rgb), 0.34) 64%,
    rgba(var(--p-oscuro-rgb), 0.56) 78%,
    rgba(var(--p-oscuro-rgb), 0.9) 100%
  );
}

/* --- Rejilla del contenido: wordmark arriba centrado, pie abajo a la izq. --- */
.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(5rem, 4rem + 4vw, 8rem) clamp(1.25rem, 4vw, 3.5rem)
    clamp(2.25rem, 4vw, 4rem);
  color: var(--texto-inverso);
}

/* El wordmark: arriba, a todo el ancho, centrado y grande. Como la marca
   del home de antes, pero ahora sobre la fotografia. */
.hero__marca {
  font-family: var(--fuente-titulo);
  font-weight: 300;
  font-size: clamp(2.2rem, 0.6rem + 8vw, 9rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  margin: 0;
  text-shadow:
    0 1px 3px rgba(var(--p-tinta-rgb), 0.55),
    0 2px 24px rgba(var(--p-tinta-rgb), 0.6);
}

/* El pie: h1 + CTA, abajo a la izquierda. */
.hero__foot {
  align-self: flex-start;
  max-width: 34rem;
}

.hero__title {
  font-family: var(--fuente-titulo);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.05rem, 0.85rem + 1vw, 1.55rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
  max-width: 28ch;
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.9rem);
  text-shadow:
    0 1px 3px rgba(var(--p-tinta-rgb), 1),
    0 2px 18px rgba(var(--p-tinta-rgb), 0.55);
}

/* CTA editorial: sin caja. Rotulo en versalitas con una linea fina debajo
   que se afina al pasar. Menos "boton", mas revista. */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--fuente-texto);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--texto-inverso);
  text-decoration: none;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(var(--p-fondo-rgb), 0.45);
  text-shadow: 0 1px 8px rgba(var(--p-tinta-rgb), 0.7);
  transition:
    border-color 0.4s var(--hero-ease),
    letter-spacing 0.4s var(--hero-ease),
    color 0.4s ease;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  color: var(--texto-inverso);
  border-bottom-color: var(--texto-inverso);
  letter-spacing: 0.32em;
  text-decoration: none;
}

.hero__cta-arrow {
  font-size: 1.05em;
  transition: transform 0.4s var(--hero-ease);
}

.hero__cta:hover .hero__cta-arrow,
.hero__cta:focus-visible .hero__cta-arrow {
  transform: translateX(7px);
}

.hero__cta:focus-visible {
  outline: 2px solid var(--texto-inverso);
  outline-offset: 6px;
}

/* --- Entrada del CTA (el wordmark y el h1 los trae reveal.js) --- */
.hero--anim .hero__cta {
  opacity: 0;
  transform: translateY(1.5rem);
}

.hero--anim.is-ready .hero__cta {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s ease,
    transform 0.7s var(--hero-ease);
  transition-delay: 0.8s;
}

/* ==========================================================================
   LA BARRA DEL MENU SOBRE EL HERO
   Al no haber banda clara bajo la barra, sus enlaces (tinta) caerian sobre
   fotografia oscura. Mientras no se ha bajado (barra transparente) y hay un
   hero, el texto de la barra pasa a claro. Al bajar, .menu--solida le pone
   fondo claro y vuelve a tinta por su propia regla.
   ========================================================================== */
body:has(.hero) .menu:not(.menu--solida) .menu__barra {
  color: var(--texto-inverso);
}

/* styles.css pinta `header { background-color: var(--fondo) }` (regla del
   header viejo de Bootstrap), que sobre .menu dejaria una banda crema encima
   de la foto. Al bajar, .menu__barra se pinta sola. */
body:has(.hero) .menu {
  background-color: transparent;
}

/* --- Sin movimiento / red de seguridad de hero.js --- */
.hero.is-static .hero__img,
.hero.is-static .hero__cta {
  transition: none !important;
}

.hero.is-static .hero__img {
  -webkit-mask-size: 135% 100%;
  mask-size: 135% 100%;
  transform: none;
}

.hero.is-static .hero__cta {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero--anim .hero__img,
  .hero--anim.is-ready .hero__cta {
    transition: none;
  }

  .hero--anim .hero__img {
    -webkit-mask-size: 135% 100%;
    mask-size: 135% 100%;
    transform: none;
  }

  .hero--anim .hero__cta {
    opacity: 1;
    transform: none;
  }
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .hero__cta {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    gap: 0.6rem;
  }

  .hero__cta:hover,
  .hero__cta:focus-visible {
    letter-spacing: 0.24em;
  }
}