/* Meanwhile in Music — Homepage Photo Collage
   Drop-in stylesheet. Pairs with homepage-collage.js (random photo rotation).
   All colors/spacing come from the design-system tokens in tokens/colors.css. */

.mw-collage {
  position: sticky;              /* stays pinned; page content scrolls over it */
  top: var(--mw-header-h, 88px); /* set by JS from the real header height */
  z-index: 0;
  height: calc(100dvh - var(--mw-header-h, 88px));
  overflow: hidden;
  background: var(--ink-900);
}

.mw-collage__row {
  position: absolute;
  inset: 0;
  display: flex;
}

.mw-collage__col {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  animation: mw-collage-width var(--mw-collage-pace, 48s) ease-in-out infinite;
}

/* Photos overhang their column by 1.5% and feather at both edges, so adjacent
   photos blend instead of meeting at a hard line. */
.mw-collage__photo {
  position: absolute;
  top: 0;
  left: -1.5%;
  width: 103%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 2.5%, #000 97.5%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 2.5%, #000 97.5%, transparent 100%);
  animation: mw-collage-fade var(--mw-collage-pace, 48s) ease-in-out infinite;
}

/* Column stagger: P/8 apart, each column's second layer half a cycle behind.
   Keeps all four columns on distinct rhythms at any pace. */
.mw-collage__col:nth-child(1) { animation-delay: 0s; }
.mw-collage__col:nth-child(2) { animation-delay: calc(var(--mw-collage-pace, 48s) * -0.125); }
.mw-collage__col:nth-child(3) { animation-delay: calc(var(--mw-collage-pace, 48s) * -0.25); }
.mw-collage__col:nth-child(4) { animation-delay: calc(var(--mw-collage-pace, 48s) * -0.375); }

.mw-collage__col:nth-child(1) .mw-collage__photo:nth-child(1) { animation-delay: calc(var(--mw-collage-pace, 48s) * -0.5); }
.mw-collage__col:nth-child(1) .mw-collage__photo:nth-child(2) { animation-delay: 0s; }
.mw-collage__col:nth-child(2) .mw-collage__photo:nth-child(1) { animation-delay: calc(var(--mw-collage-pace, 48s) * -0.625); }
.mw-collage__col:nth-child(2) .mw-collage__photo:nth-child(2) { animation-delay: calc(var(--mw-collage-pace, 48s) * -0.125); }
.mw-collage__col:nth-child(3) .mw-collage__photo:nth-child(1) { animation-delay: calc(var(--mw-collage-pace, 48s) * -0.75); }
.mw-collage__col:nth-child(3) .mw-collage__photo:nth-child(2) { animation-delay: calc(var(--mw-collage-pace, 48s) * -0.25); }
.mw-collage__col:nth-child(4) .mw-collage__photo:nth-child(1) { animation-delay: calc(var(--mw-collage-pace, 48s) * -0.875); }
.mw-collage__col:nth-child(4) .mw-collage__photo:nth-child(2) { animation-delay: calc(var(--mw-collage-pace, 48s) * -0.375); }

/* Ink scrim over the whole collage; the logo sits above it. */
.mw-collage__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 16, var(--mw-collage-scrim, 0.42));
  pointer-events: none;
}

.mw-collage__logo-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.mw-collage__logo {
  width: clamp(230px, 38vw, 520px);
  max-width: 80vw;
  display: block;
  /* Translucent dark halo so the wordmark separates from the photos
     without a solid backing plate. */
  filter: drop-shadow(0 0 3px rgba(20, 18, 16, .85)) drop-shadow(0 0 10px rgba(20, 18, 16, .55));
}

/* One photo fades out drifting left, then re-enters from the right.
   The fade spans the whole move, so no hard photo edge ever crosses a neighbour. */
@keyframes mw-collage-fade {
  0%   { transform: translateX(0);    opacity: 1; }
  30%  { transform: translateX(0);    opacity: 1; }
  50%  { transform: translateX(-16%); opacity: 0; }
  55%  { transform: translateX(16%);  opacity: 0; }
  80%  { transform: translateX(16%);  opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}

/* Columns breathe as their photo changes, so the visible crop of every
   neighbouring photo shifts during a transition. */
@keyframes mw-collage-width {
  0%   { flex-grow: 1; }
  25%  { flex-grow: 1; }
  40%  { flex-grow: 1.28; }
  60%  { flex-grow: 1; }
  75%  { flex-grow: 1; }
  90%  { flex-grow: 1.28; }
  100% { flex-grow: 1; }
}

/* Responsive: fewer photos on narrower viewports. */
@media (max-width: 980px) { .mw-collage__col:nth-child(4) { display: none; } }
@media (max-width: 700px) { .mw-collage__col:nth-child(3) { display: none; } }
@media (max-width: 480px) { .mw-collage__col:nth-child(2) { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .mw-collage__col,
  .mw-collage__photo { animation: none !important; }
}

/* The page content that scrolls over the pinned collage. */
.mw-collage-content {
  position: relative;
  z-index: 1;
  background: var(--surface-page);
}