/* ==========================================================================
   Wayvo — vertical gift card deck  [wayvo_hero_deck_vertical]

   The horizontal deck's sheet (wayvo-hero-deck.css) turned on its side, and
   the place to read the arithmetic behind --wvdv-persp / --wvdv-depth /
   --wvdv-shrink: perspective takes 10% off the position and the explicit
   scale takes the rest of the 0.703 neighbour size. The measurements for THIS
   video are in the header of shortcodes/wayvoHeroDeckVertical.php.

   The JS writes --wvdv-o, --wvdv-s and --wvdv-z per card per frame; the
   transform is assembled only here. Tune here, not in the script.
   ========================================================================== */

/* Container for the cqw cap on the card width — the section cannot be its own
   container. Content width: the column sits in whatever box it lands in. */
.wv-deck-v-wrap {
	container-type: inline-size;
}

.wv-deck-v {

	/* Fallback only. The shortcode sets this inline from its height attribute. */
	--wvdv-height: 640px;

	/* The video's proportion: card 0.45 of the frame. Off the HEIGHT here,
	   because the column's height is what the composition is measured against;
	   capped at 86% of the container width so a phone does not overflow. */
	--wvdv-card-w: min(calc(0.45 * var(--wvdv-height)), 86cqw);
	--wvdv-card-h: calc(var(--wvdv-card-w) / 1.5955);

	/* Rendered distance from the centre card to its neighbour — 0.45 of the
	   frame height in the video, which leaves half of each neighbour off the
	   top and bottom edges. The floor stops cards overlapping if the card is
	   capped hard by a narrow box while the column stays tall. */
	--wvdv-gap: max(calc(0.45 * var(--wvdv-height)), calc(1.25 * var(--wvdv-card-h)));

	/* Nominal, before perspective takes its 10%. */
	--wvdv-slot: calc(var(--wvdv-gap) / 0.9);

	--wvdv-persp: calc(1.98 * var(--wvdv-slot));
	--wvdv-depth: calc(var(--wvdv-persp) / 9);

	/* Degrees of turn per slot. Past 90, which is why the neighbours show their
	   backs and why the colour changes through a crossover. */
	--wvdv-rot: 130deg;

	/* In plane, per card. Measured off the video: the centre card's top edge
	   rises ~32px over ~490 — about 3.7deg, right side up. */
	--wvdv-tilt: -3.5deg;

	/* Must match WAYVO_HDV_SHRINK in the shortcode and SHRINK in the JS. */
	--wvdv-shrink: 0.219;

	position: relative;
	height: var(--wvdv-height);
	overflow: hidden;
}

.wv-deck-v__stage {
	position: absolute;
	inset: 0;
	perspective: var(--wvdv-persp);
	perspective-origin: 50% 50%;
	transform-style: preserve-3d;
}

/* ── One card ────────────────────────────────────────────────────────────────
   Absolutely centred, then moved entirely by transform.

   TRANSFORM ORDER IS LOAD-BEARING, as in the horizontal deck: translate, z,
   the turn, scale, and the tilt LAST so it is a tilt of the card in its own
   plane rather than of the column.

   THE TURN IS NEGATIVE. rotateX(-o * rot) is what puts each neighbour's OUTER
   edge nearer the camera, which is what the video shows (top card wider along
   its top, bottom card wider along its bottom). Flip the sign and both
   trapezoids invert. */
.wv-deck-v__card {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--wvdv-card-w);
	height: var(--wvdv-card-h);
	margin-left: calc(var(--wvdv-card-w) / -2);
	margin-top: calc(var(--wvdv-card-h) / -2);

	transform-style: preserve-3d;

	transform:
		translateY(calc(var(--wvdv-o, 0) * var(--wvdv-slot)))
		translateZ(calc(var(--wvdv-z, 0) * var(--wvdv-depth) * -1))
		rotateX(calc(var(--wvdv-o, 0) * var(--wvdv-rot) * -1))
		scale(var(--wvdv-s, 1))
		rotate(var(--wvdv-tilt));

	will-change: transform;
}

.wv-deck-v__card.is-offstage {
	visibility: hidden;
	will-change: auto;
}

/* ── The two faces ───────────────────────────────────────────────────────────
   The back is pre-turned on the Y axis — the SAME as the horizontal deck — not
   on X. Combined with the card's turn on X that comes out as a 180deg in-plane
   rotation (rotateX(180) x rotateY(180) = rotateZ(180)), which is exactly why
   the neighbours in the video read upside down rather than mirrored. Turning
   the back on X instead would show them the right way up. */
.wv-deck-v__face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.wv-deck-v__face--back {
	transform: rotateY(180deg);
}

/* The artwork carries its own rounded corners as transparency — no
   border-radius and no box-shadow (it would trace the square box). */
.wv-deck-v__face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {

	.wv-deck-v__card {
		transition: none;
		will-change: auto;
	}
}