/* ============================================================
   Gallery: an editorial spread moving through a dark room.
   Owns section#gallery .gallery__pin and everything inside it.
   (.gallery__head is styled by sections.css, not here.)

   Two layouts, chosen by js/components/gallery.js:
     .is-journey  desktop, fine motion: pinned viewport, the track
                  travels horizontally with scroll (RTL: first figure
                  at the right, later ones arrive from the left).
     .is-stack    mobile / reduced motion: vertical editorial stack.
   With no JS at all the default rules below render the stack, fully
   visible, so the images are never lost.
   ============================================================ */

/* ------------------------------------------------------------
   The room
   ------------------------------------------------------------ */
.gallery__pin {
  position: relative;
  margin: 0;
  background: transparent;
  isolation: isolate;
}
/* the room is the world itself: only a faint black vignette at the floor keeps the frames grounded */
.gallery__pin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(70% 45% at 50% 108%, rgba(5, 3, 4, .32) 0%, rgba(5, 3, 4, 0) 70%);
}
/* moving light: created by JS, slides with the journey (transform/opacity only) */
.gallery__light {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -32vh;
  width: 92vw;
  height: 92vh;
  margin-left: -46vw;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(214, 74, 124, .10) 0%, rgba(214, 74, 124, .04) 42%, rgba(214, 74, 124, 0) 100%);
  opacity: 0;
  will-change: transform, opacity;
}
.gallery__light--warm {
  background: radial-gradient(closest-side, rgba(255, 143, 187, .08) 0%, rgba(214, 74, 124, .03) 45%, rgba(214, 74, 124, 0) 100%);
}

.gallery__track {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------
   Figures (shared by both layouts)
   ------------------------------------------------------------ */
.gal {
  position: relative;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
}
.gal__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 6px;
  transform-origin: 50% 50%;
  background: transparent;
}
.gal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
/* before JS wraps the image, keep it filling the figure box */
.gal > img { position: absolute; inset: 0; }

/* inner vignette: the image sits in the dark, no border */
.gal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(5, 3, 4, 0) 58%, rgba(5, 3, 4, .46) 100%),
    radial-gradient(120% 100% at 50% 45%, rgba(5, 3, 4, 0) 58%, rgba(5, 3, 4, .30) 100%);
  box-shadow: inset 0 0 54px rgba(5, 3, 4, .38);
}

/* caption: Plex, small, pink-white, bottom-start of the figure */
.gal figcaption {
  position: absolute;
  z-index: 2;
  inset-inline-start: 1.1rem;
  bottom: 1rem;
  overflow: hidden;
  padding-block: .12em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: .06em;
  line-height: 1.2;
  color: var(--champagne);
  text-shadow: 0 1px 2px rgba(5, 3, 4, .85);
  pointer-events: none;
}
.gal__cap-in {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}
.gal__cap-in::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  opacity: .75;
}

/* ------------------------------------------------------------
   Stack layout (default, mobile, reduced motion)
   ------------------------------------------------------------ */
/* base.css gives every .pin a viewport height and hides overflow; the stack flows */
.gallery__pin {
  height: auto;
  overflow: visible;
}
.gallery__track {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-inline: 20px;
  width: min(100%, 880px);
  margin-inline: auto;
}
.gal { width: 100%; }
.gal:nth-child(3n + 2) { width: 82%; align-self: flex-start; }
.gal:nth-child(3n + 3) { width: 82%; align-self: flex-end; }
.gal--tall   { aspect-ratio: 3 / 4; }
.gal--wide   { aspect-ratio: 16 / 10; }
.gal--square { aspect-ratio: 1; }
.gal--small  { aspect-ratio: 4 / 3; }

/* stack reveals: IntersectionObserver toggles .in (js), reversible */
.gallery__pin.is-stack .gal {
  clip-path: inset(0 0 100% 0 round 6px);
  opacity: 0;
  transition: clip-path 1.2s var(--ease-out), opacity .8s var(--ease-out);
}
.gallery__pin.is-stack .gal.in {
  clip-path: inset(0 0 0 0 round 6px);
  opacity: 1;
}
.gallery__pin.is-stack .gal__media {
  transform: scale(1.12);
  transition: transform 1.5s var(--ease-out);
}
.gallery__pin.is-stack .gal.in .gal__media { transform: none; }
.gallery__pin.is-stack.is-instant .gal,
.gallery__pin.is-stack.is-instant .gal__media { transition: none; }

/* ------------------------------------------------------------
   Journey layout (desktop, fine motion): applied by JS only
   ------------------------------------------------------------ */
.gallery__pin.is-journey {
  --w-tall: 34vw;
  --w-wide: 48vw;
  --w-square: 30vw;
  --w-small: 26vw;
  --w-wide-2: 44vw;
  --w-wide-3: 46vw;
  height: 100vh;
  height: 100svh;
  overflow: clip;
}
@media (max-width: 1100px) {
  .gallery__pin.is-journey {
    --w-tall: 42vw;
    --w-wide: 58vw;
    --w-square: 38vw;
    --w-small: 33vw;
    --w-wide-2: 54vw;
    --w-wide-3: 56vw;
  }
}
.gallery__pin.is-journey .gallery__track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6vw;
  width: max-content;
  height: 100%;
  margin: 0;
  padding-inline: 8vw;
  will-change: transform;
}
.gallery__pin.is-journey .gal {
  flex: none;
  align-self: flex-start;
  margin-block-start: var(--y, 20vh);
  will-change: transform, clip-path;
}
/* editorial sizes: asymmetric widths, heights capped to the viewport */
.gallery__pin.is-journey .gal--tall   { width: var(--w-tall);   height: min(calc(var(--w-tall) * 1.333), 72vh); }
.gallery__pin.is-journey .gal--wide   { width: var(--w-wide);   height: min(calc(var(--w-wide) * .5625), 42vh); }
.gallery__pin.is-journey .gal--square { width: var(--w-square); height: min(var(--w-square), 50vh); }
.gallery__pin.is-journey .gal--small  { width: var(--w-small);  height: min(calc(var(--w-small) * .75), 32vh); }
/* the second and third wide frames are a touch narrower (matches their sizes hints) */
.gallery__pin.is-journey .gal--wide:nth-child(4) { width: var(--w-wide-2); height: min(calc(var(--w-wide-2) * .5625), 40vh); }
.gallery__pin.is-journey .gal--wide:nth-child(6) { width: var(--w-wide-3); height: min(calc(var(--w-wide-3) * .5625), 41vh); }
/* vertical rhythm: anchor, low, high, low, high, mid, low */
.gallery__pin.is-journey .gal:nth-child(1) { --y: 12vh; }
.gallery__pin.is-journey .gal:nth-child(2) { --y: 46vh; }
.gallery__pin.is-journey .gal:nth-child(3) { --y: 10vh; }
.gallery__pin.is-journey .gal:nth-child(4) { --y: 48vh; }
.gallery__pin.is-journey .gal:nth-child(5) { --y: 18vh; }
.gallery__pin.is-journey .gal:nth-child(6) { --y: 30vh; }
.gallery__pin.is-journey .gal:nth-child(7) { --y: 40vh; }

/* hover, fine pointers only: the image breathes, the caption rises under a mask */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .gallery__pin.is-journey .gal img { transition: transform .9s var(--ease-out); }
  .gallery__pin.is-journey .gal:hover img { transform: scale(1.04); }
  .gallery__pin.is-journey .gal__cap-in {
    transform: translateY(130%);
    transition: transform .9s var(--ease-out);
  }
  .gallery__pin.is-journey .gal:hover .gal__cap-in { transform: none; }
}

/* ------------------------------------------------------------
   HUD: hairline progress rail + counter (created by JS, journey only)
   ------------------------------------------------------------ */
.gallery__hud {
  position: absolute;
  z-index: 3;
  inset-inline: 8vw;
  bottom: 4.5vh;
  pointer-events: none;
  opacity: 0;
}
.gallery__rail {
  position: relative;
  height: 1px;
  background: rgba(251, 243, 247, .09);
  overflow: hidden;
}
.gallery__rail-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 143, 187, .25), var(--pink));
  transform-origin: 100% 50%;
  transform: scaleX(0);
  will-change: transform;
}
.gallery__count {
  position: absolute;
  bottom: .85rem;
  inset-inline-start: 0;
  display: flex;
  align-items: baseline;
  gap: .45rem;
  direction: ltr;
  font-family: var(--font-kinetic);
  font-weight: 400;
  font-size: 1.55rem;
  letter-spacing: .05em;
  line-height: 1;
  color: var(--rose);
}
.gallery__count-cur { display: inline-block; min-width: 1.3em; }
.gallery__count-sep,
.gallery__count-total { font-size: 1rem; color: var(--text-3); }