/* Homepage hero carousel */

.hero-bg-grid {
	background-image:
		linear-gradient(to right, rgba(59, 130, 246, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
	background-size: 40px 40px;
	background-position: center center;
}

.pn-hero-carousel__stage {
	min-height: clamp(420px, 55vh, 640px);
}

.pn-hero-carousel__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(0, 0, 0);
	transition:
		opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.85s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0.85s step-end;
	will-change: opacity, transform;
}

.pn-hero-carousel__slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.85s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s step-start;
}

.pn-hero-carousel__slide.is-leaving {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.pn-hero-carousel--slide .pn-hero-carousel__slide {
	transform: translate3d(2.5rem, 0, 0);
}

.pn-hero-carousel--slide .pn-hero-carousel__slide.is-active {
	transform: translate3d(0, 0, 0);
}

.pn-hero-carousel--slide .pn-hero-carousel__slide.is-leaving {
	transform: translate3d(-2.5rem, 0, 0);
}

.pn-hero-carousel--fade-scale .pn-hero-carousel__slide {
	transform: scale(0.98);
}

.pn-hero-carousel--fade-scale .pn-hero-carousel__slide.is-active {
	transform: scale(1);
}

.pn-hero-carousel--fade-scale .pn-hero-carousel__slide.is-leaving {
	transform: scale(1.01);
}

.pn-hero-carousel__content > * {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition:
		opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.pn-hero-carousel__slide.is-active .pn-hero-carousel__content > * {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.pn-hero-carousel__slide.is-active .pn-hero-carousel__badge { transition-delay: 0.05s; }
.pn-hero-carousel__slide.is-active .pn-hero-carousel__headline,
.pn-hero-carousel__slide.is-active h1 { transition-delay: 0.12s; }
.pn-hero-carousel__slide.is-active .pn-hero-carousel__accent { transition-delay: 0.18s; }
.pn-hero-carousel__slide.is-active .pn-hero-carousel__description { transition-delay: 0.24s; }
.pn-hero-carousel__slide.is-active .pn-hero-carousel__actions { transition-delay: 0.32s; }

.pn-hero-carousel__visual {
	aspect-ratio: 16 / 10;
	min-height: clamp(220px, 32vh, 420px);
	opacity: 0;
	transform: translate3d(0, 10px, 0) scale(0.985);
	transition:
		opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.pn-hero-carousel__slide.is-active .pn-hero-carousel__visual {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	transition-delay: 0.08s;
}

.pn-hero-carousel__image {
	max-height: min(520px, 52vh);
}

.pn-hero-carousel--ken-burns .pn-hero-carousel__slide.is-active .pn-hero-carousel__image {
	animation: pn-hero-ken-burns var(--pn-hero-duration, 10s) ease-out forwards;
}

@keyframes pn-hero-ken-burns {
	from { transform: scale(1); }
	to { transform: scale(1.04); }
}

.pn-hero-carousel__indicator {
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: left;
}

.pn-hero-carousel__indicator:focus-visible {
	outline: 2px solid #3b82f6;
	outline-offset: 4px;
	border-radius: 4px;
}

.pn-hero-carousel__progress-fill {
	width: 0%;
	transition: width 0.1s linear;
}

.pn-hero-carousel.is-paused .pn-hero-carousel__progress-fill {
	transition: none;
}

.pn-hero-carousel__pause.is-paused {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 1023px) {
	.pn-hero-carousel__visual {
		max-width: 560px;
		margin-inline: auto;
	}

	.pn-hero-carousel__stage {
		min-height: auto;
	}

	.pn-hero-carousel__slide {
		position: relative;
	}

	.pn-hero-carousel__slide:not(.is-active) {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pn-hero-carousel__slide,
	.pn-hero-carousel__content > *,
	.pn-hero-carousel__visual,
	.pn-hero-carousel__progress-fill {
		transition: none !important;
		animation: none !important;
	}

	.pn-hero-carousel--ken-burns .pn-hero-carousel__slide.is-active .pn-hero-carousel__image {
		animation: none;
	}
}