/**
 * Motion pieces for AI Tech Labs guides (2026-10-08 pilot). Loaded only on
 * posts whose content uses them (see inc/enqueue.php); behaviour lives in
 * assets/js/lab-motion.js.
 *
 * Every piece's un-armed state is its finished state, so the diagrams read
 * fully without JavaScript and under prefers-reduced-motion. The script adds
 * .is-armed to hide what the animation will reveal.
 */

.ev-hero-scene,
.ev-stage-line,
.ev-sorter {
	--ev-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ev-kind-decision: #6d28d9;
	--ev-kind-decision-tint: #efeafd;
	--ev-kind-action: #1d4ed8;
	--ev-kind-action-tint: #e6efff;
	--ev-kind-raid: #b45309;
	--ev-kind-raid-tint: #fff0e0;
	--ev-kind-flag: #b91c1c;
}

/* --- 1. Hero 3D scene ------------------------------------------------- */

/* No frame (owner, 2026-10-09): the scene floats on the banner itself. */
.ev-hero-scene {
	position: relative;
	aspect-ratio: 16 / 10;
}

.ev-hero-scene__poster,
.ev-hero-scene__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.ev-hero-scene__poster {
	transition: opacity 700ms var(--ev-motion-ease);
}

.ev-hero-scene__canvas {
	opacity: 0;
	transition: opacity 700ms var(--ev-motion-ease);
}

.ev-hero-scene.is-live .ev-hero-scene__canvas {
	opacity: 1;
}

.ev-hero-scene.is-live .ev-hero-scene__poster {
	opacity: 0;
}

/* Phones: the pipeline scene restacks top to bottom and the layer stack
   spreads out (see their scene files), so their text stays readable; both
   need a portrait frame to do that; the network ring a square one. */
@media (max-width: 32.49em) {
	.ev-hero-scene--pipeline {
		aspect-ratio: 2 / 3;
	}

	.ev-hero-scene--layers {
		aspect-ratio: 4 / 5;
	}

	.ev-hero-scene--network {
		aspect-ratio: 1 / 1;
	}
}

/* --- 2. Stage line ----------------------------------------------------- */

.ev-stage-line {
	--ev-stage-node: 3rem;
	position: relative;
	container: ev-stage / inline-size;
	margin: var(--ev-space-xl) 0 var(--ev-space-md);
}

.ev-stage-line__list {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ev-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The track runs through the node centres; the fill scales with scroll. */
.ev-stage-line__list::before,
.ev-stage-line__list::after {
	content: "";
	position: absolute;
	top: calc(var(--ev-stage-node) / 2);
	bottom: calc(var(--ev-stage-node) / 2);
	left: calc(var(--ev-stage-node) / 2 - 2px);
	width: 4px;
	border-radius: 2px;
}

.ev-stage-line__list::before {
	background: rgba(16, 26, 46, 0.12);
}

.ev-stage-line__list::after {
	background: linear-gradient(180deg, #22d3ee, #3b82f6);
	transform: scaleY(var(--ev-stage-progress, 1));
	transform-origin: top;
}

.ev-stage-line__step a {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: var(--ev-stage-node) minmax(0, 1fr);
	column-gap: var(--ev-space-md);
	align-items: start;
	color: var(--ev-color-text-on-light);
	text-decoration: none;
	border-radius: var(--ev-radius-md);
}

.ev-stage-line__step a:focus-visible {
	outline: 3px solid #3b82f6;
	outline-offset: 4px;
}

.ev-stage-line__node {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: var(--ev-stage-node);
	height: var(--ev-stage-node);
	border-radius: 50%;
	color: #0b1220;
	background: linear-gradient(135deg, #67e8f9, #3b82f6);
	box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
	transition:
		background-color 400ms var(--ev-motion-ease),
		color 400ms var(--ev-motion-ease),
		box-shadow 400ms var(--ev-motion-ease),
		transform 500ms var(--ev-motion-ease);
}

.ev-stage-line__node svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ev-stage-line__when {
	align-self: end;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.25;
	padding-top: 0.2rem;
}

.ev-stage-line__what {
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--ev-color-text-muted-on-light);
}

.ev-stage-line__step a:hover .ev-stage-line__when {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Armed: stages wait, unlit, for the fill to reach them. */
.ev-stage-line.is-armed .ev-stage-line__node {
	background: #ffffff;
	color: #64748b;
	box-shadow: inset 0 0 0 2px rgba(16, 26, 46, 0.14);
	transform: scale(0.9);
}

.ev-stage-line.is-armed .ev-stage-line__step.is-lit .ev-stage-line__node {
	background: linear-gradient(135deg, #67e8f9, #3b82f6);
	color: #0b1220;
	box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
	transform: scale(1);
}

.ev-stage-line.is-armed .ev-stage-line__step .ev-stage-line__when,
.ev-stage-line.is-armed .ev-stage-line__step .ev-stage-line__what {
	opacity: 0.55;
	transition: opacity 400ms var(--ev-motion-ease);
}

.ev-stage-line.is-armed .ev-stage-line__step.is-lit .ev-stage-line__when,
.ev-stage-line.is-armed .ev-stage-line__step.is-lit .ev-stage-line__what {
	opacity: 1;
}

/* Horizontal once the line has room: a container query, so it also works
   inside a half-width paired card. */
@container ev-stage (min-width: 40rem) {
	.ev-stage-line__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--ev-space-lg);
	}

	.ev-stage-line__list::before,
	.ev-stage-line__list::after {
		top: calc(var(--ev-stage-node) / 2 - 2px);
		bottom: auto;
		left: calc(12.5% - var(--ev-space-lg) * 3 / 8);
		right: calc(12.5% - var(--ev-space-lg) * 3 / 8);
		width: auto;
		height: 4px;
	}

	.ev-stage-line__list::after {
		background: linear-gradient(90deg, #22d3ee, #3b82f6);
		transform: scaleX(var(--ev-stage-progress, 1));
		transform-origin: left;
	}

	.ev-stage-line__step a {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
		row-gap: var(--ev-space-xs);
	}

	.ev-stage-line__node {
		grid-row: auto;
		margin-bottom: var(--ev-space-xs);
	}
}

/* --- 3. Transcript sorter --------------------------------------------- */

.ev-sorter {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ev-space-lg);
	margin: var(--ev-space-lg) 0;
	color: var(--ev-color-text-on-light);
}

.ev-sorter__panel {
	padding: var(--ev-space-lg);
	background: #ffffff;
	border: 1px solid var(--ev-color-border-on-light-soft);
	border-radius: var(--ev-radius-md);
	box-shadow: 0 4px 14px rgba(16, 26, 46, 0.06);
}

.ev-sorter__heading {
	margin: 0 0 var(--ev-space-md);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.ev-sorter__heading small {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--ev-color-text-muted-on-light);
}

.ev-sorter__lines {
	display: grid;
	gap: var(--ev-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ev-sorter__line {
	display: grid;
	grid-template-columns: 4.25rem minmax(0, 1fr);
	column-gap: var(--ev-space-sm);
	align-items: baseline;
	padding: 0.55rem 0.7rem;
	border-radius: 10px;
	transition: background-color 350ms var(--ev-motion-ease), box-shadow 350ms var(--ev-motion-ease);
}

.ev-sorter__who {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--ev-color-text-muted-on-light);
}

.ev-sorter__quote {
	font-size: 0.9375rem;
	line-height: 1.45;
}

.ev-sorter__to {
	grid-column: 2;
	justify-self: start;
	margin-top: 0.3rem;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	transition: opacity 300ms var(--ev-motion-ease), transform 400ms var(--ev-motion-ease);
}

.ev-sorter__line[data-kind="decision"] .ev-sorter__to { color: var(--ev-kind-decision); background: var(--ev-kind-decision-tint); }
.ev-sorter__line[data-kind="action"] .ev-sorter__to { color: var(--ev-kind-action); background: var(--ev-kind-action-tint); }
.ev-sorter__line[data-kind="raid"] .ev-sorter__to { color: var(--ev-kind-raid); background: var(--ev-kind-raid-tint); }
.ev-sorter__line[data-kind="flag"] .ev-sorter__to { color: var(--ev-kind-flag); background: #fde8e8; }

.ev-sorter__line.is-active[data-kind="decision"] { background: var(--ev-kind-decision-tint); box-shadow: inset 0 0 0 1.5px var(--ev-kind-decision); }
.ev-sorter__line.is-active[data-kind="action"] { background: var(--ev-kind-action-tint); box-shadow: inset 0 0 0 1.5px var(--ev-kind-action); }
.ev-sorter__line.is-active[data-kind="raid"] { background: var(--ev-kind-raid-tint); box-shadow: inset 0 0 0 1.5px var(--ev-kind-raid); }
.ev-sorter__line.is-active[data-kind="flag"] { background: #fde8e8; box-shadow: inset 0 0 0 1.5px var(--ev-kind-flag); }

.ev-sorter.is-armed .ev-sorter__line:not(.is-done) .ev-sorter__to {
	opacity: 0;
	transform: translateX(-6px);
}

.ev-sorter__records {
	display: grid;
	gap: var(--ev-space-md);
}

.ev-article-content .ev-sorter__record h3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 var(--ev-space-xs);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
}

.ev-article-content .ev-sorter__record h3::before {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: currentColor;
}

.ev-article-content .ev-sorter__record--decision h3 { color: var(--ev-kind-decision); }
.ev-article-content .ev-sorter__record--action h3 { color: var(--ev-kind-action); }
.ev-article-content .ev-sorter__record--raid h3 { color: var(--ev-kind-raid); }

.ev-sorter__chips {
	display: grid;
	gap: var(--ev-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ev-sorter__chip {
	padding: 0.55rem 0.75rem;
	border-radius: 10px;
	border: 1px solid transparent;
	transition: opacity 450ms var(--ev-motion-ease), transform 550ms var(--ev-motion-ease), box-shadow 600ms var(--ev-motion-ease);
}

.ev-sorter__chip[data-kind="decision"] { background: var(--ev-kind-decision-tint); }
.ev-sorter__chip[data-kind="action"] { background: var(--ev-kind-action-tint); }
.ev-sorter__chip[data-kind="raid"] { background: var(--ev-kind-raid-tint); }
.ev-sorter__chip[data-kind="flag"] {
	background: #fff5f5;
	border: 1.5px dashed var(--ev-kind-flag);
}

.ev-sorter__chip-title {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
}

.ev-sorter__chip-meta {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--ev-color-text-muted-on-light);
	font-variant-numeric: tabular-nums;
}

.ev-sorter__chip-meta strong {
	color: var(--ev-kind-flag);
}

.ev-sorter.is-armed .ev-sorter__chip:not(.is-in) {
	opacity: 0;
	transform: translateY(6px) scale(0.97);
}

.ev-sorter.is-armed .ev-sorter__chip.is-in {
	animation: ev-sorter-land 900ms var(--ev-motion-ease);
}

@keyframes ev-sorter-land {
	0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45); }
	100% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
}

.ev-sorter__ghost {
	position: absolute;
	z-index: 3;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	color: #ffffff;
	pointer-events: none;
	box-shadow: 0 8px 20px rgba(16, 26, 46, 0.22);
}

.ev-sorter__ghost--decision { background: var(--ev-kind-decision); }
.ev-sorter__ghost--action { background: var(--ev-kind-action); }
.ev-sorter__ghost--raid { background: var(--ev-kind-raid); }
.ev-sorter__ghost--flag { background: var(--ev-kind-flag); }

.ev-sorter__replay {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	justify-self: start;
	margin-top: var(--ev-space-md);
	padding: 0.4rem 0.9rem;
	border: 1.5px solid var(--ev-color-text-on-light);
	border-radius: 999px;
	background: #ffffff;
	color: var(--ev-color-text-on-light);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 200ms ease, opacity 200ms ease;
}

.ev-sorter__replay[hidden] {
	display: none;
}

.ev-sorter__replay svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ev-sorter__replay:hover:not(:disabled) {
	background: var(--ev-kind-action-tint);
}

.ev-sorter__replay:focus-visible {
	outline: 3px solid #3b82f6;
	outline-offset: 3px;
}

.ev-sorter__replay:disabled {
	opacity: 0.45;
	cursor: default;
}

@media (min-width: 56em) {
	.ev-sorter {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ev-hero-scene__poster,
	.ev-hero-scene__canvas,
	.ev-stage-line__node,
	.ev-sorter__line,
	.ev-sorter__chip {
		transition: none;
	}
}

/* --- 4. Bar chart (data-ev-bars) --------------------------------------- */

.ev-bars,
.ev-picker {
	--ev-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.ev-bars {
	container: ev-bars / inline-size;
	margin: var(--ev-space-lg) 0;
	padding: var(--ev-space-lg);
	background: #ffffff;
	border: 1px solid var(--ev-color-border-on-light-soft);
	border-radius: var(--ev-radius-md);
	box-shadow: 0 4px 14px rgba(16, 26, 46, 0.06);
	color: var(--ev-color-text-on-light);
}

.ev-article-content .ev-bars__title {
	color: var(--ev-color-text-on-light);
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.ev-article-content .ev-bars__note {
	margin: 0.2rem 0 var(--ev-space-md);
	font-size: 0.8125rem;
	color: var(--ev-color-text-muted-on-light);
}

.ev-bars__group + .ev-bars__group {
	margin-top: var(--ev-space-md);
}

.ev-bars__group-title {
	margin: 0 0 0.35rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--ev-color-text-muted-on-light);
}

.ev-bars__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.3rem var(--ev-space-sm);
	align-items: center;
	padding: 0.35rem 0;
}

.ev-bars__label {
	font-size: 0.9375rem;
	font-weight: 600;
}

.ev-bars__track {
	display: flex;
	height: 0.875rem;
	overflow: hidden;
	border-radius: 999px;
	background: #edf0f6;
}

.ev-bars__fill {
	width: calc(var(--v, 0) * 100%);
	height: 100%;
	background: var(--c, linear-gradient(90deg, #22d3ee, #3b82f6));
	transform-origin: left center;
	transition: transform 1100ms var(--ev-motion-ease);
	transition-delay: calc(var(--i, 0) * 110ms);
}

.ev-bars__fill--extra {
	opacity: 0.35;
	transition-delay: calc(var(--i, 0) * 110ms + 700ms);
}

.ev-bars__value {
	font-size: 0.9375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ev-bars__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ev-space-md);
	margin: var(--ev-space-sm) 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	color: var(--ev-color-text-muted-on-light);
}

.ev-bars__legend li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.ev-bars__legend li::before {
	content: "";
	width: 0.9rem;
	height: 0.55rem;
	border-radius: 999px;
	background: linear-gradient(90deg, #22d3ee, #3b82f6);
}

.ev-bars__legend li.ev-bars__legend-extra::before {
	opacity: 0.35;
}

.ev-bars.is-armed .ev-bars__fill {
	transform: scaleX(0);
}

.ev-bars.is-armed.is-in .ev-bars__fill {
	transform: scaleX(1);
}

@container ev-bars (min-width: 34rem) {
	.ev-bars__row {
		grid-template-columns: 11rem minmax(0, 1fr) 8.5rem;
	}

	.ev-bars__value {
		text-align: right;
	}
}

/* --- 5. Picker (data-ev-picker) --------------------------------------- */

.ev-picker {
	margin: var(--ev-space-lg) 0;
	padding: var(--ev-space-lg);
	background: #ffffff;
	border: 1px solid var(--ev-color-border-on-light-soft);
	border-radius: var(--ev-radius-md);
	box-shadow: 0 4px 14px rgba(16, 26, 46, 0.06);
	color: var(--ev-color-text-on-light);
}

.ev-picker__question {
	margin: 0 0 var(--ev-space-md);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Choices only make sense with the script; without it every answer shows. */
.ev-picker__options {
	display: none;
	flex-wrap: wrap;
	gap: var(--ev-space-xs);
	margin-bottom: var(--ev-space-lg);
}

.ev-picker.is-armed .ev-picker__options {
	display: flex;
}

.ev-picker__option {
	padding: 0.55rem 1rem;
	border: 1.5px solid #c9d2e3;
	border-radius: 999px;
	background: #ffffff;
	color: var(--ev-color-text-on-light);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 200ms ease, background-color 200ms ease, box-shadow 300ms var(--ev-motion-ease);
}

.ev-picker__option:hover {
	border-color: #3b82f6;
}

.ev-picker__option:focus-visible {
	outline: 3px solid #3b82f6;
	outline-offset: 3px;
}

.ev-picker__option[aria-pressed="true"] {
	border-color: transparent;
	background: var(--ev-gradient-cta);
	color: #0b1220;
	box-shadow: var(--ev-shadow-cta);
}

.ev-picker__results {
	display: grid;
	gap: var(--ev-space-md);
}

.ev-picker__result {
	padding: var(--ev-space-lg);
	border-radius: var(--ev-radius-md);
	background: var(--ev-kind-tint, #f3f6fb);
}

.ev-picker__result[data-kind="cyan"] { --ev-kind-tint: #e6f8fc; --ev-kind-ink: #0e7490; }
.ev-picker__result[data-kind="lavender"] { --ev-kind-tint: #efeafd; --ev-kind-ink: #6d28d9; }
.ev-picker__result[data-kind="mint"] { --ev-kind-tint: #e3f6ec; --ev-kind-ink: #047857; }

.ev-picker__for {
	margin: 0 0 0.25rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--ev-kind-ink, var(--ev-color-text-muted-on-light));
}

.ev-picker.is-armed .ev-picker__for {
	display: none;
}

.ev-article-content .ev-picker__name {
	margin: 0 0 var(--ev-space-sm);
	font-size: 1.375rem;
	line-height: 1.2;
	color: var(--ev-color-text-on-light);
}

.ev-picker__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: var(--ev-space-xs);
	margin: 0 0 var(--ev-space-md);
	padding: 0;
	list-style: none;
}

.ev-picker__facts li {
	padding: 0.6rem 0.75rem;
	border-radius: 10px;
	background: #ffffff;
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--ev-color-text-muted-on-light);
}

.ev-picker__facts strong {
	display: block;
	font-size: 1.0625rem;
	color: var(--ev-kind-ink, var(--ev-color-text-on-light));
	font-variant-numeric: tabular-nums;
}

.ev-picker__why {
	margin: 0 0 var(--ev-space-md);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.ev-picker__result .ev-lab-cta {
	margin: 0;
}

.ev-picker.is-armed .ev-picker__result:not(.is-active) {
	display: none;
}

.ev-picker.is-armed .ev-picker__result.is-active .ev-picker__facts li {
	animation: ev-picker-fact 600ms var(--ev-motion-ease) both;
}

.ev-picker.is-armed .ev-picker__result.is-active .ev-picker__facts li:nth-child(2) { animation-delay: 80ms; }
.ev-picker.is-armed .ev-picker__result.is-active .ev-picker__facts li:nth-child(3) { animation-delay: 160ms; }

@keyframes ev-picker-fact {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ev-bars__fill,
	.ev-picker__option {
		transition: none;
	}

	.ev-picker.is-armed .ev-picker__result.is-active .ev-picker__facts li {
		animation: none;
	}
}

/* Insights scenes use the article's photo as the poster (2026-10-09),
   its edges faded so it doesn't read as a box either. */
.ev-hero-scene__poster--photo {
	object-fit: cover;
	opacity: 0.55;
	border-radius: var(--ev-radius-lg);
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at center, #000 45%, transparent 100%);
	mask-image: radial-gradient(ellipse 70% 70% at center, #000 45%, transparent 100%);
}

/* --- Video facade (2026-10-09; behaviour in lab-motion.js section 6) ----
   Official maker clips beside a product's buy button: a thumbnail with a
   play button until clicked, then the youtube-nocookie player in place. */
.ev-yt {
	max-width: 40rem;
	margin: var(--ev-space-lg) 0 var(--ev-space-md);
}

.ev-yt__play,
.ev-yt__frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--ev-radius-lg);
	overflow: hidden;
	background: #0b1220;
	box-shadow: 0 14px 34px -18px rgba(11, 18, 32, 0.55);
}

.ev-yt__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover; /* crops the letterbox bars off YouTube's 4:3 thumbnail */
	display: block;
	transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), filter 400ms;
	filter: saturate(1.05) brightness(0.86);
}

.ev-yt__play:hover .ev-yt__thumb,
.ev-yt__play:focus-visible .ev-yt__thumb {
	transform: scale(1.03);
	filter: saturate(1.1) brightness(0.95);
}

.ev-yt__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4.25rem;
	height: 4.25rem;
	margin: -2.125rem 0 0 -2.125rem;
	border-radius: 50%;
	background: rgba(11, 18, 32, 0.72);
	border: 2px solid rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(4px);
	transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), background 300ms;
}

.ev-yt__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.7rem 0 0.7rem 1.15rem;
	border-color: transparent transparent transparent #fff;
}

.ev-yt__play:hover .ev-yt__icon,
.ev-yt__play:focus-visible .ev-yt__icon {
	transform: scale(1.08);
	background: #0891b2;
}

.ev-yt__play:focus-visible {
	outline: 3px solid #22d3ee;
	outline-offset: 3px;
}

.ev-yt__time {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: rgba(11, 18, 32, 0.8);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
}

.ev-yt figcaption {
	margin-top: var(--ev-space-sm);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--ev-color-text-muted-on-light, #4b5566);
}