/* ─── Immersive — infinite drag gallery ─────── */

.immersive-main {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
  touch-action: none;
  cursor: grab;
  /* Dragging pans the gallery; never select or drag out text and images */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.immersive-main img {
  -webkit-user-drag: none;
}

/* A drag that wanders over the header shouldn't select it either */
body.is-gallery-dragging {
  -webkit-user-select: none;
  user-select: none;
}

.immersive-main.is-dragging {
  cursor: grabbing;
}

.immersive-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.immersive-track {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.immersive-unit {
  position: absolute;
  top: 0;
  left: 0;
  width: min(1440px, 100vw);
}

/* Balanced masonry (laid out by js/immersive/masonry.js). The dev panel can
   override these via --gallery-columns / --gallery-gap / --gallery-stagger. */
.immersive-stage {
  --masonry-columns: var(--gallery-columns, 4);
  --masonry-gap: var(--gallery-gap, 64px);
  --masonry-stagger: var(--gallery-stagger, 160px);
}

.immersive-unit__grid {
  position: relative;
}

.immersive-unit__grid .gallery__cell {
  position: absolute;
  padding: 0;
}

.immersive-unit__grid .gallery__frame {
  max-height: none;
}

.immersive-unit .gallery__frame {
  position: relative;
  will-change: transform;
}

/* ─── Hover / keyboard focus: small lift + caption ─── */

/* Let the caption hang into the gap below tall pieces */
.immersive-unit .gallery__cell {
  overflow: visible;
  outline: none;
}

.immersive-unit .gallery__cell:hover,
.immersive-unit .gallery__cell.is-keyboard-focus {
  z-index: 1;
}

/* Coming back to full strength waits a beat, so crossing the gap between two
   pieces doesn't flash the whole gallery bright and dim again. */
.immersive-unit .gallery__frame img {
  transition:
    transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 700ms cubic-bezier(0.33, 0, 0.2, 1) 140ms;
}

.gallery__caption {
  position: absolute;
  display: grid;
  gap: 1px;
  padding-top: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  color: var(--black);
  opacity: 0;
  transform: translateY(-3px);
  transition:
    opacity 300ms ease,
    transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.gallery__caption-medium {
  color: rgba(var(--black-rgb), 0.55);
}

/* Desktop-like devices only: on phones there's no real hover, and tap/focus
   restore would leave captions stuck on the small tiles. Keep the media query
   in sync with HOVER_FEEDBACK_QUERY in infinite-gallery.js.
   .is-keyboard-focus is set by JS on every copy of the focused tile. */
@media (hover: hover) and (min-width: 769px) {
  .immersive-main:not(.is-dragging) .immersive-unit .gallery__cell:hover img,
  .immersive-unit .gallery__cell.is-keyboard-focus img {
    transform: scale(1.04);
  }

  /* Spotlight: the other pieces step back while one is pointed at */
  .immersive-main:not(.is-dragging) .immersive-stage.is-pointing:has(.gallery__cell:hover)
    .gallery__cell:not(:hover) .gallery__frame img {
    opacity: 0.55;
    transition:
      transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
      opacity 700ms cubic-bezier(0.33, 0, 0.2, 1);
  }

  .immersive-main:not(.is-dragging) .immersive-unit .gallery__cell:hover .gallery__caption,
  .immersive-unit .gallery__cell.is-keyboard-focus .gallery__caption {
    opacity: 1;
    transform: none;
  }
}

.immersive-unit .gallery__cell {
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.immersive-unit .gallery__cell.is-visible {
  opacity: 1;
}


#immersiveView.is-entering .immersive-unit .gallery__cell,
#immersiveView.is-leaving .immersive-unit .gallery__cell {
  transition: none;
}

/* Tiles are clickable while they ripple in; only the exit blocks input. */
#immersiveView.is-leaving .immersive-main {
  pointer-events: none;
  cursor: default;
}

/* The home view (and its header background) is restored under the fading
   gallery; keep the gallery full-bleed so it doesn't jump down meanwhile. */
#immersiveView.is-leaving {
  inset: 0;
}

@media (max-width: 1100px) {
  .immersive-stage {
    --masonry-columns: var(--gallery-columns, 3);
    --masonry-gap: var(--gallery-gap, 48px);
    --masonry-stagger: var(--gallery-stagger, 120px);
  }
}

@media (max-width: 768px) {
  .immersive-stage {
    --masonry-columns: var(--gallery-columns, 2);
    --masonry-gap: var(--gallery-gap, 20px);
    --masonry-stagger: var(--gallery-stagger, 64px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .immersive-track {
    will-change: auto;
  }

  .immersive-unit .gallery__frame {
    will-change: auto;
  }

  .immersive-unit .gallery__cell {
    opacity: 1;
    transition: none;
  }

  .immersive-unit .gallery__frame img,
  .gallery__caption {
    transition: opacity 200ms ease;
    transform: none !important;
  }
}