/*
 * Hero exhibition enhancements. Loaded on the homepage only.
 * Below-hero sections use the baseline theme styles.
 */

:root {
	--ps-plinth-fill: 72%;
}

/* Sticky header (above hero) */
.ps-site-header {
	position: sticky;
	top: 0;
	z-index: var(--ps-z-header);
	transition:
		padding var(--ps-motion-fast) var(--ps-ease-out),
		background var(--ps-motion-fast) ease,
		border-color var(--ps-motion-fast) ease,
		backdrop-filter var(--ps-motion-fast) ease;
}

.ps-site-header.is-scrolled {
	background: rgb(5 5 7 / 88%);
	backdrop-filter: blur(14px) saturate(120%);
	border-bottom-color: rgb(255 255 255 / 18%) !important;
}

.ps-site-header.is-scrolled > .wp-block-group {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

.ps-site-header .wp-block-navigation-item__content {
	position: relative;
	transition: color var(--ps-motion-fast) ease;
}

.ps-site-header .wp-block-navigation-item__content:hover,
.ps-site-header .wp-block-navigation-item__content:focus-visible {
	color: var(--ps-color-cyan);
}

.ps-site-header .current-menu-item > .wp-block-navigation-item__content,
.ps-site-header .current-menu-item > .wp-block-navigation-item__content:focus-visible {
	color: var(--ps-color-cyan);
}

/* Hero ambient grid */
.ps-hero {
	position: relative;
	min-height: clamp(34rem, 72vh, 42rem) !important;
	isolation: isolate;
}

.ps-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .35;
	background-image:
		linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 20%, transparent 72%);
}

.ps-enhanced-motion .ps-hero::after {
	animation: ps-ambient-grid-drift var(--ps-motion-ambient) linear infinite;
}

@keyframes ps-ambient-grid-drift {
	from { background-position: 0 0, 0 0; }
	to { background-position: 48px 48px, 48px 48px; }
}

/* Hero spectral plinth — neutral void frame, no colored aura on artwork */
.ps-spectral-plinth {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid var(--ps-color-hairline);
	border-radius: 1rem;
	background: var(--ps-color-ink);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 6%),
		0 1.25rem 2.5rem rgb(0 0 0 / 32%);
}

.ps-spectral-plinth__media {
	display: block;
	width: var(--ps-plinth-fill);
	height: var(--ps-plinth-fill);
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	object-fit: contain;
	object-position: center;
}

.ps-hero-carousel .ps-hero-carousel-sheen {
	display: none;
}

/* Hide cursor atmosphere over hero sticker links only. */
.ps-pointer-effects.ps-suppress-pointer-glow body::before {
	display: none !important;
}

.ps-hero-carousel-stage::before {
	display: none;
}

.ps-hero-carousel-slide[data-position="active"] {
	filter: drop-shadow(0 2rem 3.5rem rgb(0 0 0 / 52%));
}

.ps-hero-carousel-slide[data-position="previous"],
.ps-hero-carousel-slide[data-position="next"] {
	filter: drop-shadow(0 1.25rem 2rem rgb(0 0 0 / 38%));
}

.ps-hero-carousel {
	--ps-carousel-side-scale: .76;
	--ps-carousel-spread: clamp(5.5rem, 18vw, 9rem);
	--ps-carousel-side-depth: -70px;
}

.ps-hero-carousel-stage {
	height: clamp(14rem, 42vw, 20rem);
}

.ps-hero-carousel-product {
	display: block;
	border-radius: 1.25rem;
	text-decoration: none;
}

.ps-hero-carousel-plinth {
	border-radius: 1.25rem;
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 8%),
		0 2rem 3.5rem rgb(0 0 0 / 48%);
}

.ps-hero-carousel-slide[data-position="active"] .ps-hero-carousel-plinth {
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 10%),
		0 2.5rem 4rem rgb(0 0 0 / 55%);
}

.ps-hero-carousel-slide[data-position="previous"],
.ps-hero-carousel-slide[data-position="next"] {
	opacity: .96;
}

.ps-hero-carousel-slide[data-position="previous"] .ps-spectral-plinth,
.ps-hero-carousel-slide[data-position="next"] .ps-spectral-plinth {
	border-color: var(--ps-color-hairline);
}

.ps-hero-carousel-slide {
	width: min(62vw, 18rem);
}

.ps-hero-carousel-slide[data-position="active"] {
	width: min(68vw, 21rem);
}

.ps-hero-carousel-footer {
	margin-top: clamp(1rem, 2.5vw, 1.5rem);
}

.ps-hero-carousel-caption a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: .35rem;
	color: var(--ps-color-cyan);
	font-weight: 700;
	text-decoration: none;
}

.ps-hero-carousel-caption a:hover,
.ps-hero-carousel-caption a:focus-visible {
	text-decoration: underline;
}

@media (min-width: 1280px) and (max-height: 800px) {
	.ps-hero {
		min-height: auto !important;
		padding-block: clamp(2rem, 4vh, 3rem);
	}

	.ps-hero-carousel-stage {
		height: clamp(12rem, 34vh, 16rem);
	}

	.ps-hero-carousel {
		--ps-carousel-spread: clamp(4.5rem, 14vw, 7rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ps-hero::after,
	.ps-enhanced-motion .ps-hero::after {
		animation: none !important;
	}
}