/**
 * Sketch 3D Carousel - front-end styles.
 *
 * The stage is an elliptical "orbit": every poster sits at top-left of the
 * stage and JS continuously repositions each one with translate()/scale()
 * along the ellipse (nearest item large & centered, others receding to
 * smaller/higher/dimmer positions on either side), auto-advancing forever.
 * See assets/js/carousel.js for the motion itself.
 */

.s3dc-carousel {
	--s3dc-poster-width: 200px;
	--s3dc-poster-ratio: 2 / 3;
	--s3dc-orbit-y-origin: 42px;
	--s3dc-orbit-y-radius: 48px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 20px 40px;
	text-align: center;
}

.s3dc-carousel__intro {
	max-width: 640px;
	margin: 0 auto 40px;
}

.s3dc-carousel__title {
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 12px;
}

.s3dc-carousel__subtext {
	font-size: 1rem;
	opacity: 0.65;
	margin: 0;
}

.s3dc-carousel__button {
	display: inline-block;
	margin-top: 40px;
	padding: 14px 26px;
	border-radius: 3px;
	background: #2b2b2b;
	color: #fff;
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.s3dc-carousel__button:hover,
.s3dc-carousel__button:focus {
	background: #000;
	transform: translateY(-2px);
	color: #fff;
}

.s3dc-carousel__stage {
	position: relative;
	overflow: hidden;
	height: 480px;
}

.s3dc-orbit-item {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--s3dc-poster-width);
	transform-origin: 0 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.s3dc-orbit-item.is-ready {
	opacity: 1;
}

.s3dc-poster {
	position: relative;
	aspect-ratio: var(--s3dc-poster-ratio);
	border-radius: 3px;
	cursor: pointer;
}

.s3dc-poster__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3px;
	box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22);
}

.s3dc-poster__reflection-wrap {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 25%;
	overflow: hidden;
	background: #fff;
	border-radius: 3px;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
	pointer-events: none;
}

.s3dc-poster__reflection {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
	transform: scaleY(-1);
	opacity: 0.6;
}

@media (max-width: 900px) {
	.s3dc-carousel {
		--s3dc-poster-width: 140px;
		--s3dc-orbit-y-origin: 30px;
		--s3dc-orbit-y-radius: 34px;
	}

	.s3dc-carousel__stage {
		height: 340px;
	}
}

@media (max-width: 480px) {
	.s3dc-carousel {
		--s3dc-poster-width: 110px;
		--s3dc-orbit-y-origin: 24px;
		--s3dc-orbit-y-radius: 27px;
	}

	.s3dc-carousel__stage {
		height: 270px;
	}
}

/* ─────────────────────────── Project archive ───────────────────────────
   The wider collection, revealed underneath the carousel. Posters and
   nothing else: no card, no frame, no caption — the artwork is the content,
   so the grid gives it consistent proportions, even spacing and gets out of
   the way.

   Every tile is two faces back to back inside a perspective. A page turn
   fills whichever face is currently hidden and then rotates the pair half a
   turn, so the incoming poster arrives already facing forward and the
   outgoing one is never seen reversed — that is what backface-visibility is
   doing here, not decoration.

   Every tile is the same frame at every breakpoint, and the artwork is fitted
   inside it rather than filling it: posters do not all share one shape, and a
   grid that looked tidy by cropping the titles off the odd ones out would be
   tidy about the wrong thing. The frame takes the proportions of the shortest
   posters (4:5), which is the shape that leaves the least standing room for
   the rest — a 2:3 poster keeps about 8% of the frame free down each side.

   What stands in that room is the same picture again, blown up past the edges
   and blurred right down. So a narrow poster sits on a soft field of its own
   colour instead of a black bar, and the wall reads as one surface. It is
   scaled well past the frame so the blur never reaches an edge and shows it,
   and taken down in brightness and saturation so it stays a backdrop: the
   sharp poster in front is the only thing with any detail in it.

   Colours are taken from the surroundings (currentColor) or from the host
   theme's own custom properties where it sets them, so the section belongs
   to the page it is dropped into rather than carrying its own palette. */

.s3dc-archive {
	--s3dc-archive-cols: 4;
	--s3dc-archive-rows: 5;
	--s3dc-archive-ratio: 4 / 5;
	--s3dc-archive-gap: clamp(12px, 1.4vw, 24px);
	/* The whole width the host page gives the section. The ladder at the foot
	   of this file steps the column count down before a poster gets small and
	   caps the wall at each step, so a tile stays about the same size the
	   whole way down: the wall narrows, the posters do not shrink. */
	--s3dc-archive-max: 1418px;
	--s3dc-archive-ease: var(--df-ease, cubic-bezier(.22, .8, .32, 1));
	--s3dc-flip-duration: 520ms;
	--s3dc-turn: 0;

	text-align: left;
}

.s3dc-archive[hidden] {
	display: none;
}

/* Only while opening or closing: the rest of the time nothing is clipped, so
   a focus ring on an edge tile is not cut in half. */
.s3dc-archive.is-animating {
	overflow: hidden;
}

.s3dc-archive__inner {
	padding-top: clamp(28px, 3.2vw, 56px);
}

.s3dc-archive__grid {
	display: grid;
	grid-template-columns: repeat(var(--s3dc-archive-cols), minmax(0, 1fr));
	gap: var(--s3dc-archive-gap);
	max-width: var(--s3dc-archive-max);
	margin-inline: auto;
}

/* A tile that the current page has no poster for is taken out of the layout
   rather than filled with a blank, so a part-full last page is short instead
   of padded. It is only taken out once it has finished turning away. */
.s3dc-archive__card.is-empty {
	display: none;
}

.s3dc-archive__card {
	position: relative;
	aspect-ratio: var(--s3dc-archive-ratio);
	/* The vanishing point shifts across the row, so the tiles lean towards a
	   common centre the way a wall of them would, instead of each turning
	   about a viewer of its own. */
	perspective: 1400px;
	perspective-origin: calc(50% + (var(--s3dc-col, 0) - (var(--s3dc-cols, 3) - 1) / 2) * 26%) 50%;
}

.s3dc-archive__grid.is-instant .s3dc-archive__flip {
	transition: none;
}

.s3dc-archive__flip {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: rotateY(calc(var(--s3dc-turn, 0) * 180deg));
	transition: transform var(--s3dc-flip-duration) var(--s3dc-archive-ease);
	transition-delay: var(--s3dc-delay, 0ms);
}

/* The standing room around a poster that is not the frame's shape. A wash
   rather than a card: barely there, the same on every tile, and identical
   whether the artwork is letterboxed or fits exactly. */
.s3dc-archive__face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--df-glass, rgba(128, 128, 128, .06));
	transition: background-color .4s var(--s3dc-archive-ease);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	/* Separating the two faces stops them fighting over the same plane in
	   browsers that round the depth to nothing. */
	transform: translateZ(1px);
}

.s3dc-archive__face--back {
	transform: rotateY(180deg) translateZ(1px);
}

/* The backdrop. Filling the frame is the entire point of it, so this one does
   cover — it is the only picture here allowed to be cropped, and there is
   nothing on it left to read. */
.s3dc-archive .s3dc-archive__wash {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	/* Past the frame on every side, so the blur runs out of picture well
	   outside the tile rather than smearing a visible edge across it. */
	transform: scale(1.3);
	filter: blur(26px) saturate(.72) brightness(.46);
	pointer-events: none;
	transition: filter .4s var(--s3dc-archive-ease);
}

/* Fitted, never filled, and centred in both directions — the whole poster,
   titles and credits included.

   Written with the panel in front of it rather than as a bare class: a host
   theme's own `img { height: auto }` reset carries the same weight as a single
   class, and whichever stylesheet loads last would otherwise decide whether
   the frame holds its shape. Two classes puts that beyond the load order. */
.s3dc-archive .s3dc-archive__img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

/* Only once the script has found a viewer to open them in. Without one the
   posters stay pictures, with no pointer promising something that will not
   happen. */
.s3dc-archive__card.is-interactive {
	cursor: pointer;
}

.s3dc-archive:not(.is-turning) .s3dc-archive__card.is-interactive:hover .s3dc-archive__face,
.s3dc-archive:not(.is-turning) .s3dc-archive__card.is-interactive:focus-visible .s3dc-archive__face {
	background: var(--df-glass-mid, rgba(128, 128, 128, .12));
}

/* The tile answers by letting a little more light into its backdrop. The
   poster itself is left alone: scaling a fitted picture would clip the very
   edges the fitting exists to keep. */
.s3dc-archive:not(.is-turning) .s3dc-archive__card.is-interactive:hover .s3dc-archive__wash,
.s3dc-archive:not(.is-turning) .s3dc-archive__card.is-interactive:focus-visible .s3dc-archive__wash {
	filter: blur(26px) saturate(.85) brightness(.62);
}

.s3dc-archive__card.is-interactive:focus-visible {
	outline: 2px solid var(--df-accent, currentColor);
	outline-offset: 3px;
}

.s3dc-archive__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: clamp(24px, 2.6vw, 45px);
}

.s3dc-archive__btn {
	width: 45px;
	height: 45px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	cursor: pointer;
	color: inherit;
	background: rgba(128, 128, 128, .25);
	transition: background-color .3s var(--s3dc-archive-ease),
		color .3s var(--s3dc-archive-ease),
		opacity .3s var(--s3dc-archive-ease),
		transform .2s var(--s3dc-archive-ease);
}

@supports (background: color-mix(in srgb, currentColor 25%, transparent)) {
	.s3dc-archive__btn {
		background: color-mix(in srgb, currentColor 25%, transparent);
	}
}

.s3dc-archive__btn svg {
	width: 20px;
	height: 17px;
}

.s3dc-archive__btn:hover:not(:disabled),
.s3dc-archive__btn:focus-visible:not(:disabled) {
	background: var(--df-accent, currentColor);
	color: var(--df-accent-ink, #fff);
	transform: scale(1.06);
}

.s3dc-archive__btn:disabled {
	opacity: .3;
	cursor: default;
}

/* The page count is read out rather than drawn: the arrows already show where
   the archive is by going dim at either end. */
.s3dc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The disclosure button carries a mark that turns over with it. */
.s3dc-carousel__button--toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.s3dc-carousel__button-caret {
	display: inline-flex;
	transition: transform .35s var(--s3dc-archive-ease);
}

.s3dc-carousel__button-caret svg {
	width: 12px;
	height: 8px;
}

.s3dc-carousel__button--toggle[aria-expanded="true"] .s3dc-carousel__button-caret {
	transform: rotate(180deg);
}

/* Three across once a fourth would start making the posters small, two by the
   width the page itself changes shape at, one on a phone. */
@media (max-width: 1200px) {
	.s3dc-archive {
		--s3dc-archive-cols: 3;
		--s3dc-archive-max: 1040px;
	}
}

@media (max-width: 900px) {
	.s3dc-archive {
		--s3dc-archive-cols: 2;
		--s3dc-archive-max: 720px;
	}
}

@media (max-width: 640px) {
	.s3dc-archive {
		--s3dc-archive-cols: 1;
		--s3dc-archive-max: 340px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.s3dc-orbit-item {
		transition: none;
	}

	/* No turn, no travel: the next page of posters simply replaces the last
	   one. The script matches this by treating a page change as instant. */
	.s3dc-archive,
	.s3dc-archive__flip,
	.s3dc-archive__face,
	.s3dc-archive__wash,
	.s3dc-carousel__button-caret {
		transition: none;
	}

	.s3dc-archive__card {
		perspective: none;
	}
}