.player-gallery {
	--gallery-shadow-strong: rgb(7 29 92 / 34%);
	--gallery-shadow-soft: rgb(7 29 92 / 18%);
	--gallery-photo-wash: rgb(16 42 120 / 9%);

	.gallery-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(1rem, 3cqi, 1.5rem);
		padding-block-start: 1.25rem;
	}

	.player-photo {
		--photo-hover-tilt: -1deg;
		--photo-label: var(--color-highlight);

		position: relative;
		padding: 0.375rem;
		margin: 0;
		background: var(--color-on-dark);
		filter: drop-shadow(0 0.125rem 0.125rem var(--gallery-shadow-strong))
			drop-shadow(0.125rem 0.25rem 0.25rem var(--gallery-shadow-soft));
		rotate: 0deg;
		transition:
			filter 180ms ease,
			rotate 180ms ease,
			translate 180ms ease;

		&::after {
			position: absolute;
			inset-block-end: -0.625rem;
			inset-inline-start: 0.875rem;
			z-index: 1;
			padding-block: 0.375rem;
			padding-inline: 0.625rem;
			pointer-events: none;
			background: var(--photo-label);
			box-shadow: 0.125rem 0.1875rem 0 var(--gallery-shadow-soft);
			color: var(--color-brand);
			content: attr(data-player);
			font-family: var(--font-sans);
			font-size: var(--font-size-label);
			font-weight: 900;
			letter-spacing: 0.12em;
			line-height: 1;
			text-transform: uppercase;
			transform: rotate(-1.5deg);
		}

		&:is(:nth-child(9n + 2), :nth-child(9n + 6), :nth-child(9n + 8)) {
			--photo-hover-tilt: 1.25deg;
			--photo-label: var(--color-accent);

			&::after {
				inset-inline-start: auto;
				inset-inline-end: 0.875rem;
				color: var(--color-on-dark);
				transform: rotate(1.5deg);
			}
		}

		&:nth-child(3n) {
			--photo-hover-tilt: -0.35deg;
		}

		> button {
			position: relative;
			isolation: isolate;
			display: block;
			inline-size: 100%;
			aspect-ratio: 1;
			padding: 0;
			border: 0;
			background: transparent;
			color: inherit;
			cursor: zoom-in;
			touch-action: manipulation;
			overflow: hidden;

			&::before,
			&::after {
				position: absolute;
				inset: 0;
				content: "";
				pointer-events: none;
			}

			&::before {
				z-index: 1;
				background:
					url("../../assets/halftone-gradient.svg") 0 0 / auto 100% repeat-x,
					linear-gradient(var(--gallery-photo-wash), var(--gallery-photo-wash));
				mix-blend-mode: multiply;
				opacity: 0.86;
				transition: opacity 220ms ease;
			}

			&::after {
				inset-inline-end: auto;
				z-index: 2;
				inline-size: 52%;
				background: linear-gradient(
					100deg,
					transparent,
					rgb(255 255 255 / 4%) 28%,
					rgb(255 255 255 / 20%) 50%,
					rgb(255 255 255 / 4%) 72%,
					transparent
				);
				transform: translateX(-160%) skewX(-12deg);
			}

			&:focus-visible {
				outline: 0.1875rem solid var(--color-accent);
				outline-offset: 0.25rem;
			}
		}

		img {
			display: block;
			inline-size: 100%;
			block-size: 100%;
			filter: saturate(0.6) contrast(0.96) brightness(1.02);
			object-fit: cover;
			transition: filter 220ms ease;
		}

		&:is(:nth-child(9n + 2), :nth-child(9n + 6), :nth-child(9n + 8)) {
			grid-column: span 2;

			> button {
				aspect-ratio: 2 / 1;
			}
		}
	}
}

.gallery-lightbox {
	inline-size: fit-content;
	max-inline-size: none;
	max-block-size: none;
	padding: 0;
	border: 0;
	margin: auto;
	background: transparent;
	overflow: visible;

	&::backdrop {
		background:
			url("../../assets/gallery-symbols.svg") center / 12rem 9rem,
			rgb(7 29 92 / 88%);
		backdrop-filter: blur(0.25rem);
	}

	.gallery-lightbox-photo {
		position: relative;
		margin: 0;

		> img {
			display: block;
			inline-size: auto;
			max-inline-size: calc(100vw - 3rem);
			block-size: auto;
			max-block-size: calc(100vh - 3rem);
			max-block-size: calc(100dvh - 3rem);
			border: 0.375rem solid var(--color-on-dark);
			box-shadow: 0 1rem 3rem rgb(0 0 0 / 45%);
			object-fit: contain;
		}
	}

	.gallery-lightbox-caption {
		position: absolute;
		inset-block-end: 0.375rem;
		inset-inline: 0.375rem;
		padding-block: 0.5rem;
		padding-inline: 0.75rem;
		background: rgb(0 0 0 / 68%);
		color: var(--color-on-dark);
		font-family: var(--font-sans);
		font-size: var(--font-size-label);
		font-weight: 800;
		letter-spacing: 0.04em;
		line-height: 1.35;
		text-align: center;
		text-wrap: balance;
	}

	.gallery-controls {
		display: contents;
	}

	.gallery-controls > button {
		position: absolute;
		z-index: 1;
		display: grid;
		place-items: center;
		inline-size: 2.75rem;
		block-size: 4rem;
		padding: 0;
		border: 0;
		background: transparent;
		color: rgb(255 255 255 / 68%);
		cursor: pointer;
		touch-action: manipulation;
		transition: color 140ms ease;

		&:hover {
			color: var(--color-on-dark);
		}
	}

	:is(.gallery-previous, .gallery-next)::before {
		inline-size: 1rem;
		block-size: 1.5rem;
		background: currentColor;
		content: "";
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: contain;
		-webkit-mask-position: center;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: contain;
	}

	.gallery-controls > .gallery-close {
		inset-block-start: 0.25rem;
		inset-inline-end: 0.25rem;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		color: rgb(255 255 255 / 62%);

		&::before {
			inline-size: 1.625rem;
			aspect-ratio: 1;
			background: currentColor;
			content: "";
			mask:
				url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='m4 4 18 18M22 4 4 22' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='square'/%3E%3C/svg%3E")
				center / contain no-repeat;
			-webkit-mask:
				url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='m4 4 18 18M22 4 4 22' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='square'/%3E%3C/svg%3E")
				center / contain no-repeat;
		}
	}

	:is(.gallery-previous, .gallery-next) {
		inset-block-start: 50%;
		translate: 0 -50%;
	}

	.gallery-previous {
		inset-inline-start: 0.25rem;

		&::before {
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='m12 2-8 10 8 10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
			-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='m12 2-8 10 8 10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
		}
	}

	.gallery-next {
		inset-inline-end: 0.25rem;

		&::before {
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='m4 2 8 10-8 10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
			-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='m4 2 8 10-8 10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
		}
	}
}

/* The open/close animation only runs on precise pointers: iOS Safari can
   leave the top-layer transition stuck at its starting style, which hid the
   opened dialog (and froze the page behind it) on touch devices. */
@media (hover: hover) and (pointer: fine) and (
		prefers-reduced-motion: no-preference
	) {
	.gallery-lightbox {
		opacity: 0;
		transform: scale(0.96) rotate(-0.5deg);
		transition:
			opacity 140ms ease-out,
			transform 180ms cubic-bezier(0.2, 0.85, 0.25, 1.15),
			overlay 180ms allow-discrete,
			display 180ms allow-discrete;

		&:open {
			opacity: 1;
			transform: scale(1) rotate(0);
		}

		&::backdrop {
			opacity: 0;
			transition:
				opacity 140ms ease-out,
				overlay 180ms allow-discrete,
				display 180ms allow-discrete;
		}

		&:open::backdrop {
			opacity: 1;
		}
	}

	@starting-style {
		.gallery-lightbox:open {
			opacity: 0;
			transform: scale(0.96) rotate(-0.5deg);
		}

		.gallery-lightbox:open::backdrop {
			opacity: 0;
		}
	}
}

@supports (color: color-mix(in oklch, black, white)) {
	.player-gallery {
		--gallery-shadow-strong: color-mix(
			in oklch,
			var(--color-brand-deep) 34%,
			transparent
		);
		--gallery-shadow-soft: color-mix(
			in oklch,
			var(--color-brand-deep) 18%,
			transparent
		);
		--gallery-photo-wash: color-mix(in oklch, var(--color-brand) 9%, transparent);
	}
}

/* Focus rings belong to precise pointers; on touch the outline sticks after the tap. */
@media (hover: hover) and (pointer: fine) {
	.gallery-lightbox .gallery-controls > button:focus-visible {
		outline: 0.125rem solid rgb(255 255 255 / 68%);
		outline-offset: 0.25rem;
	}
}

@media (hover: hover) and (pointer: fine) and (
		prefers-reduced-motion: no-preference
	) {
	.player-gallery .player-photo:has(> button:is(:hover, :focus-visible)) {
		filter: drop-shadow(0 0.1875rem 0.1875rem var(--gallery-shadow-strong))
			drop-shadow(0.1875rem 0.375rem 0.375rem var(--gallery-shadow-soft));
		rotate: var(--photo-hover-tilt);
		translate: 0 -0.25rem;
	}

	.player-gallery .player-photo > button:is(:hover, :focus-visible) {
		&::before {
			opacity: 0.62;
		}

		&::after {
			animation: gallery-shine 1800ms cubic-bezier(0.4, 0, 0.2, 1) both;
		}

		img {
			filter: saturate(0.88) contrast(0.98) brightness(1.03);
		}
	}
}

@keyframes gallery-shine {
	from {
		transform: translateX(-160%) skewX(-12deg);
	}

	to {
		transform: translateX(300%) skewX(-12deg);
	}
}

@media (width <= 42.5rem) {
	.player-gallery .gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 1rem;

		.player-photo:is(:nth-child(9n + 2), :nth-child(9n + 8)) {
			--photo-hover-tilt: -1deg;
			--photo-label: var(--color-highlight);

			grid-column: span 1;

			&::after {
				inset-inline-start: 0.875rem;
				inset-inline-end: auto;
				color: var(--color-brand);
				transform: rotate(-1.5deg);
			}

			> button {
				aspect-ratio: 1;
			}
		}

		.player-photo:is(:nth-child(9n + 3), :nth-child(9n + 7)) {
			--photo-hover-tilt: 1.25deg;
			--photo-label: var(--color-accent);

			grid-column: span 2;

			&::after {
				inset-inline-start: auto;
				inset-inline-end: 0.875rem;
				color: var(--color-on-dark);
				transform: rotate(1.5deg);
			}

			> button {
				aspect-ratio: 2 / 1;
			}
		}
	}

	.gallery-lightbox {
		.gallery-lightbox-photo > img {
			max-inline-size: calc(100vw - 2rem);
			max-block-size: calc(100dvh - 2rem);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.player-gallery .player-photo {
		transition: none;
	}

	.player-gallery .player-photo > button {
		&::before,
		img {
			transition: none;
		}

		&::after {
			display: none;
		}
	}

	.gallery-lightbox,
	.gallery-lightbox::backdrop {
		transition: none;
	}

	.gallery-lightbox,
	.gallery-lightbox:open {
		transform: none;
	}
}

@media (forced-colors: active) {
	.player-gallery .player-photo {
		border: 1px solid CanvasText;

		&::after {
			border: 1px solid CanvasText;
		}
	}

	.gallery-lightbox .gallery-controls > button {
		border: 1px solid ButtonText;
		color: ButtonText;

		&::before {
			forced-color-adjust: none;
		}
	}
}