/*
 * 3D Poster skin (inc/poster-card.php). After Olivier 3lanc's "FURIOSA 3D
 * Animated Poster": layers at different depths in a preserve-3d box, tilting.
 * Sized to the card with container units (cqw), not the viewport.
 */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;600&display=swap');

.wwp-poster {
	display: block;
	position: relative;
	container-type: inline-size;
	text-decoration: none !important;
	color: #fff;
	perspective: 1100px;
	/* Fills the card's image box edge to edge (King: 14px top corners). */
	border-radius: 14px 14px 0 0;
	overflow: visible;
	z-index: 2;
	/* Room under it: the tilt carries the bottom edge a few pixels down, and
	   that must land here, not on the icon rail. */
	margin-bottom: 4cqw;
}

/* Every line on the poster is white - not the site's link colour. */
.wwp-poster,
.wwp-poster:hover,
.wwp-poster span { color: #fff; }

/* The card's icon rail always sits above the poster. */
article:has(.wwp-poster) .article-meta,
article:has(.wwp-poster) .wwp-cardrail {
	position: relative;
	z-index: 3;
}

/* The cut-out may bleed a few pixels past the card - let the card show it. */
article:has(> .wwp-poster),
article:has(.wwp-poster) { overflow: visible !important; }

.wwp-poster__stage {
	display: block;
	transform-style: preserve-3d;
	animation: wwp-poster-move 10s ease-in-out infinite;
}

.wwp-poster.is-steered .wwp-poster__stage {
	animation: none;
	transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
	transition: transform .12s linear;
}

/* The swing: gentle by default (7 / 2.5 deg - no gaps at the box edges);
   "Full swing" is the CodePen's own 20 / 5 deg over 10s at 1000px perspective. */
@keyframes wwp-poster-move {
	0%   { transform: rotateY(calc(var(--wwp-poster-y, 7deg) * -1)) rotateX(calc(var(--wwp-poster-x, 2.5deg) * -1)); }
	25%  { transform: rotateY(var(--wwp-poster-y, 7deg)) rotateX(calc(var(--wwp-poster-x, 2.5deg) * -1)); }
	50%  { transform: rotateY(var(--wwp-poster-y, 7deg)) rotateX(var(--wwp-poster-x, 2.5deg)); }
	75%  { transform: rotateY(calc(var(--wwp-poster-y, 7deg) * -1)) rotateX(var(--wwp-poster-x, 2.5deg)); }
	100% { transform: rotateY(calc(var(--wwp-poster-y, 7deg) * -1)) rotateX(calc(var(--wwp-poster-x, 2.5deg) * -1)); }
}
.wwp-poster.is-full-swing { --wwp-poster-y: 20deg; --wwp-poster-x: 5deg; perspective: 1000px; }
.wwp-poster.is-full-swing .wwp-poster__stage { animation-timing-function: ease; }

@media (prefers-reduced-motion: reduce) {
	.wwp-poster__stage { animation: none; }
}

.wwp-poster__card {
	display: block;
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 14px 14px 0 0;
	transform-style: preserve-3d;
	/* Text sizes follow the poster's width AND height (cqw / cqh), so a wide
	   poster does not stack its lines into each other. */
	container-type: size;
	container-name: wwp-poster;
}

/* The back: blurred and darkened so the artist pops; clipped to the box. */
.wwp-poster__backclip {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
	background: #0b0b12;
}
.wwp-poster__back {
	position: absolute;
	inset: -6%;
	background: center / cover no-repeat;
	filter: blur(5px) brightness(.5) saturate(1.15);
	transform: scale(1.04);
}
.wwp-poster__shade {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(90% 70% at 50% 75%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%),
		linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.1) 40%, rgba(0,0,0,.3) 100%);
}

.wwp-poster__tl,
.wwp-poster__tr {
	position: absolute;
	top: 5%;
	font: 600 3.1cqw/1.1 'Oswald', 'Arial Narrow', sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-shadow: 0 0 3cqw rgba(0, 0, 0, .8);
	transform: translateZ(4cqw);
}
/* Clear of the card's bookmark icon in the top-left corner. */
.wwp-poster__tl { left: 17%; }
.wwp-poster__tr { right: 7%; text-align: right; }

.wwp-poster__mid {
	position: absolute;
	top: 18%;
	left: 0;
	width: 100%;
	text-align: center;
	font: 400 2.6cqw/1 'Oswald', 'Arial Narrow', sans-serif;
	letter-spacing: .45em;
	text-transform: uppercase;
	transform: translateZ(4cqw);
}

.wwp-poster__head {
	position: absolute;
	top: 21%;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	transform: translateZ(9cqw);
	transform-style: preserve-3d;
}

.wwp-poster__title,
.wwp-poster__bottom > span {
	position: relative;
	font-family: 'Anton', 'Impact', 'Haettenschweiler', sans-serif;
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
	background-image: var(--wwp-poster-fill);
	background-size: cover;
	background-position: center;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* The glow copy behind the filled letters, as in the original. */
.wwp-poster__title::before,
.wwp-poster__bottom > span::before {
	content: attr(data-title);
	position: absolute;
	inset: 0;
	-webkit-text-fill-color: var(--wwp-poster-glow);
	color: var(--wwp-poster-glow);
	mix-blend-mode: overlay;
	text-shadow: 0 0 4cqw rgba(0, 0, 0, .45), 1px 1px var(--wwp-poster-edge);
	pointer-events: none;
}

.wwp-poster__bottom {
	position: absolute;
	top: 48%;
	left: 6%;
	right: 6%;
	display: flex;
	justify-content: space-between;
	font-size: min(9cqw, 8cqh);
	letter-spacing: .12em;
	transform: translateZ(9cqw);
}
.wwp-poster__bottom > span { font-size: inherit; }

.wwp-poster__front {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	max-height: 80%;
	object-fit: contain;
	object-position: bottom center;
	/* A few pixels' bleed past the side edges: the trick of popping out of it.
	   None at the bottom - that edge sits on the icon rail. */
	left: -2.5%;
	width: 105%;
	bottom: 0;
	transform: translateZ(10cqw) scale(.92);
	transform-origin: bottom center;
	filter: drop-shadow(0 0 3cqw rgba(0, 0, 0, .55)) drop-shadow(0 0 1px rgba(255, 255, 255, .25));
}

/* Title fills. */
.wwp-poster.is-neon   { --wwp-poster-fill: linear-gradient(100deg, #ff2fb3 0%, #ff7ad9 35%, #5ef0ff 70%, #3b7bff 100%); --wwp-poster-glow: #ffffff40; --wwp-poster-edge: #ff2fb3; }
.wwp-poster.is-pastel { --wwp-poster-fill: linear-gradient(100deg, #8fd9ff 0%, #c9b8ff 45%, #ffb3d9 100%); --wwp-poster-glow: #ffffff55; --wwp-poster-edge: #6fb8ff; }
.wwp-poster.is-chrome { --wwp-poster-fill: linear-gradient(180deg, #ffffff 0%, #c9ced6 38%, #5e6672 52%, #e6e9ee 70%, #9aa2ad 100%); --wwp-poster-glow: #ffffff30; --wwp-poster-edge: #3a4048; }
.wwp-poster.is-gold   { --wwp-poster-fill: linear-gradient(180deg, #fff3b0 0%, #ffcd1c 40%, #b8860b 60%, #ffe27a 100%); --wwp-poster-glow: #ffc61c5e; --wwp-poster-edge: #8a5a00; }
.wwp-poster.is-rust   { --wwp-poster-fill: linear-gradient(160deg, #e0a15a 0%, #b4532a 40%, #6e2a12 70%, #d98a4a 100%); --wwp-poster-glow: #ffc61c5e; --wwp-poster-edge: #bf4528; }

/* The furthest-back layer only: slightly see-through, so the page shows
   behind the artist and the front layers pop. */
.wwp-poster__backclip { opacity: var(--wwp-poster-backop, 1); }

/* Poster stands alone: no title or category line - the icon rail stays. */
article:has(.wwp-poster.is-alone) .article-meta-head {
	display: none !important;
}

/* --- in the landing grid (king-grid-01): fit the row, never set it ---------
   Covers there are var(--wwp-card-cover-h, 300px); a 4:5 poster was taller
   than every other card, so its row grew and the TV and record cards beside
   it filled with blank space (owner, 2026-10-07). Here the poster takes the
   row's height - the cover height at least - like the vinyl card does. */
.king-grid-01 .king-posts article:has(> .wwp-poster) > .wwp-poster {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: var(--wwp-card-cover-h, 300px);
	margin-bottom: 10px;
}
.king-grid-01 .king-posts article:has(> .wwp-poster) > .wwp-poster > .wwp-poster__stage {
	flex: 1 1 auto;
	position: relative;
	min-height: var(--wwp-card-cover-h, 300px);
}
/* Pinned to the stage, so its height is definite: text sized by height
   (cqh) read 0 when the height came from the flex row (2026-10-07). */
.king-grid-01 .king-posts article:has(> .wwp-poster) > .wwp-poster .wwp-poster__card {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}
/* The rail keeps only its own height; the poster has the rest. */
.king-grid-01 .king-posts > li.king-post-item > article:has(> .wwp-poster) > .article-meta {
	flex: 0 0 auto;
}

/* A poster about as wide as it is tall (a phone's single-column grid): the
   title moves up and the cut-out comes down a little, so her head no longer
   sits on the title. */
@container wwp-poster (min-aspect-ratio: 9 / 10) {
	.wwp-poster__mid { top: 11%; }
	.wwp-poster__head { top: 15%; }
	.wwp-poster__bottom { top: 41%; }
	.wwp-poster__front { max-height: 60%; }
}