/* ==========================================================
   RADIAL CARDS MARQUEE
   Adapted for the Salient child theme
========================================================== */

/*
 * Prevent native image/link dragging while keeping
 * the cards clickable.
 */
[data-radial-cards-marquee-list],
[data-radial-cards-marquee-list] a,
[data-radial-cards-marquee-list] img {
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}

[data-radial-cards-marquee-list] img {
	pointer-events: none;
}

.radial-cards-marquee {
	--radial-card-width: 290px;
	--radial-card-gap: 30px;

	position: relative;

	width: 100%;
	min-height: 450px;

	overflow: hidden;
}

/*
 * Controls where the visible portion of the circle
 * sits within the section.
 */
.radial-cards-marquee__collection {
	position: absolute;
	top: 40px;
	left: 50%;

	width: var(--radial-card-width);

	transform: translateX(-50%);
}

/*
 * Main rotating circle.
 *
 * --total: total number of card positions around the circle
 * --radius: distance between cards and the centre of the circle
 * --duration: time taken to complete one full rotation
 */
[data-radial-cards-marquee-list] {
	--total: 12;
	--radius: 830px;
	--duration: 60s;

	display: grid;

	width: var(--radial-card-width);
	margin: 0;
	padding: 0;

	list-style: none;

	transform-origin: 50% var(--radius);

	animation-name: radial-cards-rotate;
	animation-duration: var(--duration);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;

	will-change: transform;
}

/*
 * Every card occupies the same grid cell, then rotates
 * into its own position around the circle.
 */
[data-radial-cards-marquee-list] > * {
	grid-area: 1 / 1;

	width: var(--radial-card-width);

	transform-origin: 50% var(--radius);

	transform: rotate(
		calc(360deg / var(--total) * (var(--card) - 1))
	);
}

@keyframes radial-cards-rotate {
	from {
		transform: rotate(0deg);
	}

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

/* ==========================================================
   CARD
========================================================== */

.radial-card {
	position: relative;

	display: block;

	width: 100%;
	padding: 8px;
	overflow: hidden;

	color: #ffffff;
	background: #152940;

	border-radius: 8px;

	text-decoration: none;

	box-shadow:
		0 12px 35px rgba(0, 0, 0, 0.16);

	transition:
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.45s ease;

	will-change: transform;

	-webkit-tap-highlight-color: transparent;
}

.radial-card__visual {
	position: relative;

	width: 100%;
	overflow: hidden;

	border-radius: 5px;
}

.radial-card__media {
	position: relative;

	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;

	background: rgba(255, 255, 255, 0.08);

	border-radius: inherit;
}

.radial-card__image {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;

	border-radius: inherit;

	transition:
		transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);

	will-change: transform;
}

.radial-card__info {
	padding: 14px 9px 8px;
}

.radial-card__title {
	margin: 0;

	color: inherit;

	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* ==========================================================
   CARD BADGE
========================================================== */

.radial-card::after {
	content: attr(data-badge);

	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 10;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 12px;
	padding: 6px 10px;

	color: #ffffff;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.38),
			rgba(255, 255, 255, 0.16)
		);

	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 4px;

	-webkit-backdrop-filter:
		blur(14px) saturate(150%);

	backdrop-filter:
		blur(14px) saturate(150%);

	font-size: 9px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;

	text-shadow:
		0 1px 4px rgba(0, 0, 0, 0.25);

	box-shadow:
		0 5px 15px rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.25);

	pointer-events: none;

	transform: translateZ(0);
	-webkit-transform: translateZ(0);

	transition:
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Hide the badge when there is no data-badge value.
 */
.radial-card:not([data-badge])::after,
.radial-card[data-badge=""]::after {
	display: none;
}

/* ==========================================================
   DESKTOP HOVER EFFECTS
========================================================== */

/*
 * Only use hover effects on devices with a genuine
 * mouse or trackpad.
 */
@media (hover: hover) and (pointer: fine) {
	.radial-card:hover {
		transform:
			translateY(-10px)
			scale(1.04);

		box-shadow:
			0 45px 70px rgba(237, 69, 69, 0.55);
	}

	.radial-card:hover .radial-card__image {
		transform: scale(1.045);
	}

	.radial-card:hover::after {
		transform:
			translateZ(0)
			scale(1.08);
	}

	.radial-cards-marquee:hover
	[data-radial-cards-marquee-list] {
		animation-play-state: paused;
	}
}

/* ==========================================================
   TOUCH DEVICES
========================================================== */

/*
 * Touch devices do not have a genuine hover state.
 * The active effect appears while the card is pressed.
 */
@media (hover: none), (pointer: coarse) {
	.radial-cards-marquee
	[data-radial-cards-marquee-list] {
		animation-play-state: running;
	}

	.radial-card:active {
		transform:
			translateY(-6px)
			scale(1.03);

		box-shadow:
			0 30px 55px rgba(237, 69, 69, 0.55);

		transition-duration: 0.18s;
	}

	.radial-card:active .radial-card__image {
		transform: scale(1.045);

		transition-duration: 0.18s;
	}

	.radial-card:active::after {
		transform:
			translateZ(0)
			scale(1.06);

		transition-duration: 0.18s;
	}
}

/* ==========================================================
   TABLET
========================================================== */

@media only screen and (max-width: 999px) {
	.radial-cards-marquee {
		--radial-card-width: 240px;

		min-height: 560px;
	}

	.radial-cards-marquee__collection {
		top: 30px;
	}

	[data-radial-cards-marquee-list] {
		--radius: 690px;
		--duration: 55s;
	}

	.radial-card__title {
		font-size: 12px;
	}
}

/* ==========================================================
   MOBILE
========================================================== */

@media only screen and (max-width: 690px) {
	.radial-cards-marquee {
		--radial-card-width: min(68vw, 199px);

		min-height: 300px;
	}

	.radial-cards-marquee__collection {
		top: 25px;
	}

	[data-radial-cards-marquee-list] {
		--radius: 570px;
		--duration: 40s;

		animation-play-state: running;
	}

	.radial-card__title {
		font-size: 10px;
	}

	.radial-card::after {
		top: 13px;
		right: 13px;

		padding: 4px 7px;

		font-size: 8px;
	}
}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

/*
 * Use a slower animation instead of stopping it completely
 * when Reduced Motion is enabled.
 */
@media (prefers-reduced-motion: reduce) {
	[data-radial-cards-marquee-list] {
		--duration: 70s;
	}

	.radial-card,
	.radial-card__image,
	.radial-card::after {
		transition: none;
	}
}