/**
 * Preluence Dynamic 3D Posts Slider.
 *
 * Without JavaScript: a swipeable scroll-snap row of story cards.
 * With JavaScript (.is-ready): slides sit on a 3D stage and are positioned
 * purely from two numbers the controller sets per slide — --o (signed
 * distance from the active story, fractional while dragging) and --a (its
 * absolute value). Every effect below is a formula over those numbers, and
 * only transform, opacity and filter animate.
 *
 * All classes are scoped to .preluence-slider; nothing here styles the rest
 * of the theme.
 */

/* ======================================================================
 * Tokens
 * ==================================================================== */

.preluence-slider {
	--acc: var(--preluence-slider-live, var(--preluence-slider-accent, var(--pn-primary, #1b4ddb)));
	--acc-on: var(--preluence-slider-live-on, var(--preluence-slider-on-accent, var(--pn-on-primary, #fff)));
	--acc2: var(--preluence-slider-accent-2, var(--pn-secondary, #7c3aed));
	--ease: cubic-bezier(0.22, 0.8, 0.24, 1);
	--speed: var(--preluence-slider-speed, 750ms);
	--interval: var(--preluence-slider-interval, 6000ms);
	--gap: var(--preluence-slider-gap, 16px);
	--pv: var(--preluence-slider-pv, var(--preluence-slider-per-view, 1));
	--shade: var(--preluence-slider-shade, 0.7);
	--d-scale: 1;
	--d: calc(var(--preluence-slider-depth, 1) * var(--d-scale));
	--radius: calc(var(--pn-radius, 10px) * 1.6);
	--card-w: 58%;
	--ink: #04070e;
	--page-fg: var(--pn-text, #14171c);
	position: relative;
	isolation: isolate;
	container: preluence-slider / inline-size;
	width: 100%;
	margin: 0;
	color: var(--pn-text);
}

/* ======================================================================
 * Fallback (no JavaScript, or the script failed): scroll-snap row
 * ==================================================================== */

.preluence-slider__viewport {
	position: relative;
	border-radius: var(--radius);
}

.preluence-slider__track {
	display: grid;
	grid-auto-columns: calc((100% - (var(--pv) - 1) * var(--gap)) / var(--pv));
	grid-auto-flow: column;
	gap: var(--gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--radius);
}

.preluence-slider__track::-webkit-scrollbar {
	display: none;
}

.preluence-slider:not(.is-ready) .preluence-slider__slide {
	aspect-ratio: var(--preluence-slider-ratio, 16 / 9);
	scroll-snap-align: start;
}

@media (max-width: 1023px) {

	.preluence-slider {
		--pv: var(--preluence-slider-pv, var(--preluence-slider-per-view-t, 1));
	}
}

@media (max-width: 599px) {

	.preluence-slider {
		--pv: var(--preluence-slider-pv, var(--preluence-slider-per-view-m, 1));
	}

	.preluence-slider:not(.is-ready) .preluence-slider__slide {
		aspect-ratio: 4 / 5;
	}
}

/* ======================================================================
 * Slide anatomy
 * ==================================================================== */

.preluence-slider__slide {

	/* Contrast tokens. Stories over photos default to light text on a dark
	   shade; the slide re-scopes the theme's text and link colours so a
	   surrounding widget area, colour band or dark mode can never recolour
	   the headline (they would otherwise turn it dark on a dark image). */
	--fg: #fff;
	--fg-muted: rgb(255 255 255 / 86%);
	--fg-soft: rgb(255 255 255 / 76%);
	--scrim-rgb: 4 7 14;
	--boost: 1;
	--pn-text: var(--fg);
	--pn-link: var(--fg);
	--pn-text-muted: var(--fg-soft);
	position: relative;
	container-type: inline-size;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--fg);
	-webkit-tap-highlight-color: transparent;
}

/* The brighter the photo under the headline, the stronger the shade. */
.preluence-slider__slide.is-tone-bright {
	--boost: 1.28;
}

.preluence-slider__slide.is-tone-very-bright {
	--boost: 1.5;
}

.preluence-slider__slide.is-tone-unknown {
	--boost: 1.12;
}

.preluence-slider__slide.is-tone-dark {
	--boost: 0.9;
}

/* Editor chose dark text: a light veil replaces the dark shade. */
.preluence-slider__slide.is-ink-dark {
	--fg: #0b1020;
	--fg-muted: rgb(11 16 32 / 84%);
	--fg-soft: rgb(11 16 32 / 72%);
	--scrim-rgb: 250 251 253;
}

.preluence-slider__media,
.preluence-slider__image-wrap,
.preluence-slider__shade {
	position: absolute;
	inset: 0;
}

.preluence-slider__media {
	overflow: hidden;
	border-radius: inherit;
}

.preluence-slider__image-wrap {
	transition: translate 0.5s ease-out;
}

.preluence-slider__image,
.preluence-slider__image-wrap > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pn-img-focus, 50% 0%);
	transform-origin: 50% 30%;
	user-select: none;
	-webkit-user-drag: none;
}

/* Portrait photos (flyers, headshots) are shown whole over a blurred copy. */
.preluence-slider__media-backdrop {
	position: absolute;
	inset: -8%;
	background-position: center;
	background-size: cover;
	filter: blur(28px) brightness(0.55) saturate(1.2);
	transform: scale(1.1);
}

.preluence-slider__slide.is-portrait .preluence-slider__image-wrap {
	inset-inline-start: auto;
	width: min(46%, 520px);
}

.preluence-slider__slide.is-portrait .preluence-slider__image {
	object-fit: contain;
	object-position: 50% 50%;
}

/* Readability shade + colour layer. Text always sits on dark. */
.preluence-slider__shade {
	--a: min(0.96, calc(var(--shade) * var(--boost)));
	background:
		linear-gradient(to top, rgb(var(--scrim-rgb) / var(--a)) 0%, rgb(var(--scrim-rgb) / calc(var(--a) * 0.66)) 40%, transparent 80%),
		linear-gradient(90deg, rgb(var(--scrim-rgb) / calc(var(--a) * 0.6)) 0%, transparent 64%);
	pointer-events: none;
}

.preluence-slider__shade::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--speed) var(--ease);
}

.preluence-slider--grad-primary .preluence-slider__shade::after,
.preluence-slider--grad-image .preluence-slider__shade::after,
.preluence-slider--grad-category .preluence-slider__shade::after {
	background: radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--acc) 55%, transparent), transparent 70%);
	opacity: 1;
}

.preluence-slider--grad-custom .preluence-slider__shade::after,
.preluence-slider--grad-animated .preluence-slider__shade::after {
	background:
		radial-gradient(80% 70% at 0% 100%, color-mix(in srgb, var(--acc) 55%, transparent), transparent 70%),
		radial-gradient(60% 60% at 100% 0%, color-mix(in srgb, var(--acc2) 40%, transparent), transparent 70%);
	opacity: 1;
}

.preluence-slider--grad-neon .preluence-slider__shade::after {
	background:
		radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--acc) 70%, transparent), transparent 70%),
		radial-gradient(55% 55% at 100% 10%, color-mix(in srgb, var(--acc2) 55%, transparent), transparent 70%);
	opacity: 1;
	mix-blend-mode: screen;
}

/* Content */
.preluence-slider__content {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(0.45rem, 1.6cqi, 0.9rem);
	max-width: min(100%, 860px);
	padding: clamp(1rem, 5cqi, 3.25rem);
	translate: calc(var(--mx, 0) * 7px) calc(var(--my, 0) * 5px);
	transition: translate 0.5s ease-out;
}

/* A soft local scrim follows the text block wherever it grows (long
   headlines reach high into the photo, where the main shade fades out). */
.preluence-slider__content::before {
	content: "";
	position: absolute;
	inset: -18% -12% -6% -8%;
	z-index: -1;
	background: radial-gradient(closest-side, rgb(var(--scrim-rgb) / min(0.72, calc(var(--shade) * var(--boost) * 0.62))), transparent);
	pointer-events: none;
}

.preluence-slider__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.preluence-slider__badge,
.preluence-slider__flag {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.28rem 0.7rem 0.24rem;
	border-radius: 999px;
	font-family: var(--pn-font-ui);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

.preluence-slider__badge {
	background: var(--pn-badge, var(--acc));
	color: var(--pn-on-badge, #fff);
	box-shadow: 0 6px 18px -8px var(--pn-badge, var(--acc));
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.preluence-slider__badge:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -8px var(--pn-badge, var(--acc));
	color: var(--pn-on-badge, #fff);
}

.preluence-slider__flag {
	border: 1px solid color-mix(in srgb, var(--fg) 35%, transparent);
	background: color-mix(in srgb, var(--fg) 12%, transparent);
	color: var(--fg);
	backdrop-filter: blur(6px);
}

.preluence-slider__flag--breaking {
	border-color: transparent;
	background: var(--pn-breaking, #d92d20);
}

.preluence-slider__flag--breaking::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: #fff;
	animation: preluence-slider-pulse 1.4s ease-out 3;
}

.preluence-slider__flag--exclusive {
	border-color: #f5c451;
	color: #ffe2a1;
}

.preluence-slider__title {
	margin: 0;
	font-family: var(--pn-font-heading);
	font-size: clamp(1.2rem, 4.4cqi, 3.1rem);
	font-weight: 750;
	line-height: 1.08;
	letter-spacing: -0.012em;
	text-wrap: balance;
	text-shadow: 0 1px 2px rgb(var(--scrim-rgb) / 45%), 0 2px 24px rgb(var(--scrim-rgb) / 35%);
}

.preluence-slider__link {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--acc), var(--acc));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 2px;
	transition: background-size 0.35s var(--ease);
}

.preluence-slider__link:hover,
.preluence-slider__link:focus-visible {
	color: inherit;
	background-size: 100% 2px;
}

/* The whole card is clickable; badges and buttons stay above the link. */
.preluence-slider__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.preluence-slider__badges,
.preluence-slider__actions {
	position: relative;
	z-index: 2;
}

.preluence-slider__excerpt {
	display: -webkit-box;
	max-width: 62ch;
	margin: 0;
	overflow: hidden;
	color: var(--fg-muted);
	font-size: clamp(0.9rem, 1.9cqi, 1.1rem);
	line-height: 1.5;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.preluence-slider__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.6rem;
	color: var(--fg-soft);
	font-family: var(--pn-font-ui);
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}

.preluence-slider__sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--acc);
}

.preluence-slider__author {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--fg);
	font-weight: 600;
}

.preluence-slider__avatar {
	width: 28px;
	height: 28px;
	border: 2px solid rgb(255 255 255 / 70%);
	border-radius: 50%;
}

.preluence-slider__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-block-start: 0.25rem;
}

.preluence-slider__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.62rem 1.1rem 0.6rem 1.2rem;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--acc), color-mix(in srgb, var(--acc) 55%, var(--acc2)));
	color: var(--cta-fg, var(--acc-on));
	font-family: var(--pn-font-ui);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: 0 10px 30px -12px var(--acc);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.preluence-slider__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px -12px var(--acc);
}

.preluence-slider__cta-arrow {
	width: 0.9rem;
	height: 2px;
	background: currentcolor;
	position: relative;
	transition: transform 0.25s var(--ease);
}

.preluence-slider__cta-arrow::after {
	content: "";
	position: absolute;
	inset-block-start: -3px;
	inset-inline-end: 0;
	width: 6px;
	height: 6px;
	border-block-start: 2px solid currentcolor;
	border-inline-end: 2px solid currentcolor;
	transform: rotate(45deg);
}

[dir="rtl"] .preluence-slider__cta-arrow {
	scale: -1 1;
}

.preluence-slider__cta:hover .preluence-slider__cta-arrow {
	transform: translateX(3px);
}

.preluence-slider__share {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 30%);
	border-radius: 50%;
	background: rgb(255 255 255 / 10%);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: background-color 0.2s var(--ease);
}

.preluence-slider__share:hover,
.preluence-slider__share.is-done {
	background: var(--acc);
	color: var(--acc-on);
}

.preluence-slider__share-icon {
	position: relative;
	width: 14px;
	height: 14px;
	border: 2px solid currentcolor;
	border-block-start: 0;
	border-radius: 0 0 3px 3px;
}

.preluence-slider__share-icon::before {
	content: "";
	position: absolute;
	inset-block-start: -7px;
	inset-inline-start: 4px;
	width: 2px;
	height: 12px;
	background: currentcolor;
}

.preluence-slider__share-icon::after {
	content: "";
	position: absolute;
	inset-block-start: -7px;
	inset-inline-start: 2px;
	width: 6px;
	height: 6px;
	border-block-start: 2px solid currentcolor;
	border-inline-start: 2px solid currentcolor;
	transform: rotate(45deg);
}

/* Designed artwork keeps its label hidden under the headline. */
.preluence-slider__image-wrap .pn-fallback {
	position: absolute;
}

/* ======================================================================
 * Contrast engine
 *
 * 1. Photo stories: light text, and a shade whose strength follows the
 *    measured brightness of the photo under the headline (is-tone-*).
 * 2. Stories on a plain surface (split, cards with the story below the
 *    photo, thumbnails): the text colour is worked out from the surface
 *    itself — near-black on light surfaces, near-white on dark ones — so it
 *    stays readable in light mode, dark mode and inside any colour band.
 * 3. Links are pinned to these tokens with enough specificity that widget
 *    and colour-band link styles cannot recolour them.
 * ==================================================================== */

.preluence-slider--fx-split .preluence-slider__slide,
.preluence-slider--card-below.preluence-slider--mode-track .preluence-slider__slide {
	--fg: var(--page-fg, #14171c);
	--fg-muted: color-mix(in srgb, var(--fg) 80%, transparent);
	--fg-soft: color-mix(in srgb, var(--fg) 68%, transparent);
}

@supports (color: oklch(from red l c h)) {

	.preluence-slider--fx-split .preluence-slider__slide,
	.preluence-slider--card-below.preluence-slider--mode-track .preluence-slider__slide,
	.preluence-slider .preluence-slider__thumb {

		/* Lightness above 0.62 → near-black text, otherwise near-white. */
		--fg: oklch(from var(--surface) calc(0.18 + clamp(0, (0.62 - l) * 1000, 1) * 0.8) 0 0);
	}
}

/* Controls outside the slides sit on the page or a colour band. On a band
   filled with the accent colour itself, accent-coloured controls would
   vanish, so they switch to the band's own text colour. */
.pn-fp-bg--brand .preluence-slider,
.pn-fp-bg--brand.preluence-slider {
	--nav-accent: var(--pn-text);
	--nav-accent-2: var(--pn-text);
}

/* Surfaces and glass panels carry their own background: no scrim. */
.preluence-slider--fx-split .preluence-slider__content::before,
.preluence-slider--card-below .preluence-slider__content::before,
.preluence-slider--fx-glass .preluence-slider__content::before,
.preluence-slider--grad-glass .preluence-slider__content::before {
	display: none;
}

.preluence-slider .preluence-slider__link,
.preluence-slider .preluence-slider__link:hover,
.preluence-slider .preluence-slider__link:focus-visible {
	color: var(--fg);
	text-decoration: none;
}

.preluence-slider .preluence-slider__badge,
.preluence-slider .preluence-slider__badge:hover {
	color: var(--pn-on-badge, #fff);
	text-decoration: none;
}

.preluence-slider .preluence-slider__cta,
.preluence-slider .preluence-slider__cta:hover {
	color: var(--cta-fg, var(--acc-on));
	text-decoration: none;
}

.preluence-slider .preluence-slider__thumb,
.preluence-slider .preluence-slider__thumb:hover {
	color: var(--fg);
	text-decoration: none;
}

.preluence-slider .preluence-slider__filter,
.preluence-slider .preluence-slider__filter:hover {
	color: var(--pn-text);
	text-decoration: none;
}

.preluence-slider .preluence-slider__filter.is-active {
	color: var(--pn-on-badge, var(--acc-on));
}

/* ======================================================================
 * Enhanced: the 3D stage
 * ==================================================================== */

.preluence-slider.is-ready .preluence-slider__viewport {
	overflow: hidden;
	perspective: var(--preluence-slider-perspective, 1400px);
	perspective-origin: 50% 45%;
	touch-action: pan-y;
}

.preluence-slider.is-ready.preluence-slider--mode-stage .preluence-slider__viewport {

	/* A definite width stops min-height from widening the frame through
	   aspect-ratio (a transferred minimum size). */
	width: 100%;
	aspect-ratio: var(--preluence-slider-ratio, 21 / 9);
	min-height: 340px;
	max-height: 86vh;
}

.preluence-slider.is-ready.has-height .preluence-slider__viewport {
	height: var(--preluence-slider-height);
	aspect-ratio: auto;
}

.preluence-slider.is-ready.is-bleed.preluence-slider--fx-cinematic .preluence-slider__viewport {
	height: clamp(440px, calc(100svh - 300px), 760px);
	max-height: none;
	aspect-ratio: auto;
	border-radius: 0;
}

.preluence-slider.is-ready.preluence-slider--mode-stage .preluence-slider__track {
	position: absolute;
	inset: 0;
	display: block;
	overflow: visible;
	scroll-snap-type: none;
	transform-style: preserve-3d;
	border-radius: 0;
}

.preluence-slider.is-ready.preluence-slider--mode-stage .preluence-slider__slide {
	position: absolute;
	inset: 0;
	transform-origin: 50% 50%;
	transition:
		transform var(--speed) var(--ease),
		opacity var(--speed) var(--ease),
		filter var(--speed) var(--ease);
	will-change: transform, opacity;
	backface-visibility: hidden;
}

.preluence-slider.is-ready .preluence-slider__slide[data-far] {
	display: none;
}

.preluence-slider.is-ready .preluence-slider__slide[data-edge] {
	opacity: 0 !important;
	pointer-events: none;
}

.preluence-slider.is-ready .preluence-slider__slide:not(.is-active) {
	cursor: pointer;
}

.preluence-slider.is-ready.is-dragging .preluence-slider__slide,
.preluence-slider.is-ready.is-dragging .preluence-slider__track,
.preluence-slider.is-instant .preluence-slider__slide,
.preluence-slider.is-instant .preluence-slider__track {
	transition: none !important;
}

.preluence-slider.is-dragging {
	cursor: grabbing;
	user-select: none;
}

/* Full-stage effects: cinematic, minimal, grid — crossfade with depth. */
.preluence-slider--fx-cinematic.is-ready .preluence-slider__slide,
.preluence-slider--fx-grid.is-ready .preluence-slider__slide {
	opacity: calc(1 - min(var(--a), 1));
	transform: scale(calc(1 + min(var(--a), 1) * 0.06 * var(--d)));
	border-radius: 0;
}

.preluence-slider--fx-cinematic.is-ready .preluence-slider__viewport,
.preluence-slider--fx-grid.is-ready .preluence-slider__viewport,
.preluence-slider--fx-minimal.is-ready .preluence-slider__viewport,
.preluence-slider--fx-vertical.is-ready .preluence-slider__viewport,
.preluence-slider--fx-glass.is-ready .preluence-slider__viewport {
	background: var(--ink);
}

.preluence-slider--fx-minimal.is-ready .preluence-slider__slide {
	opacity: calc(1 - min(var(--a), 1));
	transform: translateX(calc(var(--o) * 3%));
	border-radius: 0;
}

/* Vertical stories. */
.preluence-slider--fx-vertical.is-ready .preluence-slider__slide {
	opacity: calc(1 - min(var(--a), 1) * 0.9);
	transform: translateY(calc(var(--o) * 100%)) scale(calc(1 - min(var(--a), 1) * 0.08 * var(--d)));
	border-radius: 0;
}

/* Glass cards: slide across with a frosted story panel. */
.preluence-slider--fx-glass.is-ready .preluence-slider__slide {
	opacity: calc(1 - min(var(--a), 1) * 0.7);
	transform:
		translateX(calc(var(--o) * 100%))
		translateZ(calc(var(--a) * -120px * var(--d)))
		rotateY(calc(clamp(-1, var(--o), 1) * -12deg * var(--d)));
	border-radius: 0;
}

/* Panorama: wide stories with the neighbours peeking in. */
.preluence-slider--fx-panorama {
	--card-w: 80%;
}

/* Coverflow / depth / stack: centred cards on the stage. */
.preluence-slider--fx-coverflow,
.preluence-slider--fx-depth {
	--card-w: 56%;
}

.preluence-slider--fx-stack {
	--card-w: 68%;
}

.preluence-slider.is-ready:is(.preluence-slider--fx-coverflow, .preluence-slider--fx-depth, .preluence-slider--fx-stack, .preluence-slider--fx-panorama) .preluence-slider__slide {
	inset-block: 5%;
	inset-inline: calc((100% - var(--card-w)) / 2);
	box-shadow: 0 30px 60px -30px rgb(0 0 0 / 55%);
}

/* Stack: leave room above for the waiting stories to peek out. */
.preluence-slider.is-ready.preluence-slider--fx-stack .preluence-slider__slide {
	inset-block: 11% 3%;
}

.preluence-slider--fx-panorama.is-ready .preluence-slider__slide {
	opacity: calc(1 - min(var(--a), 1) * 0.45);
	transform:
		translateX(calc(var(--o) * (100% + var(--gap))))
		scale(calc(1 - min(var(--a), 1) * 0.07));
}

.preluence-slider--fx-coverflow.is-ready .preluence-slider__slide {
	opacity: calc(1 - min(var(--a), 2.5) * 0.3);
	filter: brightness(calc(1 - min(var(--a), 2) * 0.22));
	transform:
		translateX(calc(var(--o) * 64%))
		translateZ(calc(min(var(--a), 2.5) * -170px * var(--d)))
		rotateY(calc(clamp(-1, var(--o), 1) * -36deg * var(--d)))
		scale(calc(1 - min(var(--a), 2) * 0.06));
}

.preluence-slider--fx-depth.is-ready .preluence-slider__slide {
	opacity: calc(1 - min(var(--a), 2.5) * 0.34);
	filter: brightness(calc(1 - min(var(--a), 2) * 0.2));
	transform:
		translateX(calc(var(--o) * 76%))
		translateZ(calc(min(var(--a), 2.5) * -240px * var(--d)))
		scale(calc(1 - min(var(--a), 2) * 0.05));
}

/* Stack: upcoming stories wait behind; the passed story flies out. */
.preluence-slider--fx-stack.is-ready .preluence-slider__slide {
	opacity: calc(1 - max(var(--o), 0) * 0.24 + min(var(--o), 0) * 1.3);
	filter: brightness(calc(1 - max(var(--o), 0) * 0.16));
	transform:
		translateX(calc(min(var(--o), 0) * 118%))
		rotate(calc(min(var(--o), 0) * 6deg))
		translateY(calc(max(var(--o), 0) * -10%))
		translateZ(calc(max(var(--o), 0) * -90px * var(--d)))
		scale(calc(1 - max(var(--o), 0) * 0.07));
}

/* Split editorial: photo and story side by side. */
.preluence-slider--fx-split.is-ready .preluence-slider__slide {
	--surface: var(--pn-surface, #f3f5f8);
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	opacity: calc(1 - min(var(--a), 1));
	border-radius: var(--radius);
	background: var(--surface);
}

.preluence-slider--fx-split .preluence-slider__slide .preluence-slider__media {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	border-radius: 0;
}

.preluence-slider--fx-split.is-ready .preluence-slider__slide .preluence-slider__media {
	clip-path: inset(0 calc(min(var(--a), 1) * 100%) 0 0);
	transition: clip-path var(--speed) var(--ease);
}

.preluence-slider--fx-split .preluence-slider__shade {
	display: none;
}

.preluence-slider--fx-split .preluence-slider__content {
	position: relative;
	grid-column: 2;
	grid-row: 1;
	justify-content: center;
	border-inline-start: 4px solid var(--acc);
	transform: translateX(calc(var(--o) * 12%));
	gap: clamp(0.4rem, 1.2cqi, 0.8rem);
	padding: clamp(1rem, 3.5cqi, 2.5rem);
	transition: transform var(--speed) var(--ease), translate 0.5s ease-out;
}

.preluence-slider--fx-split .preluence-slider__title {
	font-size: clamp(1.2rem, 2.9cqi, 2.3rem);
	text-shadow: none;
}

.preluence-slider--fx-split .preluence-slider__excerpt {
	-webkit-line-clamp: 2;
}

.preluence-slider--fx-split .preluence-slider__share {
	border-color: color-mix(in srgb, var(--fg) 25%, transparent);
	color: var(--fg);
}

/* Glass story panel (glass effect, glass gradient, glass preset). */
.preluence-slider--fx-glass .preluence-slider__content,
.preluence-slider--grad-glass:not(.preluence-slider--fx-split) .preluence-slider__content {
	inset-block-end: clamp(0.75rem, 4cqi, 2.25rem);
	inset-inline-start: clamp(0.75rem, 4cqi, 2.25rem);
	max-width: min(calc(100% - 1.5rem), 640px);
	padding: clamp(1rem, 3.4cqi, 2rem);
	border: 1px solid rgb(255 255 255 / 20%);
	border-radius: calc(var(--radius) * 1.1);
	background:
		linear-gradient(140deg, rgb(255 255 255 / 16%), rgb(255 255 255 / 4%)),
		color-mix(in srgb, var(--ink) 38%, transparent);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 24px 60px -24px rgb(0 0 0 / 60%);
	backdrop-filter: blur(18px) saturate(150%);
}

@supports not (backdrop-filter: blur(1px)) {

	.preluence-slider--fx-glass .preluence-slider__content,
	.preluence-slider--grad-glass .preluence-slider__content {
		background: rgb(8 12 22 / 82%);
	}
}

/* ======================================================================
 * Enhanced: multi-card 3D track
 * ==================================================================== */

.preluence-slider.is-ready.preluence-slider--mode-track .preluence-slider__viewport {
	padding-block: 14px 22px;
	margin-block: -14px -22px;
}

.preluence-slider.is-ready.preluence-slider--mode-track .preluence-slider__track {
	display: flex;
	gap: var(--gap);
	overflow: visible;
	scroll-snap-type: none;
	transform: translate3d(var(--x, 0), 0, 0);
	transition: transform var(--speed) var(--ease);
	transform-style: preserve-3d;
	will-change: transform;
}

.preluence-slider.is-ready.preluence-slider--mode-track .preluence-slider__slide {
	flex: 0 0 calc((100% - (var(--pv) - 1) * var(--gap)) / var(--pv));
	aspect-ratio: var(--preluence-slider-ratio, 4 / 5);
	transform:
		rotateY(calc(clamp(-1.5, var(--o), 1.5) * -4deg * var(--d)))
		translateZ(calc(min(var(--a), 2) * -14px * var(--d)));
	transition:
		transform var(--speed) var(--ease),
		opacity var(--speed) var(--ease),
		box-shadow 0.3s var(--ease),
		translate 0.3s var(--ease);
}

.preluence-slider.is-ready.preluence-slider--mode-track .preluence-slider__slide[data-side="off"] {
	opacity: 0.35;
	scale: 0.94;
	cursor: default;
}

.preluence-slider--mode-track .preluence-slider__slide.is-active:hover {
	translate: 0 -6px;
	box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--acc) 60%, rgb(0 0 0 / 60%));
}

.preluence-slider--mode-track .preluence-slider__slide:hover .preluence-slider__image {
	scale: 1.05;
}

.preluence-slider--mode-track .preluence-slider__image {
	transition: scale 0.6s var(--ease);
}

.preluence-slider--mode-track .preluence-slider__title {
	font-size: clamp(1.05rem, 7.2cqi, 1.6rem);
}

.preluence-slider--mode-track .preluence-slider__excerpt {
	-webkit-line-clamp: 2;
}

/* Narrow cards keep the essentials: badge, headline, byline. */
@container (max-width: 260px) {

	.preluence-slider__excerpt,
	.preluence-slider__actions,
	.preluence-slider__reading,
	.preluence-slider__meta .preluence-slider__sep:last-of-type {
		display: none;
	}

	.preluence-slider__content {
		gap: 0.4rem;
		padding: 0.9rem;
	}
}

/* Cards with the story below the photo. */
.preluence-slider--card-below.preluence-slider--mode-track .preluence-slider__slide {
	--surface: var(--pn-surface-elevated, var(--pn-bg, #fff));
	display: flex;
	flex-direction: column;
	aspect-ratio: auto;
	border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
	background: var(--surface);
}

.preluence-slider--card-below .preluence-slider__media {
	position: relative;
	aspect-ratio: 16 / 10;
	flex: none;
	border-radius: 0;
}

.preluence-slider--card-below .preluence-slider__shade {
	display: none;
}

.preluence-slider--card-below .preluence-slider__content {
	position: relative;
	flex: 1;
	translate: none;
}

.preluence-slider--card-below .preluence-slider__title {
	text-shadow: none;
}



/* ======================================================================
 * Motion: image, headline, glow, light sweep, parallax
 * ==================================================================== */

.preluence-slider.is-ready.preluence-slider--mode-stage .preluence-slider__slide.is-active .preluence-slider__image-wrap {
	translate: calc(var(--mx, 0) * -10px) calc(var(--my, 0) * -8px);
}

.preluence-slider--img-kenburns.is-ready .preluence-slider__slide.is-active .preluence-slider__image {
	animation: preluence-slider-kenburns calc(var(--interval) + var(--speed) * 2) linear both;
}

.preluence-slider--img-zoom.is-ready .preluence-slider__slide.is-active .preluence-slider__image {
	animation: preluence-slider-zoom calc(var(--speed) * 1.8) var(--ease) both;
}

.preluence-slider--img-pan.is-ready .preluence-slider__slide.is-active .preluence-slider__image {
	animation: preluence-slider-pan calc(var(--interval) + var(--speed) * 2) linear both;
}

.preluence-slider--img-reveal.is-ready .preluence-slider__slide.is-active .preluence-slider__media {
	animation: preluence-slider-reveal calc(var(--speed) * 1.4) var(--ease) both;
}

.preluence-slider--img-blur.is-ready .preluence-slider__slide.is-active .preluence-slider__image {
	animation: preluence-slider-focus calc(var(--speed) * 1.6) var(--ease) both;
}

/* Headline and story entrance, staggered by position (--n). */
.preluence-slider.is-ready:not(.preluence-slider--head-none) .preluence-slider__slide.is-active .preluence-slider__content > * {
	animation: preluence-slider-rise calc(var(--speed) * 1.1) var(--ease) both;
	animation-delay: calc(var(--speed) * 0.3 + var(--n, 0) * 80ms);
}

.preluence-slider--head-fade.is-ready .preluence-slider__slide.is-active .preluence-slider__content > * {
	animation-name: preluence-slider-fade;
}

.preluence-slider--head-slide.is-ready .preluence-slider__slide.is-active .preluence-slider__content > * {
	animation-name: preluence-slider-slide-in;
}

.preluence-slider--head-mask.is-ready .preluence-slider__slide.is-active .preluence-slider__title {
	animation-name: preluence-slider-mask;
}

.preluence-slider--head-spacing.is-ready .preluence-slider__slide.is-active .preluence-slider__title {
	animation-name: preluence-slider-spacing;
}

.preluence-slider--head-scale.is-ready .preluence-slider__slide.is-active .preluence-slider__title {
	animation-name: preluence-slider-scale;
}

.preluence-slider--head-blur.is-ready .preluence-slider__slide.is-active .preluence-slider__title {
	animation-name: preluence-slider-unblur;
}

/* Track cards animate as a group, not one by one. */
.preluence-slider--mode-track.is-ready .preluence-slider__slide.is-active .preluence-slider__content > * {
	animation: none;
}

/* Glow on the active card. */
.preluence-slider.has-glow:not(.preluence-slider--fx-cinematic, .preluence-slider--fx-minimal, .preluence-slider--fx-grid, .preluence-slider--fx-vertical, .preluence-slider--mode-track) .preluence-slider__slide.is-active {
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--acc) 55%, transparent),
		0 28px 70px -22px color-mix(in srgb, var(--acc) 75%, transparent);
}

.preluence-slider.has-glow .preluence-slider__slide.is-active .preluence-slider__title {
	text-shadow: 0 2px 24px rgb(0 0 0 / 35%), 0 0 42px color-mix(in srgb, var(--acc) 40%, transparent);
}

/* One light sweep across a story as it arrives. */
.preluence-slider.has-sweep .preluence-slider__image-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 20%) 50%, transparent 65%);
	transform: translateX(-120%);
	pointer-events: none;
}

.preluence-slider.has-sweep.is-ready .preluence-slider__slide.is-active .preluence-slider__image-wrap::after {
	animation: preluence-slider-sweep 1.5s var(--ease) calc(var(--speed) * 0.5) both;
}

/* Soft blur on stories behind the active one (desktop only). */
@media (min-width: 1024px) {

	.preluence-slider.has-blur.is-ready .preluence-slider__slide:not(.is-active) .preluence-slider__media {
		filter: blur(calc(min(var(--a), 2) * 1.5px));
	}
}

/* Everything pauses together: off screen, hidden tab, hover, focus. */
.preluence-slider.is-paused .preluence-slider__image,
.preluence-slider.is-offscreen .preluence-slider__image,
.preluence-slider.is-offscreen .preluence-slider__backdrop {
	animation-play-state: paused !important;
}

/* ======================================================================
 * Atmosphere behind the stage
 * ==================================================================== */

.preluence-slider__backdrop {
	position: absolute;
	inset: -6% -4%;
	z-index: -1;
	display: none;
	background:
		radial-gradient(40% 50% at 18% 30%, color-mix(in srgb, var(--acc) 45%, transparent), transparent 70%),
		radial-gradient(38% 50% at 82% 70%, color-mix(in srgb, var(--acc2) 40%, transparent), transparent 70%);
	filter: blur(50px);
	opacity: 0.5;
	pointer-events: none;
	translate: calc(var(--mx, 0) * -18px) calc(var(--my, 0) * -12px);
	transition: translate 0.8s ease-out, background 0.8s ease;
}

:is(.preluence-slider--preset-futuristic, .preluence-slider--preset-neon, .preluence-slider--preset-aurora, .preluence-slider--preset-dynamic, .preluence-slider--preset-glass):is(.preluence-slider--fx-coverflow, .preluence-slider--fx-depth, .preluence-slider--fx-stack, .preluence-slider--fx-panorama, .preluence-slider--fx-cards) .preluence-slider__backdrop {
	display: block;
}

.preluence-slider--grad-animated .preluence-slider__backdrop {
	background-size: 160% 160%;
	animation: preluence-slider-aurora 18s ease-in-out infinite alternate;
}

/* ======================================================================
 * Controls
 * ==================================================================== */

.preluence-slider__arrows {
	position: absolute;
	inset: 50% 0 auto;
	z-index: 120;
	display: flex;
	justify-content: space-between;
	padding-inline: clamp(0.5rem, 2vw, 1.25rem);
	transform: translateY(-50%);
	pointer-events: none;
}

.preluence-slider__arrows[hidden],
.preluence-slider__navigation[hidden],
.preluence-slider.is-static .preluence-slider__arrows,
.preluence-slider.is-static .preluence-slider__navigation,
.preluence-slider.is-static .preluence-slider__progress {
	display: none;
}

.preluence-slider__arrow {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 26%);
	border-radius: 50%;
	background: rgb(8 12 22 / 42%);
	color: #fff;
	cursor: pointer;
	pointer-events: auto;
	backdrop-filter: blur(10px) saturate(140%);
	box-shadow: 0 10px 30px -12px rgb(0 0 0 / 50%);
	transition:
		background-color 0.25s var(--ease),
		border-color 0.25s var(--ease),
		box-shadow 0.25s var(--ease),
		transform 0.25s var(--ease),
		opacity 0.25s var(--ease);
}

.preluence-slider__arrow:hover {
	border-color: transparent;
	background: var(--acc);
	color: var(--acc-on);
	box-shadow: 0 12px 34px -10px var(--acc);
	transform: scale(1.06);
}

.preluence-slider__arrow:active {
	transform: scale(0.96);
}

.preluence-slider__arrow:disabled {
	opacity: 0.3;
	cursor: default;
	transform: none;
}

.preluence-slider__chevron {
	width: 10px;
	height: 10px;
	border-block-start: 2px solid currentcolor;
	border-inline-end: 2px solid currentcolor;
	transform: translateX(-2px) rotate(45deg);
}

.preluence-slider__arrow--prev .preluence-slider__chevron {
	transform: translateX(2px) rotate(-135deg);
}

[dir="rtl"] .preluence-slider__arrow--prev .preluence-slider__chevron {
	transform: translateX(-2px) rotate(45deg);
}

[dir="rtl"] .preluence-slider__arrow--next .preluence-slider__chevron {
	transform: translateX(2px) rotate(-135deg);
}

/* Full-frame stories: keep the headline clear of the arrows. */
@media (min-width: 600px) {

	.preluence-slider.is-ready:is(.preluence-slider--fx-cinematic, .preluence-slider--fx-minimal, .preluence-slider--fx-vertical, .preluence-slider--fx-grid):not(.is-single, .is-static) .preluence-slider__content {
		padding-inline: max(clamp(1rem, 5cqi, 3.25rem), 84px);
	}

	.preluence-slider.is-ready.preluence-slider--fx-glass:not(.is-single, .is-static) .preluence-slider__content {
		inset-inline-start: 84px;
		max-width: min(calc(100% - 168px), 640px);
	}
}

/* Split: keep arrows over the photo side. */
.preluence-slider--fx-split .preluence-slider__arrows {
	inset-inline-end: 45%;
}

/* Bottom bar */
.preluence-slider__navigation {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1rem;
	margin-block-start: 1rem;
}

.preluence-slider__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.1rem;
}

.preluence-slider__dot {
	position: relative;
	display: grid;
	place-items: center;
	width: 24px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: width 0.35s var(--ease);
}

.preluence-slider__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pn-text, #14171c) 26%, transparent);
	transition: width 0.35s var(--ease), background-color 0.35s var(--ease);
}

.preluence-slider__dot:hover::before {
	background: color-mix(in srgb, var(--acc) 70%, transparent);
}

.preluence-slider__dot[aria-current="true"] {
	width: 44px;
}

.preluence-slider__dot[aria-current="true"]::before {
	width: 34px;
	background: linear-gradient(90deg, var(--nav-accent, var(--acc)), var(--nav-accent-2, var(--acc2)));
	box-shadow: 0 0 14px -2px color-mix(in srgb, var(--nav-accent, var(--acc)) 70%, transparent);
}

.preluence-slider__dot .preluence-slider__progress-fill {
	display: none;
}

/* Dot progress: the active dot fills as time passes. */
.preluence-slider--progress-dots .preluence-slider__dot[aria-current="true"]::before {
	background: color-mix(in srgb, var(--acc) 30%, transparent);
}

.preluence-slider--progress-dots .preluence-slider__dot[aria-current="true"] .preluence-slider__progress-fill {
	position: absolute;
	inset-block-start: calc(50% - 4px);
	inset-inline-start: 5px;
	display: block;
	width: 34px;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--acc), var(--acc2));
	transform: scaleX(1);
	transform-origin: left;
}

[dir="rtl"] .preluence-slider--progress-dots .preluence-slider__dot .preluence-slider__progress-fill {
	transform-origin: right;
}

.preluence-slider__counter {
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
	margin: 0;
	font-family: var(--pn-font-ui);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.preluence-slider__current {
	font-size: 1.35rem;
	font-weight: 800;
	background: linear-gradient(120deg, var(--nav-accent, var(--acc)), var(--nav-accent-2, var(--acc2)));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.preluence-slider__of,
.preluence-slider__total {
	color: var(--pn-text-muted, #667085);
	font-size: 0.85rem;
	font-weight: 600;
}

.preluence-slider__play {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--pn-border, #d0d5dd);
	border-radius: 50%;
	background: var(--pn-bg, #fff);
	color: var(--pn-text);
	cursor: pointer;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.preluence-slider__play:hover {
	border-color: var(--acc);
	color: var(--acc);
}

.preluence-slider__ring {
	position: absolute;
	inset: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	transform: rotate(-90deg);
	pointer-events: none;
}

.preluence-slider__ring circle {
	fill: none;
	stroke-width: 2.5;
}

.preluence-slider__ring-track {
	stroke: transparent;
}

.preluence-slider__ring-fill {
	stroke: var(--acc);
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	stroke-linecap: round;
	opacity: 0;
}

.preluence-slider--progress-circle .preluence-slider__ring-fill {
	opacity: 1;
}

.preluence-slider__play-icon {
	width: 10px;
	height: 12px;
	border-inline: 3px solid currentcolor;
}

.preluence-slider__play[aria-pressed="true"] .preluence-slider__play-icon {
	width: 0;
	height: 0;
	margin-inline-start: 3px;
	border-block: 7px solid transparent;
	border-inline-start: 11px solid currentcolor;
	border-inline-end: 0;
}

/* Progress: bar along the bottom, or segments along the top. */
.preluence-slider__progress {
	position: absolute;
	z-index: 110;
	pointer-events: none;
}

.preluence-slider__progress--bar {
	inset: auto 0 0;
	height: 3px;
	background: rgb(255 255 255 / 16%);
}

.preluence-slider__progress-fill {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, var(--acc), var(--acc2));
	box-shadow: 0 0 12px var(--acc);
	transform: scaleX(0);
	transform-origin: left;
}

[dir="rtl"] .preluence-slider__progress-fill {
	transform-origin: right;
}

.preluence-slider__progress--segments {
	inset: clamp(0.6rem, 2vw, 1.1rem) clamp(0.75rem, 3vw, 1.5rem) auto;
	display: flex;
	gap: 5px;
}

.preluence-slider__segment {
	flex: 1;
	height: 3px;
	overflow: hidden;
	border-radius: 3px;
	background: rgb(255 255 255 / 25%);
}

.preluence-slider__segment.is-past .preluence-slider__progress-fill {
	transform: scaleX(1);
}

/* Track and card effects have no dark stage behind the bar. */
.preluence-slider--mode-track .preluence-slider__progress--bar {
	inset-block-end: -10px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--pn-text, #14171c) 12%, transparent);
}

.preluence-slider--mode-track .preluence-slider__progress--segments {
	display: none;
}

/* The clock: an invisible element whose animation drives autoplay. */
.preluence-slider__timer {
	position: absolute;
	inset: 0 auto auto 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.preluence-slider.is-running .preluence-slider__timer {
	animation: preluence-slider-timer var(--interval) linear both;
}

.preluence-slider.is-running .preluence-slider__progress--bar .preluence-slider__progress-fill,
.preluence-slider.is-running .preluence-slider__segment.is-active .preluence-slider__progress-fill,
.preluence-slider.is-running.preluence-slider--progress-dots .preluence-slider__dot[aria-current="true"] .preluence-slider__progress-fill,
.preluence-slider.is-running .preluence-slider__thumb.is-active .preluence-slider__progress-fill {
	animation: preluence-slider-fill var(--interval) linear both;
}

.preluence-slider.is-running .preluence-slider__ring-fill {
	animation: preluence-slider-ring var(--interval) linear both;
}

.preluence-slider.is-paused :is(.preluence-slider__timer, .preluence-slider__progress-fill, .preluence-slider__ring-fill) {
	animation-play-state: paused;
}

/* ======================================================================
 * Thumbnails, story rail and news grid
 * ==================================================================== */

.preluence-slider__frame {
	position: relative;
}

.preluence-slider__thumbs {
	display: flex;
	gap: 0.6rem;
	margin: 0.9rem 0 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.preluence-slider__thumbs::-webkit-scrollbar {
	display: none;
}

.preluence-slider__thumbs > li {
	flex: 0 0 auto;
	margin: 0;
}

.preluence-slider__thumb {
	--surface: var(--pn-surface-elevated, var(--pn-bg, #fff));
	--fg: var(--pn-text, #14171c);
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	height: 100%;
	padding: 0.45rem 0.6rem 0.5rem 0.45rem;
	overflow: hidden;
	border: 1px solid var(--pn-border, #e4e7ec);
	border-radius: calc(var(--radius) * 0.7);
	background: var(--surface);
	transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.preluence-slider__thumb:hover {
	border-color: color-mix(in srgb, var(--acc) 60%, transparent);
	transform: translateY(-2px);
}

.preluence-slider__thumb.is-active {
	border-color: var(--acc);
	box-shadow: 0 10px 28px -16px var(--acc);
}

.preluence-slider__thumb-media {
	position: relative;
	flex: none;
	width: 64px;
	height: 48px;
	overflow: hidden;
	border-radius: calc(var(--radius) * 0.5);
}

.preluence-slider__thumb-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.preluence-slider__thumb-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	width: 13rem;
	min-width: 0;
}

.preluence-slider__thumb-text small {
	color: var(--pn-badge, var(--acc));
	font-family: var(--pn-font-ui);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.preluence-slider__thumb-text strong {
	display: -webkit-box;
	overflow: hidden;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.preluence-slider__thumb-bar {
	position: absolute;
	inset: auto 0 0;
	height: 2px;
	overflow: hidden;
}

.preluence-slider__thumb.is-active .preluence-slider__thumb-bar {
	background: color-mix(in srgb, var(--acc) 20%, transparent);
}

/* Story rail: numbered headlines over the bottom of a cinematic hero. */
.preluence-slider__thumbs--rail .preluence-slider__thumb {
	--surface: var(--pn-bg, #fff);
	align-items: flex-start;
	border-color: transparent;
	background: transparent;
}

.preluence-slider__thumb-num {
	color: var(--pn-text-muted, #667085);
	font-family: var(--pn-font-ui);
	font-size: 1.1rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.preluence-slider__thumbs--rail .preluence-slider__thumb.is-active .preluence-slider__thumb-num {
	color: var(--acc);
}

.preluence-slider__thumbs--rail .preluence-slider__thumb-bar {
	inset: 0 0 auto;
	background: color-mix(in srgb, var(--pn-text, #14171c) 14%, transparent);
}

@container preluence-slider (min-width: 900px) {

	.preluence-slider.has-rail.is-ready .preluence-slider__thumbs--rail {
		position: absolute;
		inset: auto 0 0;
		z-index: 115;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		gap: 0;
		margin: 0;
		padding: 0 clamp(1rem, 3vw, 2.5rem);
		overflow: visible;
		background: linear-gradient(to top, rgb(4 7 14 / 88%), rgb(4 7 14 / 40%) 70%, transparent);
	}

	.preluence-slider.has-rail.is-ready .preluence-slider__thumbs--rail .preluence-slider__thumb {
		padding: 1rem 0.9rem 1.1rem;
		border-radius: 0;
		color: rgb(255 255 255 / 70%);
		transform: none;
		box-shadow: none;
	}

	.preluence-slider.has-rail.is-ready .preluence-slider__thumbs--rail .preluence-slider__thumb.is-active,
	.preluence-slider.has-rail.is-ready .preluence-slider__thumbs--rail .preluence-slider__thumb:hover {
		color: #fff;
	}

	.preluence-slider.has-rail.is-ready .preluence-slider__thumbs--rail .preluence-slider__thumb-bar {
		background: rgb(255 255 255 / 18%);
	}

	.preluence-slider.has-rail.is-ready .preluence-slider__thumb-text {
		width: auto;
	}

	.preluence-slider.has-rail.is-ready .preluence-slider__content {
		padding-block-end: 7.5rem;
	}

	.preluence-slider.has-rail.is-ready .preluence-slider__progress {
		display: none;
	}
}

/* News grid: lead story on a stage, the other stories beside it. */
.preluence-slider--fx-grid .preluence-slider__thumbs--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	overflow: visible;
}

.preluence-slider--fx-grid .preluence-slider__thumbs--grid .preluence-slider__thumb {
	align-items: stretch;
}

.preluence-slider--fx-grid .preluence-slider__thumbs--grid .preluence-slider__thumb-text {
	width: auto;
}

@container preluence-slider (min-width: 900px) {

	.preluence-slider--fx-grid.is-ready .preluence-slider__frame {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: var(--gap);
		align-items: stretch;
	}

	.preluence-slider--fx-grid.is-ready .preluence-slider__thumbs--grid {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		margin: 0;
		overflow: auto;
	}

	.preluence-slider--fx-grid.is-ready .preluence-slider__thumbs--grid > li {
		flex: 1 1 0;
		min-height: 0;
	}

	.preluence-slider--fx-grid .preluence-slider__thumbs--grid .preluence-slider__thumb-media {
		width: 88px;
		height: auto;
		min-height: 60px;
	}
}

/* ======================================================================
 * Filter bar
 * ==================================================================== */

.preluence-slider__filters {
	margin-block-end: 1rem;
}

.preluence-slider__filter-list {
	display: flex;
	gap: 0.4rem;
	margin: 0;
	padding: 0.2rem 0.1rem;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.preluence-slider__filter-list::-webkit-scrollbar {
	display: none;
}

.preluence-slider__filter-list > li {
	flex: none;
	margin: 0;
}

.preluence-slider__filter {
	position: relative;
	display: inline-flex;
	padding: 0.45rem 0.95rem 0.42rem;
	border: 1px solid var(--pn-border, #d0d5dd);
	border-radius: 999px;
	color: var(--pn-text);
	font-family: var(--pn-font-ui);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.preluence-slider__filter:hover {
	border-color: var(--pn-badge, var(--acc));
	color: var(--pn-text);
}

.preluence-slider__filter.is-active {
	border-color: transparent;
	background: var(--pn-badge, var(--acc));
	color: var(--pn-on-badge, var(--acc-on));
	box-shadow: 0 8px 22px -12px var(--pn-badge, var(--acc));
}

.preluence-slider.is-loading .preluence-slider__track {
	opacity: 0.35;
	transition: opacity 0.2s ease;
}

.preluence-slider.is-loading .preluence-slider__viewport::after {
	content: "";
	position: absolute;
	inset: calc(50% - 18px) auto auto calc(50% - 18px);
	z-index: 130;
	width: 36px;
	height: 36px;
	border: 3px solid rgb(255 255 255 / 30%);
	border-block-start-color: var(--acc);
	border-radius: 50%;
	animation: preluence-slider-spin 0.8s linear infinite;
}

.preluence-slider__empty {
	display: grid;
	place-items: center;
	min-height: 180px;
	margin: 0;
	padding: 2rem;
	border: 1px dashed var(--pn-border, #d0d5dd);
	border-radius: var(--radius);
	color: var(--pn-text-muted, #667085);
	text-align: center;
}

.preluence-slider.is-ready .preluence-slider__track > .preluence-slider__empty {
	position: absolute;
	inset: 0;
	color: rgb(255 255 255 / 80%);
}

/* ======================================================================
 * Presets
 * ==================================================================== */

.preluence-slider--preset-neon {
	--ink: #03050b;
}

.preluence-slider--preset-neon .preluence-slider__arrow {
	border-color: color-mix(in srgb, var(--acc) 70%, transparent);
	box-shadow: 0 0 22px -6px var(--acc);
}

.preluence-slider--preset-neon .preluence-slider__badge {
	box-shadow: 0 0 18px -2px var(--pn-badge, var(--acc));
}

.preluence-slider--preset-editorial .preluence-slider__title {
	font-weight: 700;
	letter-spacing: -0.02em;
}

.preluence-slider--preset-editorial .preluence-slider__cta {
	--cta-fg: var(--fg);
	border: 1px solid color-mix(in srgb, var(--fg) 70%, transparent);
	background: transparent;
	box-shadow: none;
}

.preluence-slider--preset-minimal .preluence-slider__arrow {
	width: 40px;
	height: 40px;
	background: rgb(255 255 255 / 92%);
	color: #14171c;
	backdrop-filter: none;
}

.preluence-slider--preset-minimal .preluence-slider__cta {
	--cta-fg: var(--fg);
	padding-inline: 0;
	background: none;
	box-shadow: none;
}

.preluence-slider--preset-agency .preluence-slider__badge {
	border-radius: 3px;
}

.preluence-slider--preset-agency .preluence-slider__progress--bar {
	height: 4px;
}

.preluence-slider--preset-agency .preluence-slider__progress-fill {
	background: var(--pn-breaking, var(--acc));
	box-shadow: none;
}

.preluence-slider--preset-futuristic .preluence-slider__viewport::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 116;
	height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 80%, #fff), transparent);
	opacity: 0.7;
	pointer-events: none;
}

/* ======================================================================
 * Debug panel (administrators only)
 * ==================================================================== */

.preluence-slider__debug {
	margin-block-start: 0.75rem;
	padding: 0.6rem 0.8rem;
	border: 1px dashed #f79009;
	border-radius: 6px;
	background: #fffaeb;
	color: #7a2e0e;
	font-size: 0.75rem;
}

.preluence-slider__debug pre,
.preluence-slider__debug output {
	display: block;
	max-height: 280px;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

/* ======================================================================
 * Responsive: dedicated tablet and phone behaviour
 * ==================================================================== */

@media (max-width: 1023px) {

	.preluence-slider {
		--d-scale: 0.7;
	}

	.preluence-slider--fx-coverflow,
	.preluence-slider--fx-depth {
		--card-w: 68%;
	}

	.preluence-slider--fx-stack {
		--card-w: 76%;
	}

	.preluence-slider.is-ready.preluence-slider--mode-stage .preluence-slider__viewport {
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 767px) {

	.preluence-slider--fx-split.is-ready .preluence-slider__slide {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	.preluence-slider--fx-split .preluence-slider__content {
		grid-column: 1;
		grid-row: 2;
		border-inline-start: 0;
		border-block-start: 4px solid var(--acc);
	}

	.preluence-slider--fx-split .preluence-slider__arrows {
		inset-inline-end: 0;
		inset-block-start: 26%;
	}
}

@media (max-width: 599px) {

	.preluence-slider {
		--d-scale: 0.45;
		--radius: var(--pn-radius, 10px);
	}

	.preluence-slider--fx-coverflow,
	.preluence-slider--fx-depth,
	.preluence-slider--fx-stack,
	.preluence-slider--fx-panorama {
		--card-w: 84%;
	}

	.preluence-slider.is-ready.preluence-slider--mode-stage .preluence-slider__viewport {
		aspect-ratio: 4 / 5;
		min-height: 360px;
	}

	.preluence-slider--fx-split.is-ready.preluence-slider--mode-stage .preluence-slider__viewport {
		aspect-ratio: 3 / 4;
	}

	.preluence-slider.is-ready.is-bleed.preluence-slider--fx-cinematic .preluence-slider__viewport {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.preluence-slider__title {
		font-size: clamp(1.25rem, 7cqi, 1.9rem);
	}

	.preluence-slider--mode-track .preluence-slider__excerpt,
	.preluence-slider--fx-coverflow .preluence-slider__excerpt,
	.preluence-slider--fx-depth .preluence-slider__excerpt,
	.preluence-slider--fx-stack .preluence-slider__excerpt {
		display: none;
	}

	.preluence-slider__arrow {
		width: 40px;
		height: 40px;
	}

	/* Keep arrows clear of the headline on phones. */
	.preluence-slider--mode-stage .preluence-slider__arrows {
		inset-block-start: 30%;
	}

	.preluence-slider__backdrop {
		opacity: 0.3;
		filter: blur(36px);
	}

	.preluence-slider.has-glow .preluence-slider__slide.is-active {
		box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--acc) 70%, transparent);
	}

	.preluence-slider.is-ready .preluence-slider__slide.is-portrait .preluence-slider__image-wrap {
		width: 100%;
	}

	.preluence-slider__cta {
		padding: 0.55rem 0.95rem;
	}

	.preluence-slider__thumbs--images .preluence-slider__thumb-text {
		width: 10rem;
	}
}

/* Touch screens: no hover-only affordances. */
@media (hover: none) {

	.preluence-slider--mode-track .preluence-slider__slide.is-active:hover {
		translate: none;
	}
}

/* ======================================================================
 * Reduced motion: no 3D, no parallax, no zoom — gentle fades only.
 * ==================================================================== */

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

	.preluence-slider.is-ready.preluence-slider--mode-stage .preluence-slider__slide {
		opacity: calc(1 - min(var(--a), 1)) !important;
		filter: none !important;
		transform: none !important;
		transition: opacity 0.2s linear !important;
	}

	.preluence-slider.is-ready.preluence-slider--mode-track .preluence-slider__slide {
		transform: none !important;
	}

	.preluence-slider.is-ready.preluence-slider--mode-track .preluence-slider__track {
		transition-duration: 0.15s;
	}

	.preluence-slider .preluence-slider__image,
	.preluence-slider .preluence-slider__media,
	.preluence-slider .preluence-slider__content > *,
	.preluence-slider .preluence-slider__image-wrap::after,
	.preluence-slider__backdrop,
	.preluence-slider__flag--breaking::before {
		animation: none !important;
	}

	.preluence-slider__image-wrap,
	.preluence-slider__content,
	.preluence-slider__backdrop {
		translate: none !important;
	}
}

/* ======================================================================
 * Keyframes
 * ==================================================================== */

@keyframes preluence-slider-timer {

	from {
		opacity: 0;
	}

	to {
		opacity: 0.01;
	}
}

@keyframes preluence-slider-fill {

	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

@keyframes preluence-slider-ring {

	from {
		stroke-dashoffset: 100;
	}

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes preluence-slider-kenburns {

	from {
		transform: scale(1.02) translate3d(0, 0, 0);
	}

	to {
		transform: scale(1.13) translate3d(-1.6%, -1%, 0);
	}
}

@keyframes preluence-slider-zoom {

	from {
		transform: scale(1.14);
	}

	to {
		transform: scale(1);
	}
}

@keyframes preluence-slider-pan {

	from {
		transform: scale(1.1) translateX(-3%);
	}

	to {
		transform: scale(1.1) translateX(3%);
	}
}

@keyframes preluence-slider-reveal {

	from {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes preluence-slider-focus {

	from {
		filter: blur(14px);
		transform: scale(1.08);
	}

	to {
		filter: blur(0);
		transform: scale(1);
	}
}

@keyframes preluence-slider-rise {

	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes preluence-slider-fade {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes preluence-slider-slide-in {

	from {
		opacity: 0;
		transform: translateX(-32px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes preluence-slider-mask {

	from {
		clip-path: inset(0 0 100% 0);
		transform: translateY(24%);
	}

	to {
		clip-path: inset(-10% -5% -20% -5%);
		transform: none;
	}
}

@keyframes preluence-slider-spacing {

	from {
		opacity: 0;
		letter-spacing: 0.18em;
	}

	to {
		opacity: 1;
		letter-spacing: -0.012em;
	}
}

@keyframes preluence-slider-scale {

	from {
		opacity: 0;
		transform: scale(0.94);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes preluence-slider-unblur {

	from {
		opacity: 0;
		filter: blur(10px);
	}

	to {
		opacity: 1;
		filter: blur(0);
	}
}

@keyframes preluence-slider-sweep {

	from {
		transform: translateX(-120%);
	}

	to {
		transform: translateX(120%);
	}
}

@keyframes preluence-slider-aurora {

	from {
		background-position: 0% 0%;
	}

	to {
		background-position: 100% 100%;
	}
}

@keyframes preluence-slider-pulse {

	from {
		box-shadow: 0 0 0 0 rgb(255 255 255 / 70%);
	}

	to {
		box-shadow: 0 0 0 8px rgb(255 255 255 / 0%);
	}
}

@keyframes preluence-slider-spin {

	to {
		transform: rotate(360deg);
	}
}


/* ---------- Containment: slide size and text block (Customize -> Main Hero) ----------
   The text block is absolutely positioned and anchored to the bottom, so when it
   is taller than the slide it overflows upwards and the title leaves the slide.
   These controls give the slide room and bound the text block. */

.preluence-slider__slide {
	min-height: var(--pn-slider-min-h, 0px);
}

.preluence-slider {
	margin-block: var(--pn-slider-margin, 0);
}

.preluence-slider__content {
	padding: var(--pn-slider-pad, clamp(1rem, 5cqi, 3.25rem));
	max-width: min(100%, var(--pn-slider-content-max, 860px));
	/* Never taller than the slide, and never spilling into the next section:
	   the title can no longer be pushed above the slide. Raise "Slide minimum
	   height" when the text needs more room than the ratio gives it. */
	max-height: 100%;
	overflow: hidden;
}

/* Anchor the text block (Main Hero -> Text block position). Expressed as
   variables so it applies in every hero renderer, not only a wrapper. */
.preluence-slider__content {
	inset-block-start: var(--pn-slider-content-top, auto);
	inset-block-end: var(--pn-slider-content-bottom, 0);
	margin-block: var(--pn-slider-content-margin, 0);
}