/**
 * Animated Promo V4: stage styles.
 *
 * Design tokens derived from the CraftBook Magazine site: a clean
 * magazine look with one strong accent per content pillar, presented on
 * a deep ink stage so the promo reads well inside both light and dark
 * page themes.
 */

.apv4-stage {
	/* Palette: one accent per CraftBook pillar. */
	--apv4-ink: #12151c;          /* Stage background, deep ink. */
	--apv4-paper: #f7f5f0;        /* Headline text, warm paper white. */
	--apv4-muted: #9aa3b2;        /* Supporting text. */
	--apv4-a1: #3b82f6;
	--apv4-a2: #f2a81d;
	--apv4-a3: #e7548c;
	--apv4-a4: #22b07d;
	--apv4-technology: var(--apv4-a1);
	--apv4-business: var(--apv4-a2);
	--apv4-creativity: var(--apv4-a3);
	--apv4-society: var(--apv4-a4);
	--apv4-focus: #ffffff;

	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
}

/* 16:9 letterboxed frame. aspect-ratio with a padding fallback for
   older WebKit/Silk builds. */
.apv4-stage__frame {
	position: relative;
	width: 100%;
	background: var(--apv4-ink);
	border-radius: 10px;
	overflow: hidden;
}

@supports (aspect-ratio: 16 / 9) {
	.apv4-stage__frame {
		aspect-ratio: 16 / 9;
	}
}

@supports not (aspect-ratio: 16 / 9) {
	.apv4-stage__frame::before {
		content: "";
		display: block;
		padding-top: 56.25%;
	}
	.apv4-stage__frame > * {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
}

.apv4-stage__frame svg {
	display: block;
	width: 100%;
	height: 100%;
}

.apv4-stage__noscript {
	color: var(--apv4-paper);
	text-align: center;
	padding: 2em 1em;
	margin: 0;
}

/* Footer title bar, editable in the admin. */
.apv4-stage__footer-title {
	text-align: center;
	color: currentColor;
	opacity: 0.85;
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.6em 0.5em 0;
}

/* Click-to-play overlay (placeholder visual is replaced by the full
   engine once scenes are mounted). */
.apv4-play-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background: radial-gradient(
		ellipse at center,
		rgba(59, 130, 246, 0.14),
		rgba(18, 21, 28, 0) 70%
	);
	cursor: pointer;
	border: 0;
	width: 100%;
	color: var(--apv4-paper);
}

.apv4-play-overlay:focus-visible {
	outline: 3px solid var(--apv4-focus);
	outline-offset: -3px;
}

.apv4-play-overlay__button {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--apv4-paper);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
	transition: transform 160ms ease;
}

.apv4-play-overlay:hover .apv4-play-overlay__button,
.apv4-play-overlay:focus-visible .apv4-play-overlay__button {
	transform: scale(1.08);
}

.apv4-play-overlay__button svg {
	width: 34px;
	height: 34px;
	margin-left: 5px; /* Optical centring of the triangle. */
}

.apv4-play-overlay__label {
	font-size: 1rem;
	letter-spacing: 0.04em;
	opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
	.apv4-play-overlay__button {
		transition: none;
	}
}

/* Small screens: tighten footer type. */
@media (max-width: 480px) {
	.apv4-stage__footer-title {
		font-size: 0.72rem;
		letter-spacing: 0.05em;
	}
}

/* ==================================================================
 * Engine, controls, zoom and fullscreen
 * ================================================================== */

.apv4-svg {
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y; /* Page scroll stays natural until zoomed. */
}

.apv4-zoomed .apv4-svg {
	cursor: grab;
	touch-action: none; /* Zoomed: drags pan the world, pinch zooms. */
}

.apv4-zoomed .apv4-svg:active {
	cursor: grabbing;
}

/* Control bar: translucent strip over the lower edge of the frame. */
.apv4-controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: linear-gradient(
		to top,
		rgba(10, 12, 17, 0.85),
		rgba(10, 12, 17, 0)
	);
	color: var(--apv4-paper);
	z-index: 3;
}

.apv4-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 50%;
	background: rgba(247, 245, 240, 0.12);
	color: var(--apv4-paper);
	cursor: pointer;
	padding: 0;
	transition: background 140ms ease, transform 140ms ease;
}

.apv4-btn:hover {
	background: rgba(247, 245, 240, 0.24);
	transform: scale(1.06);
}

.apv4-btn:focus-visible {
	outline: 2px solid var(--apv4-focus);
	outline-offset: 2px;
}

.apv4-btn svg {
	width: 20px;
	height: 20px;
	display: block;
}

.apv4-btn--small {
	width: 32px;
	height: 32px;
}

.apv4-btn--small svg {
	width: 16px;
	height: 16px;
}

/* Progress bar: flexible centre element, seekable. */
.apv4-progress {
	position: relative;
	flex: 1 1 auto;
	height: 8px;
	border-radius: 4px;
	background: rgba(247, 245, 240, 0.18);
	cursor: pointer;
	min-width: 60px;
}

.apv4-progress:focus-visible {
	outline: 2px solid var(--apv4-focus);
	outline-offset: 3px;
}

.apv4-progress__fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	border-radius: 4px;
	background: linear-gradient(
		90deg,
		var(--apv4-technology),
		var(--apv4-creativity)
	);
}

.apv4-progress__handle {
	position: absolute;
	top: 50%;
	left: 0;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: var(--apv4-paper);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

/* Zoom group. */
.apv4-zoom {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.apv4-zoom__label {
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.75;
}

.apv4-zoom__slider {
	width: 90px;
	accent-color: var(--apv4-technology);
	cursor: pointer;
}

.apv4-zoom__slider:focus-visible {
	outline: 2px solid var(--apv4-focus);
	outline-offset: 3px;
}

/* End-of-animation replay overlay. */
.apv4-end-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background: rgba(10, 12, 17, 0.45);
	border: 0;
	cursor: pointer;
	color: var(--apv4-paper);
	z-index: 2;
	width: 100%;
}

.apv4-end-overlay:focus-visible {
	outline: 3px solid var(--apv4-focus);
	outline-offset: -3px;
}

.apv4-end-overlay .apv4-play-overlay__button svg {
	margin-left: 0;
	fill: none;
	stroke: var(--apv4-ink);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	width: 30px;
	height: 30px;
}

/* Play poster sits above controls until dismissed. */
.apv4-play-overlay {
	z-index: 4;
}

/* Fullscreen: fill the screen, keep 16:9 letterboxing via the SVG's
   own preserveAspectRatio. */
.apv4-fullscreen {
	max-width: none;
	background: #000;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.apv4-fullscreen .apv4-stage__frame {
	border-radius: 0;
}

.apv4-fullscreen .apv4-stage__footer-title {
	color: var(--apv4-paper);
}

/* Compact controls on small screens: hide the zoom label, shrink gaps.
   Everything stays reachable with touch (40px targets kept). */
@media (max-width: 600px) {
	.apv4-controls {
		gap: 6px;
		padding: 8px 10px;
	}
	.apv4-zoom__label {
		display: none;
	}
	.apv4-zoom__slider {
		width: 64px;
	}
}

@media (max-width: 420px) {
	.apv4-zoom {
		display: none; /* Pinch-zoom still available on touch. */
	}
}

@media (prefers-reduced-motion: reduce) {
	.apv4-btn,
	.apv4-btn:hover {
		transition: none;
		transform: none;
	}
}

/* ==================================================================
 * Audio controls
 * ================================================================== */

.apv4-audio {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

.apv4-audio__slider {
	width: 74px;
	accent-color: var(--apv4-business);
	cursor: pointer;
}

.apv4-audio__slider:focus-visible {
	outline: 2px solid var(--apv4-focus);
	outline-offset: 3px;
}

/* "Tap for sound" chip for autoplay-muted mode. */
.apv4-sound-chip {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 0;
	border-radius: 999px;
	background: rgba(10, 12, 17, 0.78);
	color: var(--apv4-paper);
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	cursor: pointer;
	z-index: 5;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
	animation: apv4-chip-in 400ms ease both;
}

.apv4-sound-chip:hover {
	background: rgba(10, 12, 17, 0.92);
}

.apv4-sound-chip:focus-visible {
	outline: 2px solid var(--apv4-focus);
	outline-offset: 2px;
}

.apv4-sound-chip svg {
	width: 18px;
	height: 18px;
	display: block;
}

@keyframes apv4-chip-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
	.apv4-audio__slider {
		width: 56px;
	}
}

@media (max-width: 420px) {
	.apv4-audio__slider {
		display: none; /* Mute button remains; system volume governs. */
	}
}

@media (prefers-reduced-motion: reduce) {
	.apv4-sound-chip {
		animation: none;
	}
}

/* ==================================================================
 * Accessibility and polish
 * ================================================================== */

/* Visually hidden, available to assistive technology. */
.apv4-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* ==================================================================
 * Theme presets: chrome adjustments
 * ================================================================== */

/* Control surfaces are always dark glass; on light themes the stage
   foreground (paper) is dark, so force a light foreground on them. */
.apv4-theme-calm .apv4-controls,
.apv4-theme-calm .apv4-sound-chip,
.apv4-theme-calm .apv4-end-overlay,
.apv4-theme-calm .apv4-play-overlay {
	color: #f7f5f0;
}

/* On a light stage, lift the frame with a hairline so it reads against
   light page backgrounds too. */
.apv4-theme-calm .apv4-stage__frame {
	box-shadow: inset 0 0 0 1px rgba(38, 48, 59, 0.12);
}