/* Rotating Gallery.
 *
 * A band is a stack of pictures in one frame, laid on top of each other by
 * grid, with a long dissolve between them and a gentle zoom while each holds
 * the stage.
 *
 * Everything the band needs arrives as --rg-* custom properties on the band
 * element itself, written there by the shortcode, so two bands on one page can
 * hold for different lengths at different heights with no extra CSS.
 *
 * Before 0.2.0 a band was a core gallery block, and every rule here had to
 * carry a :not(#rg-boost) to reach ID rank and beat core's own gallery rules.
 * The band has its own markup now, so none of that is needed. */

.rg-band {
	display: grid;
	grid-template-columns: minmax(0, 1fr);   /* declared, or the lone column sizes to content */
	gap: 0;
}

.rg-band__slide {
	grid-area: 1 / 1;
	margin: 0;
	width: 100%;
	height: clamp(120px, 30vw, var(--rg-height, 330px));
	overflow: hidden;
	border-radius: var(--rg-radius, 6px);
	opacity: 0;
	transition: opacity var(--rg-fade, 1.6s) ease;
}

.rg-band__slide.is-active {
	opacity: 1;
}

.rg-band__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Linear on purpose: an eased drift bunches its movement into the picture's
   first moments, which are exactly the changeover, and the whole zoom then
   appears to happen at the swap. Starting slightly above 1 keeps it always
   mid-drift. The zoom rides is-drifting rather than is-active: the outgoing
   picture keeps its scale (forwards holds the end value) all through its fade,
   and rotate.js only drops the class once it is fully invisible. */
.rg-band__slide.is-drifting .rg-band__img {
	animation: rg-drift var(--rg-hold, 8.6s) linear forwards;
}

@keyframes rg-drift {
	from { transform: scale(var(--rg-from, 1.02)); }
	to { transform: scale(var(--rg-to, 1.09)); }
}

/* Until the script has taken the band over, the first picture simply stands.
   The band marks itself is-live rather than the page marking itself scripted,
   so this holds on any theme, with no cooperation asked of it: no script, no
   is-live, and the visitor sees a picture rather than an empty strip. */
.rg-band:not(.is-live) .rg-band__slide:first-child {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.rg-band__slide { transition: none; }
	.rg-band__slide.is-drifting .rg-band__img { animation: none; }
	.rg-band__slide:first-child { opacity: 1; }
}