/* Pitch-deck cases (template-parts/portfolio-content/deck.php, assets/js/deck.js).

   Each slide is rebuilt from its Figma layers: every layer is a WebP placed by
   percentage on a 16:9 stage, so the slide reads exactly like the deck at any width.
   Motion only exists once deck.js has put .deck-motion on <html> (it doesn't under
   prefers-reduced-motion): without it every layer simply sits in its final place.

   One motion language for all decks: the stage rises, the background settles, glows
   breathe in, objects surface out of a soft blur, titles rise out of their own mask,
   copy and cards follow in reading order, rules draw themselves. Durations sit
   between 1.1s and 2.4s on one expo-out curve, so nothing snaps and nothing lingers. */

.deck {
	--deck-ease: cubic-bezier(.16, 1, .3, 1);
	--deck-ease-io: cubic-bezier(.65, 0, .35, 1);
	padding: 4rem 0 4rem;
	color: #fff;
}

.deck__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.6rem;
	margin-bottom: 3.2rem;
	font-size: 1.6rem;
	font-weight: 500;
}

.deck__label {
	color: #e5b080;
}

.deck__count {
	color: #989898;
	font-variant-numeric: tabular-nums;
}

.deck-slide {
	margin: 0 0 6.4rem;
}

.deck-slide__stage {
	position: relative;
	aspect-ratio: var(--ar, 16 / 9);
	overflow: hidden;
	isolation: isolate;
	container-type: inline-size;
	background: var(--bg, #0b0d0f);
	border-radius: 1.6rem;
	box-shadow: 0 0 0 .1rem rgba(255, 255, 255, .06), 0 4rem 10rem -3rem rgba(0, 0, 0, .7);
	/* Layers lean against the pointer (--mx/--my, -1..1) and drift with the scroll
	   (--p, -1..1 around the viewport centre). deck.js sets the three. */
	--mx: 0;
	--my: 0;
	--p: 0;
}

.dl {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--w);
	height: var(--h);
	--z: .25;  /* pointer depth: copy and cards barely move against their ground */
	--pz: 0;   /* scroll depth */
	translate: calc(var(--mx) * var(--z) * -.6cqw) calc(var(--my) * var(--z) * -.6cqw + var(--p) * var(--pz) * 1.6cqw);
}

.dl__in,
.dl img {
	display: block;
	width: 100%;
	height: 100%;
}

/* A Figma background blur, rebuilt: the backdrop is blurred inside the layer's own
   silhouette. Figma's radius is twice the CSS one; --bb is in 1920-wide slide px. */
.dl__bb {
	position: absolute;
	inset: 0;
	-webkit-backdrop-filter: blur(calc(var(--bb) * 50cqw / 1920));
	backdrop-filter: blur(calc(var(--bb) * 50cqw / 1920));
	-webkit-mask: var(--mask) center / 100% 100% no-repeat;
	mask: var(--mask) center / 100% 100% no-repeat;
}

.dl--bg { --z: .15; }
.dl--fx,
.dl--glow { --z: .3; --pz: -.5; }
.dl--visual { --z: 1.2; --pz: .8; }
.dl--ui { --z: .6; --pz: .4; }

/* A layer that runs off the slide's edge (a photo, a full-width glow) is part of
   the frame: shifting it would open a gap at the edge, so it stays put after its
   entrance. deck.js marks these. */
.dl--pinned { --z: 0; --pz: 0; --amp: 0; }
.dl--title { overflow: hidden; }

.deck-slide__caption {
	display: flex;
	align-items: baseline;
	gap: 1.6rem;
	margin-top: 1.6rem;
	font-size: 1.6rem;
	line-height: 1.4;
	color: #989898;
}

.deck-slide__num {
	flex: none;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

/* ---- entrance -------------------------------------------------------------- */

.deck-motion .deck-slide__stage {
	opacity: 0;
	transform: translate3d(0, 4.8rem, 0) scale(.985);
	transition: opacity .9s ease, transform 1.4s var(--deck-ease);
}

.deck-motion .deck-slide.is-in .deck-slide__stage {
	opacity: 1;
	transform: none;
}

.deck-motion .dl__in,
.deck-motion .dl__bb {
	transition-property: opacity, transform, filter, clip-path;
	transition-duration: 1.4s;
	transition-timing-function: var(--deck-ease);
	transition-delay: calc(var(--d, 0s) + .15s);
}

.deck-motion .dl__bb { opacity: 0; transition-property: opacity; }
.deck-motion .is-in .dl__bb { opacity: 1; }

.deck-motion .deck-slide:not(.is-done) .dl__in {
	will-change: transform, opacity;
}

/* background: settles from a slow zoom */
.deck-motion .dl--bg .dl__in,
.deck-motion .dl--flat .dl__in {
	opacity: 0;
	transform: scale(1.08);
	transition-duration: 1.2s, 2.4s;
}

/* glows, textures, big shapes: breathe in */
.deck-motion .dl--fx .dl__in,
.deck-motion .dl--glow .dl__in {
	opacity: 0;
	transform: scale(1.05);
	transition-duration: 2s;
}

/* 3D objects and photos: surface out of a soft blur */
.deck-motion .dl--visual .dl__in {
	opacity: 0;
	transform: translate3d(0, 6cqw, 0) scale(.94);
	filter: blur(.8cqw);
	transition-duration: 1.6s;
}

/* screens and mockups: tip up from a shallow angle */
.deck-motion .dl--ui .dl__in {
	opacity: 0;
	transform: perspective(120cqw) rotateX(12deg) translate3d(0, 5cqw, 0) scale(.96);
	transform-origin: 50% 100%;
	transition-duration: 1.6s;
}

/* headlines: rise out of their own mask */
.deck-motion .dl--title .dl__in {
	opacity: .2;
	transform: translate3d(0, 105%, 0);
	transition-duration: 1s, 1.3s;
}

/* body copy: lift and sharpen */
.deck-motion .dl--text .dl__in {
	opacity: 0;
	transform: translate3d(0, 1.6cqw, 0);
	filter: blur(.4cqw);
	transition-duration: 1.1s;
}

/* cards, tables, stat blocks */
.deck-motion .dl--card .dl__in {
	opacity: 0;
	transform: translate3d(0, 2.4cqw, 0) scale(.97);
	transition-duration: 1.2s;
}

/* logos, icons, small marks: a soft pop */
.deck-motion .dl--deco .dl__in {
	opacity: 0;
	transform: scale(.6);
	transition-duration: .5s, .9s;
	transition-timing-function: ease, cubic-bezier(.34, 1.56, .64, 1);
}

/* rules draw themselves */
.deck-motion .dl--lineh .dl__in {
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition-timing-function: var(--deck-ease-io);
}

.deck-motion .dl--linev .dl__in {
	transform: scaleY(0);
	transform-origin: 50% 0;
	transition-timing-function: var(--deck-ease-io);
}

/* charts wipe in left to right */
.deck-motion .dl--chart .dl__in {
	clip-path: inset(0 100% 0 0);
	transition-duration: 1.8s;
	transition-timing-function: var(--deck-ease-io);
}

.deck-motion .is-in .dl__in {
	opacity: 1;
	transform: none;
	filter: none;
	clip-path: inset(0 0 0 0);
}

/* ---- idle: only while the slide is on screen ---------------------------------- */

.deck-motion .dl--visual img {
	animation: deck-float 9s ease-in-out calc(var(--d, 0s) + 1.6s) infinite alternate both paused;
}

/* only soft, see-through glows breathe: an opaque shape that dimmed would show
   whatever the deck keeps under it */
.deck-motion .dl--glow img {
	animation: deck-breathe 11s ease-in-out calc(var(--d, 0s) + 2s) infinite alternate both paused;
}

.deck-motion .is-in.is-visible .dl--visual img,
.deck-motion .is-in.is-visible .dl--glow img {
	animation-play-state: running;
}

@keyframes deck-float {
	from { transform: translate3d(0, calc(var(--amp, 1) * -.5cqw), 0); }
	to { transform: translate3d(0, calc(var(--amp, 1) * .5cqw), 0); }
}

@keyframes deck-breathe {
	from { opacity: 1; }
	to { opacity: .72; }
}

@media (max-width: 768px) {
	.deck { padding: 2.4rem 0; }
	.deck__head { margin-bottom: 2rem; }
	.deck-slide { margin-bottom: 3.2rem; }
	.deck-slide__stage { border-radius: .8rem; }
	.deck-slide__caption { margin-top: 1.2rem; font-size: 1.4rem; }
}