/* Homepage hero card carousel. Only the three .vv-cardfall__track elements animate (transform only). */
.vv-cardfall {
	--vv-cardfall-bg: #141414;
	--vv-cardfall-card: clamp(120px, 13vw, 200px);
	--vv-cardfall-gap: 20px;
	position: relative;
	height: clamp(420px, 70vh, 760px);
	overflow: hidden;
	contain: layout paint;
	perspective: 1000px;
	pointer-events: none;
	user-select: none;
	animation: vv-cardfall-in 1.4s ease-out both;
}

/* Edge fades: cheap gradient overlays instead of a mask on the moving layer. */
.vv-cardfall::before,
.vv-cardfall::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 22%;
	z-index: 2;
	pointer-events: none;
}
.vv-cardfall::before { top: 0; background: linear-gradient(var(--vv-cardfall-bg), transparent); }
.vv-cardfall::after { bottom: 0; background: linear-gradient(transparent, var(--vv-cardfall-bg)); }
/* Side fades, so the columns dissolve at the edges instead of being sliced off by the column box. */
.vv-cardfall__fade {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg, var(--vv-cardfall-bg), transparent 16%, transparent 80%, var(--vv-cardfall-bg));
}

.vv-cardfall__stage {
	position: absolute;
	inset: -30% -5% -30% 0;
	display: flex;
	justify-content: center;
	gap: var(--vv-cardfall-gap);
	transform: rotateZ(12deg) rotateY(-30deg);
	transform-origin: center;
}

.vv-cardfall__col {
	flex: 0 0 var(--vv-cardfall-card);
	width: var(--vv-cardfall-card);
}

.vv-cardfall__track {
	display: flex;
	flex-direction: column;
	will-change: transform;
	animation: vv-cardfall-scroll var(--dur, 70s) linear var(--delay, 0s) infinite var(--dir, normal);
}

/* Spacing lives inside each card (not flex gap) so the two copies are exactly equal
   and translating by -50% lands on an identical frame. */
.vv-cardfall__card {
	display: block;
	padding-bottom: var(--vv-cardfall-gap);
}
.vv-cardfall__card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 750 / 1050;
	border-radius: 3mm;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	opacity: .38; /* Dimmed per card (not on the stage) so a hovered card can come up to full opacity. */
	transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease;
}

/* Hover a card: everything stops, and that card lights up with a white border and a slight lift. */
@media (hover: hover) and (pointer: fine) {
	.vv-cardfall__card { pointer-events: auto; }
	.vv-cardfall:has(.vv-cardfall__card:hover) .vv-cardfall__track { animation-play-state: paused; }
	.vv-cardfall__card:hover img {
		position: relative;
		z-index: 1;
		opacity: 1;
		transform: scale(1.06);
		box-shadow: 0 0 0 2px #fff, 0 12px 30px rgba(0, 0, 0, .5);
	}
}

.vv-cardfall.is-paused .vv-cardfall__track { animation-play-state: paused; }

@keyframes vv-cardfall-scroll {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(0, -50%, 0); }
}
@keyframes vv-cardfall-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (max-width: 781px) {
	.vv-cardfall { --vv-cardfall-card: 110px; --vv-cardfall-gap: 12px; height: 380px; }
	.vv-cardfall__stage { inset: -35% -10%; }
}

@media (prefers-reduced-motion: reduce) {
	.vv-cardfall { animation: none; }
	.vv-cardfall__track { animation: none; }
}