/**
 * Luxx A Look — glassmorphism skin for the PhotoSwipe lightbox.
 * Reuses the theme's existing design tokens (--glassPanel, --glassEdge,
 * --glass, --brd) so the lightbox matches the site and adds only ONE new
 * blur layer (the frosted backdrop) to keep the GPU cost low.
 */

/* Frosted glass backdrop — blurs the page behind the image (single layer). */
.pswp {
	--pswp-bg: rgba(12, 9, 22, 0.55);
	--pswp-icon-color: #fff;
	--pswp-icon-color-secondary: rgba(0, 0, 0, 0.35);
}
.pswp__bg {
	background: var(--glassPanel, rgba(20, 16, 32, 0.5));
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	backdrop-filter: blur(22px) saturate(160%);
}

/* The image sits on a soft glass plate: frosted edge + depth shadow. */
.pswp__img {
	border-radius: 12px;
	box-shadow:
		var(--glassEdge, inset 0 1.5px 0 rgba(255, 255, 255, 0.38)),
		0 30px 90px -24px rgba(0, 0, 0, 0.85);
	outline: 1px solid rgba(255, 255, 255, 0.16);
	outline-offset: -1px;
}
/* No frame while a blurred placeholder is showing (avoids a hard box). */
.pswp__img--placeholder {
	box-shadow: none;
	outline: none;
}

/* Glass pill controls (close, arrows, counter) to match the site chrome. */
.pswp__top-bar,
.pswp__button--arrow {
	background: transparent;
}
.pswp__button {
	border-radius: 999px;
}
.pswp__button:hover,
.pswp__button--arrow:hover {
	background: var(--glass, rgba(255, 255, 255, 0.12));
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	box-shadow: var(--glassEdge, none);
}
.pswp__counter {
	font-weight: 700;
	opacity: 0.9;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Image-heavy posts (large galleries) paint far faster when off-screen
   galleries skip layout/paint until scrolled near. The on-screen (first)
   gallery still renders immediately; `auto` remembers real heights so the
   scrollbar stays accurate. This is what removes the first-load jank on
   posts with many images. */
.wp-block-gallery {
	content-visibility: auto;
	contain-intrinsic-size: auto 640px;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.pswp__bg,
	.pswp__img {
		transition-duration: 0.01ms !important;
	}
}