/* On tablet+, header is a transparent shell over the canvas */
@media (min-width: 768px) {
	.site-header {
		background: transparent;
		pointer-events: none;
	}

	.site-header .nav-toggle,
	.site-header .logo {
		pointer-events: auto;
	}
}

/* ── Mobile: scrollable column ── */
.play-mobile {
	display: block;
	padding: 0 var(--page-padding, 1.5rem) var(--space-section, 4rem);
}

.play-hero {
	padding-top: calc(var(--header-h, 4rem) + var(--space-section, 3rem));
	margin-bottom: var(--space-lg, 1.5rem);
}

.play-hero .micro-text {
	margin-bottom: var(--space-xs);
}

.play-hero h1 {
	font-family: var(--font-title);
	font-size: clamp(2.5rem, 8vw, 4rem);
	font-weight: 800;
	margin: 0;
	line-height: 0.95;
}

.play-cards {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.play-card {
	display: block;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 0 0.75rem 1.875rem rgba(0, 0, 0, 0.45);
	text-decoration: none;
	color: var(--color-text);
}

.play-card img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Tablet+: hide mobile layout, show canvas ── */
@media (min-width: 768px) {
	body { overflow: hidden; }
	.play-mobile { display: none; }
}

/* ── Draggable viewport ── */
.playground-viewport {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	background-color: var(--color-bg);
}

@media (min-width: 768px) {
	.playground-viewport { display: block; }
}

.playground-viewport.is-dragging {
	cursor: grabbing;
}

.playground-canvas {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	will-change: transform;
}

/* ── Center hint — mirrors the section header pattern ── */
.canvas-center {
	position: absolute;
	transform: translate(-50%, -50%);
	text-align: center;
	pointer-events: none;
	white-space: nowrap;
	z-index: 5;
}

.canvas-center .micro-text {
	margin-bottom: var(--space-xs);
	/* opacity: 0.35; */
}

.canvas-center h1 {
	font-family: var(--font-title);
	font-size: clamp(2rem, 6vw, 2.75rem);
	font-weight: 800;
	margin: 0 0 var(--space-lg);
	/* opacity: 0.12; */
	line-height: 0.95;
}

.canvas-drag-hint {
	font-family: var(--font-mono);
	font-size: clamp(0.7rem, 1.8vw, 0.8rem);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-text);
	opacity: 0.5;
}

/* ── Canvas items — mirrors project-card__media ── */
.canvas-item {
	position: absolute;
	display: block;
	width: var(--w, 270px);
	transform: translate(var(--cx), var(--cy)) rotate(var(--rot, 0deg));
	transform-origin: center center;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 0 0.75rem 1.875rem rgba(0, 0, 0, 0.45);
	outline: 1px solid transparent;
	text-decoration: none;
	color: var(--color-text);
	transition:
		transform 220ms var(--ease-out),
		outline-color 180ms var(--ease-out),
		box-shadow 220ms var(--ease-out);
	will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
	.canvas-item:hover {
		/* Straighten on hover — inverse of project card tilt */
		transform: translate(var(--cx), var(--cy)) rotate(0deg);
		outline-color: color-mix(in srgb, var(--color-text) 20%, transparent);
		box-shadow: 0 1.125rem 2.375rem rgba(0, 0, 0, 0.6);
		z-index: 10;
	}
}

.canvas-item img {
	display: block;
	width: 100%;
	height: auto;
}

.canvas-item__label {
	padding: 0.55em 0.9em 0.6em;
	border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
	background-color: color-mix(in srgb, var(--color-bg) 70%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.canvas-item__label p {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text);
	opacity: 0.5;
	margin: 0;
	line-height: 1;
}

/* ── Mobile: entrance animations (IntersectionObserver adds .in-view) ── */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {

	.play-hero .micro-text,
	.play-hero h1,
	.play-card {
		opacity: 0;
		translate: 0 2rem;
		transition: opacity 600ms var(--ease-out), translate 600ms var(--ease-out);
	}

	/* Hero stagger */
	.play-hero .micro-text { transition-delay: 80ms; }
	.play-hero h1          { transition-delay: 220ms; }

	.play-hero .micro-text.in-view,
	.play-hero h1.in-view,
	.play-card.in-view {
		opacity: 1;
		translate: 0 0px;
	}
}

/* ── Desktop canvas: entrance animations ── */
@media (min-width: 768px) {
	@media (prefers-reduced-motion: no-preference) {

		/* Center label: stagger micro-text → h1 → drag hint */
		.canvas-center .micro-text {
			animation: canvas-fade-up 600ms var(--ease-out) 200ms both;
		}

		.canvas-center h1 {
			animation: canvas-fade-up 700ms var(--ease-out) 380ms both;
		}

		.canvas-drag-hint {
			animation: canvas-hint-in 600ms var(--ease-out) 580ms both;
		}

		/* Items: scale + fade in, staggered
		   Uses standalone scale so it doesn't conflict with
		   transform: translate(--cx, --cy) rotate(--rot) on each item */
		.canvas-item {
			animation: canvas-item-in 700ms var(--ease-out) 180ms both;
		}

		.canvas-item:nth-child(3) { animation-delay: 320ms; }
		.canvas-item:nth-child(4) { animation-delay: 460ms; }

		@keyframes canvas-fade-up {
			from { opacity: 0; translate: 0 1.2rem; }
			to   { opacity: 1; translate: 0 0px; }
		}

		@keyframes canvas-hint-in {
			from { opacity: 0; }
			to   { opacity: 0.5; }
		}

		@keyframes canvas-item-in {
			from { opacity: 0; scale: 0.88; }
			to   { opacity: 1; scale: 1; }
		}
	}
}