/* La galeria que se abre: las puertas claras se separan y atras crece una galeria negra con las
   filas de videos del cliente y un visor al frente. Receta `galeria-que-se-abre` de motion-web,
   adaptada a 9:16, que es el formato nativo de todo el material de Splat.

   Lo que cambia contra la receta de layr:
   - tarjetas 9:16 en vez de 3:2, medidas en vh: tres filas entran en una pantalla, cuatro no.
   - las puertas son del color de la pared (--c-pared): vienen de la portada pintada, y asi la
     costura entre una seccion y la otra no se ve.
   - el acento es el magenta fluor de la pintura, no el rojo de layr.

   Necesita tokens.css y tipografia.css antes. Aca no hay un solo hex. */

.galeria {
  height: 300vh;
  background: var(--c-noche);
  color: var(--c-hueso);
}

/* ------------------------------------------------------------------- hero */

/* La galeria es lo primero que se ve: sin puertas, sin pin y sin tapa. El material del cliente
   corriendo es el hero, y la marca va encima. Decision de Axel del 2026-09-23: la apertura con
   puertas se saco porque retrasaba lo unico que hay para mostrar. */
.galeria--hero { height: 100svh; }

.galeria__etapa {
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

/* Un velo corto arriba: la barra flota sobre las miniaturas y sobre una foto clara el menu
   desaparecia. Solo la franja de la barra, para no ensuciar la galeria. */
.galeria--hero .galeria__etapa::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 22vh;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--c-noche) 72%, transparent), transparent);
}

/* La marca, abajo a la izquierda y enorme, como el nombre de layr sobre su video. No se cruza con
   el visor porque el visor esta centrado y esto ocupa el tercio izquierdo. */
.galeria__marca {
  position: absolute;
  z-index: 3;
  left: var(--margen);
  bottom: clamp(1.5rem, 5vh, 3.5rem);
  margin: 0;
  font-family: var(--tipo-display);
  font-size: clamp(2.6rem, 10vw, 10rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--c-pared);
  pointer-events: none;
}

.galeria__marca .punto { color: var(--acento); }

.galeria__pista {
  position: absolute;
  z-index: 3;
  right: var(--margen);
  bottom: clamp(1.5rem, 5vh, 3.5rem);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--t-dato);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--c-hueso) 62%, transparent);
  pointer-events: none;
}

.galeria__pista::before {
  content: '';
  width: 2.6vw;
  min-width: 26px;
  height: 1px;
  background: currentColor;
}

.galeria__contenedor {
  position: absolute;
  inset: 0;
  background: var(--c-noche);
  overflow: hidden;
  display: grid;
  place-items: center;
  transform-origin: 50% 50%;
}

.galeria__filas {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2vh;
}

.galeria__fila {
  display: flex;
  width: max-content;
  gap: 1.2vh;
}

.galeria__fila button {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  opacity: 0.4;
  transition: opacity 300ms var(--salida);
  /* La fila mide el doble que la pantalla: la mitad de las tarjetas esta siempre afuera. Con esto
     el navegador no las pinta hasta que entran. El tamano declarado tiene que ser el real o la
     fila cambia de ancho y se rompe la vuelta: 30vh de alto por 9/16 de ancho. */
  content-visibility: auto;
  contain-intrinsic-size: 16.875vh 30vh;
}

.galeria__fila button:hover,
.galeria__fila button:focus-visible { opacity: 1; }

.galeria__fila button[aria-current='true'] { opacity: 1; }

.galeria__fila img {
  display: block;
  /* 30vh: tres filas mas sus separaciones dan 92.4vh, o sea la pantalla llena sin banda negra.
     Mas grandes seria menos tarjetas todavia, pero a 30vh la miniatura ya mide la mitad del visor
     y mas que eso le come la jerarquia. */
  height: 30vh;
  aspect-ratio: 9 / 16;
  width: auto;
  object-fit: cover;
  background: color-mix(in oklch, var(--c-hueso) 8%, var(--c-noche));
}

/* ------------------------------------------------------------------- visor */

.galeria__visor {
  position: relative;
  z-index: 2;
  height: 62vh;
  aspect-ratio: 9 / 16;
  pointer-events: none;
  transform-style: preserve-3d;
}

.galeria__pantalla {
  position: relative;
  height: 100%;
  aspect-ratio: 9 / 16;
  background: var(--c-noche);
  overflow: hidden;
  transform: scale(0.98);
  /* Sin sombra: el visor esta sobre negro, una sombra oscura no se ve y a dpr 2 se repinta con
     cada cuadro del pin. Lo que separa el visor del fondo son las escuadras y las miniaturas
     apagadas atras. */
}

/* El recuadro punteado del visor. Va en el visor y no en la pantalla porque la pantalla recorta
   (overflow hidden) y se comeria el marco. */
.galeria__visor::after {
  content: '';
  position: absolute;
  inset: -0.9vh;
  border: 1px dashed color-mix(in oklch, var(--c-hueso) 48%, transparent);
  pointer-events: none;
}

.galeria__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El telon lleva la portada de la pieza nueva como fondo y no como <img>: un <img> sin src en el
   HTML es una imagen rota hasta que alguien hace clic, y el detector de Impeccable lo marca. */
.galeria__portada {
  position: absolute;
  inset: 0;
  display: block;
  background-size: cover;
  background-position: center;
}

.galeria__telon {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--c-noche);
  visibility: hidden;
}

.galeria__etiqueta {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin: 0 0 1.2vh;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: var(--t-dato);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-hueso);
}

.galeria__play {
  width: 0;
  height: 0;
  border-top: 0.32rem solid transparent;
  border-bottom: 0.32rem solid transparent;
  border-left: 0.46rem solid var(--c-f-magenta);
}

/* Las cuatro escuadras de las esquinas del visor. */
.galeria__escuadra {
  position: absolute;
  width: 1.4vh;
  height: 1.4vh;
  z-index: 4;
  pointer-events: none;
}
.galeria__escuadra--a { top: 0; left: 0; }
.galeria__escuadra--b { top: 0; right: 0; transform: rotate(90deg); }
.galeria__escuadra--c { bottom: 0; left: 0; transform: rotate(-90deg); }
.galeria__escuadra--d { bottom: 0; right: 0; transform: rotate(180deg); }

/* ------------------------------------------------------------ cursor propio */

.galeria__cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  width: 4.5vw;
  height: 4.5vw;
  border-radius: 50%;
  background: var(--c-f-magenta);
  color: var(--c-tinta);
  font-size: var(--t-dato);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: translate(-100px, -100px) scale(0);
  will-change: transform;
}

/* ------------------------------------------------------------------ puertas */

/* `inset()` y no `translateX`: con transform queda un borde antialiasado sobre el negro. */
.galeria__puerta {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  background: var(--c-pared);
  z-index: 3;
  pointer-events: none;
}
.galeria__puerta--a { left: 0; }
.galeria__puerta--b { right: 0; }

/* La tapa: lo que se lee mientras las puertas estan cerradas. Se apaga cuando se abren. */
.galeria__tapa {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--margen);
  color: var(--c-tinta);
  pointer-events: none;
}

.galeria__tapa p { max-width: 42ch; color: var(--c-tinta-suave); }

.galeria .mw-pista {
  z-index: 5;
  color: var(--c-tinta-suave);
}

/* -------------------------------------------------------------------- movil */

/* Una sola fila, tarjetas mas grandes y el visor arriba: en vertical, tres filas de 9:16 no entran
   y el visor de 62vh deja el titulo afuera. Pin mas corto, que en telefono 300vh se hace eterno. */
@media (max-width: 760px) {
  .galeria { height: 220vh; }
  /* El hero no tiene pin: sin esto los 220vh de arriba le ganaban (misma especificidad, regla
     posterior) y el hero medía 1.786 px en un teléfono de 812, con el visor flotando en medio de
     una pantalla y media de negro. */
  .galeria--hero { height: 100svh; }
  /* Arriba queda la barra de dos renglones (~100 px) y abajo la marca (~100 px): el visor y la
     fila van entre las dos. En un teléfono bajo (640) los 40vh del visor empujaban la etiqueta
     contra COTIZAR, así que el visor cede lo que falte: 246 px son las dos franjas más la
     etiqueta. A 812 manda el 40vh. */
  .galeria--hero .galeria__contenedor { padding: 7.75rem 0 6.5rem; }
  .galeria--hero .galeria__visor { height: min(40vh, calc(75svh - 262px)); }
  /* Mas chicas que en escritorio en proporcion: a dpr 2 cada pixel de la fila y del visor se
     rasteriza dos veces, y es lo unico que separaba al pin de trabarse en la Intel HD 520. */
  .galeria__fila img { height: 22vh; }
  .galeria__fila button { contain-intrinsic-size: 12.375vh 22vh; }
  .galeria__visor { height: 40vh; order: -1; }

  /* El visor arriba y la fila abajo, apilados: con la fila detras, el visor la tapa entera y
     parece que no hubiera galeria. */
  .galeria__contenedor { display: flex; flex-direction: column; justify-content: center; gap: 3vh; }
  .galeria__filas { position: static; inset: auto; width: 100%; }
  .galeria__etiqueta { white-space: nowrap; font-size: 0.7rem; }
  .galeria__cursor { display: none; }

  /* Puertas apiladas: en vertical, dos mitades de alto se separan mejor que dos de ancho. La de
     arriba lleva un pixel de mas para que no se vea la costura mientras se van. */
  .galeria__puerta { width: 100%; height: 50%; will-change: transform; }
  .galeria__puerta--a { top: 0; height: calc(50% + 1px); }
  .galeria__puerta--b { top: 50%; bottom: auto; }
}

/* Reduced-motion (nivel estatico). La galeria deja de ser un pin: el pin son tres pantallas de
   scroll cuyo unico contenido es el movimiento, y sin movimiento son tres pantallas vacias. Queda
   una seccion normal, con el titulo arriba y las diez piezas en grilla. Cada pieza sigue estando y
   sigue siendo clickeable; lo que no hay es puertas, filas corriendo ni video solo.
   El nivel lo escribe motion-base.js en <html data-motion>; la media query esta por si el runtime
   no llego a correr. */
html[data-motion='estatico'] .galeria { height: auto; }
html[data-motion='estatico'] .galeria .mw-pin__etapa {
  position: static;
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4vh;
  padding: 10vh 0;
}
html[data-motion='estatico'] .galeria__tapa { position: static; inset: auto; order: -1; color: var(--c-hueso); }
html[data-motion='estatico'] .galeria__tapa p { color: var(--c-hueso); opacity: 0.75; }
html[data-motion='estatico'] .galeria__contenedor { position: static; inset: auto; display: flex; flex-direction: column; align-items: center; gap: 4vh; width: 100%; }
html[data-motion='estatico'] .galeria__filas { position: static; inset: auto; align-items: center; width: 100%; }
html[data-motion='estatico'] .galeria__fila { flex-wrap: wrap; justify-content: center; width: min(100%, 40rem); }
html[data-motion='estatico'] .galeria__fila button { opacity: 1; content-visibility: visible; }
html[data-motion='estatico'] .galeria__visor { height: 60vh; }
html[data-motion='estatico'] .galeria__puerta,
html[data-motion='estatico'] .galeria .mw-pista { display: none; }

@media (prefers-reduced-motion: reduce) {
  .galeria__filas { align-items: center; }
  .galeria__fila { flex-wrap: wrap; justify-content: center; width: min(100%, 40rem); }
  .galeria__fila button { opacity: 1; }
}

/* La banda que devuelve la noche de la galeria a la pared clara de la seccion siguiente. Sin esto
   el negro corta contra el crema de golpe. */
.fundido-a-pared {
  height: 24vh;
  background: linear-gradient(to bottom, var(--c-noche), var(--c-pared));
}