/* ==========================================================================
   HERO
   Cinco portadas en fila; js/hero-slider.js desplaza la fila cada pocos
   segundos. Solo se ve una portada a la vez.
   ========================================================================== */


/* Variables del hero  ✏️ EDITABLE */
.hero {
  --hero-height: 100vh;                         /* alto de cada portada */
  /* ✏️ Título de las portadas: 100px como máximo (escritorio y tablet). En
     pantallas estrechas se reduce lo justo para que la palabra más larga
     ("PHOTOGRAPHY", 6.67 veces el tamaño de letra) quepa entre los 10px de
     margen de cada lado: (ancho de pantalla − 20px) / 6.9 (con holgura). */
  --hero-title-size: min(100px, calc((100vw - 20px) / 6.9));
  --hero-transition: 500ms;                     /* debe coincidir con js/hero-slider.js */
  --hero-logo-overlap: 0px;                     /* cuánto se mete el hero debajo del logo (escritorio abajo) */
  --hero-edge-blur: 4px;                        /* intensidad del desenfoque en los bordes */
  --hero-edge-blur-size: 9%;                    /* alto de cada franja desenfocada */
  --hero-side-fade: 48px;                       /* ancho del desvanecido en los lados (pantallas > 1280px) */
}

@supports (height: 100svh) {
  .hero {
    --hero-height: 100svh;   /* en móvil descuenta la barra del navegador */
  }
}


.hero {
  margin-top: calc(-1 * var(--hero-logo-overlap));
  padding: 0 var(--page-gutter);
  padding-left: 0%;
  padding-right: 0%;
}

/* Ventana que recorta la fila: solo deja ver una portada */
.hero__viewport {
  position: relative;
  overflow: hidden;
  isolation: isolate;   /* las franjas desenfocadas no tapan la sección siguiente */
  touch-action: pan-y;  /* en táctil: el desliz vertical hace scroll; el horizontal lo arrastra js/hero-slider.js */
}

/* Franjas desenfocadas arriba y abajo. Están fijas sobre la ventana (no se
   mueven con las portadas) y se desvanecen hacia el centro. */
.hero__viewport::before,
.hero__viewport::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: var(--hero-edge-blur-size);
  pointer-events: none;
  -webkit-backdrop-filter: blur(var(--hero-edge-blur));
          backdrop-filter: blur(var(--hero-edge-blur));
}

.hero__viewport::before {
  top: 0;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
          mask-image: linear-gradient(to bottom, black, transparent);
}

.hero__viewport::after {
  bottom: 0;
  -webkit-mask-image: linear-gradient(to top, black, transparent);
          mask-image: linear-gradient(to top, black, transparent);
}

.hero__track {
  display: flex;
  transition: transform var(--hero-transition) ease;
}

.hero-slide {
  position: relative;
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--hero-height);
  min-height: 520px;
  padding: 0 10px;
}

/* Las portadas son cuadradas (4096×4096) y llenan toda la portada (cover),
   como en el original. Los bordes superior e inferior se desvanecen. */
.hero-slide__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

.hero-slide__title {
  position: relative;      /* por encima de la imagen */
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--hero-title-size);
  font-weight: var(--font-display-weight);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

/* Móvil: la ventana es alta y estrecha. Cada portada se muestra como un
   cuadrado con su propio encuadre (en index.html):
     --hero-mobile-image-width: tamaño (100% = ancho de la pantalla)
     --hero-mobile-image-top:   posición vertical del centro (50% = centrada)
   Se permite recortar un poco los lados para que el dibujo tenga presencia. */
@media (max-width: 767px) {
  .hero-slide {
    overflow: hidden;   /* lo que sobresale de una portada no invade la siguiente */
  }

  .hero-slide__image {
    inset: auto;
    top: var(--hero-mobile-image-top, 50%);
    left: 50%;
    width: var(--hero-mobile-image-width, 100%);
    height: 600px;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    /* Además del desvanecido de arriba y abajo, los laterales de la pantalla
       se funden (últimos --hero-mobile-side-fade de cada lado) y dejan ver
       debajo la copia desenfocada. El centro de la imagen sigue nítido.
       50% = centro de la imagen; ± 50vw = bordes de la pantalla. */
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),
      linear-gradient(to right,
        transparent calc(50% - 50vw), black calc(50% - 50vw + var(--hero-mobile-side-fade)),
        black calc(50% + 50vw - var(--hero-mobile-side-fade)), transparent calc(50% + 50vw));
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),
      linear-gradient(to right,
        transparent calc(50% - 50vw), black calc(50% - 50vw + var(--hero-mobile-side-fade)),
        black calc(50% + 50vw - var(--hero-mobile-side-fade)), transparent calc(50% + 50vw));
            mask-composite: intersect;
  }

  /* Fondo desenfocado: la misma imagen de la portada (js/hero-slider.js la
     pasa en --hero-slide-bg al cargarse), en el mismo sitio y tamaño, detrás
     de la imagen nítida. Solo se ve en los laterales que se funden. Cada
     portada lleva el suyo, así que al cambiar nunca queda el de otra. */
  .hero-slide {
    --hero-mobile-side-fade: 24vw;   /* ✏️ ancho del fundido de la imagen nítida en cada lateral (≈ los 90px de arriba y abajo) */
    --hero-mobile-bg-fade: 16vw;     /* ✏️ ancho en que el fondo desenfocado se desvanece hacia el borde de la pantalla */
  }

  /* Igual que arriba y abajo, los laterales terminan en transparente (se ve
     el fondo de la página): nítido en el centro → desenfocado → nada en el
     borde, así el dibujo no queda cortado por el borde de la pantalla. */
  .hero-slide::before {
    content: "";
    position: absolute;
    top: var(--hero-mobile-image-top, 50%);
    left: 50%;
    width: var(--hero-mobile-image-width, 100%);
    height: 600px;
    transform: translate(-50%, -50%);
    background: var(--hero-slide-bg, none) center / cover no-repeat;
    filter: blur(22px);   /* ✏️ intensidad del desenfoque */
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),
      linear-gradient(to right,
        transparent calc(50% - 50vw), black calc(50% - 50vw + var(--hero-mobile-bg-fade)),
        black calc(50% + 50vw - var(--hero-mobile-bg-fade)), transparent calc(50% + 50vw));
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),
      linear-gradient(to right,
        transparent calc(50% - 50vw), black calc(50% - 50vw + var(--hero-mobile-bg-fade)),
        black calc(50% + 50vw - var(--hero-mobile-bg-fade)), transparent calc(50% + 50vw));
            mask-composite: intersect;
    pointer-events: none;
  }
}

/* Pantallas más anchas que el contenedor (1280px): las portadas se cortan a
   izquierda y derecha contra el fondo crema. Una máscara horizontal vuelve
   transparentes los extremos de forma gradual, así que se funden con el fondo
   real de la página (sin franjas de color ni cambiar los colores de las
   imágenes). El centro queda intacto y la máscara no bloquea el mouse. */
@media (min-width: 1281px) {
  .hero__viewport {
    --fade: var(--hero-side-fade);
    -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      rgba(0, 0, 0, 0.35) calc(var(--fade) * 0.33),
      rgba(0, 0, 0, 0.75) calc(var(--fade) * 0.66),
      #000 var(--fade),
      #000 calc(100% - var(--fade)),
      rgba(0, 0, 0, 0.75) calc(100% - var(--fade) * 0.66),
      rgba(0, 0, 0, 0.35) calc(100% - var(--fade) * 0.33),
      transparent 100%);
            mask-image: linear-gradient(to right,
      transparent 0,
      rgba(0, 0, 0, 0.35) calc(var(--fade) * 0.33),
      rgba(0, 0, 0, 0.75) calc(var(--fade) * 0.66),
      #000 var(--fade),
      #000 calc(100% - var(--fade)),
      rgba(0, 0, 0, 0.75) calc(100% - var(--fade) * 0.66),
      rgba(0, 0, 0, 0.35) calc(100% - var(--fade) * 0.33),
      transparent 100%);
  }
}

/* Desde tablet, el hero sube un poco para que el logo quede encima del
   borde superior de las portadas (en móvil se mantiene como está). */
@media (min-width: 768px) {
  .hero {
    --hero-logo-overlap: 90px;
  }
}