/**
 * Viora Collage widget.
 *
 * A paste-up: plates placed by hand on a stage, each at its own angle and
 * drifting at its own rate, with the copy laid over them. No column, no grid,
 * no section head — the composition is the structure.
 */

.viora-collage {
	--viora-collage-title: clamp(1.875rem, 3.47vw, 3.125rem);

	position: relative;
	padding-block: clamp(3.5rem, 7.64vw, 6.875rem);
	overflow: hidden;
}

.viora-collage__inner {
	width: min(1082px, 100% - 2 * var(--viora-layout-container-pad));
	margin-inline: auto;
}

/*
 * The stage has no height of its own: padding-top as a percentage of its own
 * width is the only way to keep an aspect ratio that the plates' percentage
 * positions can be measured against.
 */
.viora-collage__stage {
	position: relative;
	width: 100%;
	padding-top: 78%;
}

/* -------------------------------------------------- *
 * Plates
 * -------------------------------------------------- */

.viora-collage__plate {
	position: absolute;
	left: var(--viora-plate-x, 0%);
	top: var(--viora-plate-y, 0%);
	width: var(--viora-plate-w, 32%);
	margin: 0;
	/* Drift first, then the fixed angle: the script only ever writes the
	   variable, so the rotation set in the panel is never overwritten. */
	transform: translate3d(0, var(--viora-plate-drift, 0px), 0) rotate(var(--viora-plate-angle, 0deg));
	will-change: transform, scale;
}

.viora-collage__frame {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: var(--viora-plate-ratio, 1);
	overflow: hidden;
	background-color: var(--viora-color-surface-alt);
}

.viora-collage__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.viora-collage__caption {
	margin-top: 0.6rem;
	color: var(--viora-ink-soft, var(--viora-color-heading-soft));
	font-family: var(--viora-font-ui);
	font-size: 0.6875rem;
	font-weight: var(--viora-weight-medium);
	line-height: 1.6;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* -------------------------------------------------- *
 * Copy
 * -------------------------------------------------- */

.viora-collage__copy {
	position: absolute;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Wide enough that a five-word title does not stack into a column of
	   single words against the plates. */
	max-width: 34ch;
}

.viora-collage--copy-left .viora-collage__copy {
	left: 0;
}

.viora-collage--copy-right .viora-collage__copy {
	right: 0;
}

.viora-collage--copy-centre .viora-collage__copy {
	left: 50%;
	transform: translateX(-50%);
	align-items: center;
	text-align: center;
}

.viora-collage__kicker {
	color: var(--viora-color-accent);
}

.viora-collage__title {
	margin: clamp(0.6rem, 1vw, 0.9rem) 0 0;
	color: var(--viora-ink, var(--viora-color-heading));
	font-family: var(--viora-font-display);
	font-size: var(--viora-collage-title);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.viora-collage__title em {
	font-style: italic;
}

.viora-collage__text {
	margin: clamp(0.75rem, 1.25vw, 1.125rem) 0 0;
	color: var(--viora-ink-soft, var(--viora-color-heading-soft));
	font-family: var(--viora-font-ui);
	font-size: clamp(0.9375rem, 1.11vw, 1rem);
	line-height: 1.7;
}

.viora-collage__link {
	margin-top: clamp(1rem, 1.6vw, 1.375rem);
	font-size: 0.6875rem;
}

/* -------------------------------------------------- *
 * Reveal
 * -------------------------------------------------- */

.viora-collage.is-animated .viora-collage__item {
	opacity: 0;
}

/*
 * The reveal rides the `scale` property, not `transform`.
 *
 * `transform` carries the parallax drift, which the script rewrites on every
 * scroll frame. Putting the reveal's 1.2s transition on `transform` meant every
 * one of those frames was eased too, so the plates trailed about a second
 * behind the scroll and kept drifting after it stopped. `scale` is its own
 * property, so it can be transitioned on its own and the drift stays immediate.
 */
.viora-collage.is-animated .viora-collage__plate {
	scale: 0.94;
}

.viora-collage.is-animated .viora-collage__item.is-in {
	opacity: 1;
	transition: opacity 1s var(--viora-motion-easing);
}

/* Same element as the item above, so both transitions are declared together —
   a second `transition` would replace the first rather than add to it. */
.viora-collage.is-animated .viora-collage__plate.is-in {
	scale: 1;
	transition:
		opacity 1s var(--viora-motion-easing),
		scale 1.2s var(--viora-motion-easing);
}

/* -------------------------------------------------- *
 * Tablet and below — the paste-up becomes a stack
 *
 * Absolute positions in percentages stop meaning anything once the stage is
 * narrower than the plates need, so the whole composition unwinds into flow.
 * -------------------------------------------------- */

@media (max-width: 900px) {
	.viora-collage {
		padding-block: clamp(3rem, 6vw, 4.5rem);
	}

	.viora-collage__stage {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(1rem, 2.5vw, 1.75rem);
		padding-top: 0;
	}

	.viora-collage__plate {
		position: static;
		width: auto;
		transform: none;
	}

	/* The first plate keeps the emphasis it had in the composition. */
	.viora-collage__plate:first-child {
		grid-column: span 2;
	}

	.viora-collage__copy,
	.viora-collage--copy-centre .viora-collage__copy {
		position: static;
		grid-column: span 2;
		max-width: 46ch;
		margin-top: clamp(1rem, 2vw, 1.5rem);
		transform: none;
		align-items: flex-start;
		text-align: left;
	}

	/* Stacked, the plates only fade in — `transform: none` used to cancel the
	   reveal's scale along with the drift, and it still should now that the
	   scale lives on its own property. */
	.viora-collage.is-animated .viora-collage__plate,
	.viora-collage.is-animated .viora-collage__plate.is-in {
		scale: 1;
		transform: none;
	}
}

@media (max-width: 600px) {
	.viora-collage__stage {
		grid-template-columns: minmax(0, 1fr);
	}

	.viora-collage__plate:first-child {
		grid-column: auto;
	}

	.viora-collage__copy {
		grid-column: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.viora-collage.is-animated .viora-collage__item,
	.viora-collage.is-animated .viora-collage__plate,
	.viora-collage.is-animated .viora-collage__plate.is-in {
		opacity: 1;
		scale: 1;
		transform: rotate(var(--viora-plate-angle, 0deg));
		transition: none;
	}
}