/* ===========================================================================
   Home page — the rotating ring of discipline cards.

   The cards sit on a 3D carousel: each one is rotated around the Y axis by its
   own share of 360° and then pushed outwards, which places them evenly around
   a circle. The whole ring turns with the mouse (site/_code/js/gallery-3d.js).

   Sizes come from home.json's "layout" block.
   =========================================================================== */

.gallery3d-wrapper {
	width: 100%;
	height: var(--carousel-height, 75vh);
	min-height: var(--carousel-min-height, 480px);
	overflow: hidden;
	/* Transparent so the page background (plain colour, or the picture set in
	   home.json's "background") shows through here too, instead of a flat
	   navy band behind the carousel. */
	background: transparent;
	border-top: 0 !important;
	position: relative;
	/* a sideways finger drag spins the ring (gallery-3d.js); up/down still scrolls */
	touch-action: pan-y;
}

.gallery3d-scene {
	width: 100%;
	height: 100%;
	perspective: var(--carousel-perspective, 1200px);
	perspective-origin: 50% 50%;
}

.gallery3d-stage {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	position: relative;
	will-change: transform;
}

/* --angle (this card's place on the circle) and --color are set per card in
   the HTML, straight from home.json. */
.gallery3d-card {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--carousel-card-width, 220px);
	height: var(--carousel-card-height, 155px);
	margin: calc(var(--carousel-card-height, 155px) / -2) calc(var(--carousel-card-width, 220px) / -2);
	transform: rotateY(calc(var(--angle) * 1deg)) translateZ(var(--carousel-radius, 380px));
	border-radius: 5px;
	overflow: visible;
	cursor: pointer;
	text-decoration: none;
	display: block;
	box-shadow: 0 15px 45px rgba(0,0,0,0.55);
	transition: box-shadow 0.3s ease, filter 0.3s ease;
}
.gallery3d-card:hover { filter: brightness(1.15); }

.card-image {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	border-radius: 5px;
	overflow: hidden;
	z-index: 2;
}
.card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* A wash of the discipline's colour, which clears on hover. */
.card-color {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	opacity: 0.5;
	mix-blend-mode: multiply;
	background: var(--color);
	transition: opacity 0.3s;
}
.gallery3d-card:hover .card-color { opacity: 0.2; }

/* The card's name, which appears on hover. */
.gallery3d-card > span {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.5em 0.8em;
	background: linear-gradient(transparent, rgba(0,0,0,0.8));
	color: #fff;
	font-size: 0.68em;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 3;
	border-radius: 0 0 5px 5px;
}
.gallery3d-card:hover > span { opacity: 1; }

/* ── Vinyl record ──────────────────────────────────────────────────────────
   Add "vinyl": true to a card in home.json and a record slides out from
   behind its sleeve on hover. Drawn entirely with gradients — no image. */

.vinyl-record {
	position: absolute;
	height: 90%;
	aspect-ratio: 1;
	border-radius: 50%;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(circle at center, #2a2a2a 0% 3.5%, transparent 3.5% 100%),
		radial-gradient(circle at center, #7a1010 3.5% 16%, transparent 16% 100%),
		repeating-radial-gradient(circle at center, #111 0px, #1c1c1c 1.5px, #111 3px);
	box-shadow: 4px 4px 20px rgba(0,0,0,0.85);
}
.gallery3d-card:hover .vinyl-record {
	transform: translateY(-50%) translateX(48%);
}

/* ── Touch screens and phones ──────────────────────────────────────────────
   No mouse, no hover: the card names are simply always shown (on every phone-
   sized screen too, since not every phone admits it cannot hover), and
   gallery-3d.js turns the ring by itself and with a sideways swipe. */
@media (hover: none), screen and (max-width: 736px) {
	.gallery3d-card > span { opacity: 1; }
}

/* ── Tablets (iPad) ────────────────────────────────────────────────────────
   The desktop ring is about 1000px across, so on a tablet held upright the
   side cards fell off the screen. A middle set of sizes: the "...-tablet"
   lines in home.json's "layout". Phones get their own, below. */
@media screen and (max-width: 1024px) {
	.gallery3d-wrapper {
		height: var(--carousel-height-tablet, 55vh);
	}
	.gallery3d-card {
		width: var(--carousel-card-width-tablet, 180px);
		height: var(--carousel-card-height-tablet, 127px);
		margin: calc(var(--carousel-card-height-tablet, 127px) / -2) calc(var(--carousel-card-width-tablet, 180px) / -2);
		transform: rotateY(calc(var(--angle) * 1deg)) translateZ(var(--carousel-radius-tablet, 260px));
	}
}

/* ── Phones ────────────────────────────────────────────────────────────────
   The desktop ring is wider than a phone, so the side cards fell off the
   screen and the tall scene left a big empty gap below it. Phones get their
   own, smaller set of sizes: the "...-mobile" lines in home.json's "layout". */
@media screen and (max-width: 736px) {
	.gallery3d-wrapper {
		height: var(--carousel-height-mobile, 52vh);
		min-height: var(--carousel-min-height-mobile, 320px);
	}
	.gallery3d-scene {
		perspective: var(--carousel-perspective-mobile, 800px);
	}
	.gallery3d-card {
		width: var(--carousel-card-width-mobile, 130px);
		height: var(--carousel-card-height-mobile, 92px);
		margin: calc(var(--carousel-card-height-mobile, 92px) / -2) calc(var(--carousel-card-width-mobile, 130px) / -2);
		transform: rotateY(calc(var(--angle) * 1deg)) translateZ(var(--carousel-radius-mobile, 150px));
	}
	.gallery3d-card > span {
		font-size: 0.6em;
		letter-spacing: 0.08em;
	}
}