/* =========================================================
   WURUS · POESAM 2026 — Galerie du slide 10 et sa visionneuse

   Sous la phrase de clôture, un ruban de preuves défile pendant que le
   jury écoute : les écrans du produit, les commerces où il tourne. Rien
   n'y est à lire — c'est une toile de fond. Ce qui compte se lit en grand,
   au clic, dans la visionneuse.
   ========================================================= */

/* ---------------------------------------------------------
   Le ruban
   --------------------------------------------------------- */

/* Il traverse la scène d'un bord à l'autre : les gouttières du slide sont
   annulées, et les deux extrémités s'éteignent en fondu. Un ruban qui
   s'arrête net sur la marge se lit comme une liste tronquée ; en fondu, il
   se lit comme un défilement sans fin. */
.gallery {
  position: relative;
  z-index: 1;
  align-self: stretch;
  margin: 54px calc(var(--gutter) * -1) 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg,
    transparent 0, #000 7%, #000 93%, transparent 100%);
}

.gallery__track {
  display: flex;
  width: max-content;
  animation: gallery-defile 46s linear infinite;
}

/* La piste porte deux fois la série ; -50 % ramène donc exactement la
   seconde copie sur la première (cf. scripts/components/gallery.js). */
@keyframes gallery-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Au survol, on s'arrête : la vignette qu'on vise ne doit pas fuir. Idem
   pendant que la visionneuse est ouverte. */
.gallery:hover .gallery__track,
.gallery:focus-within .gallery__track,
.gallery.is-paused .gallery__track {
  animation-play-state: paused;
}

.gallery__item {
  position: relative;
  flex: none;
  width: 296px;
  height: 188px;
  /* Une marge et non un `gap` : le `gap` ne compte pas après la dernière
     vignette, et la boucle sauterait d'un demi-écart à chaque tour. */
  margin-right: 18px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--dark-raised);
  border: var(--hairline) solid rgba(212, 162, 68, 0.26);
  transition:
    translate var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out);
}
.gallery__item:hover,
.gallery__item:focus-visible {
  translate: 0 -6px;
  border-color: var(--gold-light);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: scale var(--dur-slow) var(--ease-out);
}
.gallery__item:hover img { scale: 1.06; }

/* Le voile porte la légende : sans lui, un texte clair sur une photo
   claire devient illisible dès la première vignette lumineuse. */
.gallery__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(26, 15, 4, 0.94) 0%,
    rgba(26, 15, 4, 0.55) 38%,
    rgba(26, 15, 4, 0) 68%);
}

.gallery__legend {
  position: absolute;
  left: 14px; right: 14px; bottom: 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.gallery__kind {
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.gallery__caption {
  font-size: 14px;
  line-height: 1.25;
  color: var(--dark-ink);
}
.gallery__caption sup { font-size: 0.68em; }

.gallery__hint {
  margin-top: 16px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark-muted);
}

/* Mouvement réduit : plus de défilement, le ruban devient une bande que
   l'on parcourt soi-même. */
@media (prefers-reduced-motion: reduce) {
  .gallery { overflow-x: auto; }
  .gallery__track { animation: none; }
}

/* ---------------------------------------------------------
   La visionneuse
   --------------------------------------------------------- */

/* Elle vit dans la scène : elle est donc mise à l'échelle avec elle et
   reste cadrée en 16:9, projecteur compris. z-index 80 — au-dessus du
   menu latéral (60), qui est le plus haut de la scène. */
.lightbox {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 54px 104px;
}
.lightbox[hidden] { display: none; }

.lightbox__scrim {
  position: absolute;
  inset: 0;
  background: rgba(23, 13, 3, 0.9);
  backdrop-filter: blur(7px);
}

/* La légende passe AU-DESSUS de l'image (column-reverse) : sous une image
   qui prend toute la hauteur, elle finissait sur le bord bas de la scène,
   là où passent l'invite au plein écran et le compteur. */
.lightbox__frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 16px;
  max-width: 100%;
  margin: 0;
  pointer-events: none;   /* le clic à côté de l'image ferme */
}

.lightbox__img {
  max-width: 100%;
  max-height: 660px;
  object-fit: contain;
  border-radius: var(--radius);
  border: var(--hairline) solid rgba(212, 162, 68, 0.34);
  background: var(--dark-raised);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}

.lightbox__bar {
  display: flex;
  align-items: baseline;
  gap: 18px;
  pointer-events: auto;
}
.lightbox__kind {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.lightbox__kind[hidden] { display: none; }
.lightbox__caption {
  font-family: var(--font-intent);
  font-size: 22px;
  color: var(--dark-ink);
}
.lightbox__counter {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--dark-muted);
  font-variant-numeric: tabular-nums;
}

.lightbox__nav,
.lightbox__close {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(245, 235, 217, 0.1);
  border: var(--hairline) solid rgba(212, 162, 68, 0.32);
  color: var(--dark-ink);
  backdrop-filter: blur(6px);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    scale var(--dur-fast) var(--ease-out);
}
.lightbox__nav:hover,
.lightbox__close:hover {
  background: rgba(245, 235, 217, 0.2);
  border-color: var(--gold-light);
  scale: 1.06;
}

.lightbox__nav {
  top: 50%;
  translate: 0 -50%;
  width: 58px;
  height: 58px;
}
.lightbox__nav svg { width: 24px; height: 24px; }
.lightbox__nav--prev { left: 26px; }
.lightbox__nav--next { right: 26px; }

.lightbox__close {
  top: 26px;
  right: 26px;
  width: 46px;
  height: 46px;
}
.lightbox__close svg { width: 19px; height: 19px; }