/* L'anello: 8 facce a 45° l'una dall'altra, tutte visibili (anche quelle sul
   retro, viste di spalle e più piccole): è questo che dà la sensazione di
   profondità. La faccia davanti non viene arretrata, così la prospettiva
   la ingrandisce. Il raggio è il doppio della larghezza di una faccia. */
.gallery {
	--w: clamp(8rem, 19vw, 13rem);
	--h: calc(var(--w) * 2 / 3);
	--r: calc(var(--w) * 2);
	min-height: calc(var(--h) * 2.4 + 7rem);
	perspective: 60rem;
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}
.gallery:active {
	cursor: grabbing;
}

.ring {
	position: relative;
	width: var(--w);
	height: var(--h);
	transform-style: preserve-3d;
	transform: rotateX(-6deg) rotateY(var(--rot, 0deg));
	transition: transform 700ms var(--ease-in-out);
}
.face {
	position: absolute;
	inset: 0;
	margin: 0;
	transform: rotateY(calc(var(--i) * 45deg)) translateZ(var(--r));
}
.face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0.75rem;
	box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.5);
	pointer-events: none;
}

.controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
}
.caption {
	min-width: 10rem;
	text-align: center;
	font-family: var(--font-display);
	font-weight: 600;
}
.ctl {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
	transition:
		transform 160ms var(--ease-out),
		background-color 160ms ease,
		border-color 160ms ease;
}
.ctl svg {
	width: 1.25rem;
	height: 1.25rem;
}
.ctl:active {
	transform: scale(0.94);
}
@media (hover: hover) and (pointer: fine) {
	.ctl:hover {
		background: #262626;
		border-color: var(--muted);
	}
}
.ctl--play {
	margin-left: 0.5rem;
}
.ctl--play .i-play,
.ctl--play[aria-pressed='true'] .i-pause {
	display: none;
}
.ctl--play[aria-pressed='true'] .i-play {
	display: block;
}

@media (max-width: 36rem) {
	.controls {
		flex-wrap: wrap;
	}
	.caption {
		order: -1;
		width: 100%;
	}
}