/*
 * Agent Circuits — marketing demo, shared site CSS.
 *
 * Owns: page reset, scroll-snap container, scene base, side-rail,
 * caption layers, pointer bubbles, theme toggle, help overlay.
 *
 * Per-scene visuals live in scenes/<chapter>/<scene>.css and are
 * injected at runtime by app.js based on the cssPath each scene module
 * declares via import.meta.url.
 *
 * No hex codes; everything reaches palette/type/motion through tokens.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	color: var(--foreground);
	font-family: var(--font-sans);
	font-size: var(--mkt-text-base);
	line-height: var(--mkt-line-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Page background lives on html so the body can stay transparent over
 * the .bg-video layer; html bg is the fallback when the video can't
 * load (network, codec, reduced motion). */
html {
	background: var(--background);
}

html {
	/* Default browser root is 16px. We clamp on viewport width so the
	 * whole design (chat columns, panel padding, type ramp, rail
	 * width — everything rem-based) scales with the window. Floor at
	 * 16px so narrow viewports stay legible; ceiling at 22px so very
	 * wide displays don't get cartoonishly large. The 1.25vw slope
	 * lands at ~18px on a 1440px display and ~22px on a 1760px
	 * display. */
	font-size: clamp(16px, 1.25vw, 22px);
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	min-height: 100dvh;
	overflow-x: hidden;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}

button {
	font: inherit;
	cursor: pointer;
}

a {
	color: inherit;
}

code,
pre {
	font-family: var(--font-mono);
}

/* ---- Background video ---------------------------------------------- *
 *
 * Constantly-playing ambient video behind everything else. Fixed full
 * viewport, object-fit cover, pointer-inert. Sits at z-index 0 as the
 * lowest positioned element in the body; later DOM elements (brand,
 * deck, rail, theme-toggle) sit naturally above it. Hidden under
 * prefers-reduced-motion — constant background motion can be
 * disorienting (DESIGN.md §5.5). */

.bg-video {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
	.bg-video {
		display: none;
	}
}

/* ---- Brand ---------------------------------------------------------- */

.brand {
	position: fixed;
	top: 1.5rem;
	left: 1.75rem;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--foreground);
	font-weight: var(--mkt-weight-semibold);
	font-size: var(--mkt-text-base);
	letter-spacing: var(--mkt-tracking-tight);
	text-decoration: none;
}

.brand__mark {
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 999px;
	background: var(--primary);
	display: inline-block;
}

.brand__word {
	white-space: nowrap;
}

/* ---- Theme toggle --------------------------------------------------- */

.theme-toggle {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 60;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--card);
	color: var(--foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	font-size: 0.95rem;
	transition:
		background var(--mkt-duration-quick) var(--mkt-ease-out),
		transform var(--mkt-duration-quick) var(--mkt-ease-out);
}

.theme-toggle:hover {
	background: var(--accent);
}

/* ---- Help trigger + overlay ---------------------------------------- */

.help-trigger {
	position: fixed;
	bottom: 1.5rem;
	left: 1.75rem;
	z-index: 60;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--card);
	color: var(--muted-foreground);
	font-size: 0.85rem;
	font-family: var(--font-mono);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		background var(--mkt-duration-quick) var(--mkt-ease-out),
		color var(--mkt-duration-quick) var(--mkt-ease-out);
}

.help-trigger:hover {
	background: var(--accent);
	color: var(--foreground);
}

.help {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: color-mix(in oklch, var(--background) 75%, transparent);
	display: grid;
	place-items: center;
	padding: 2rem;
}

.help[hidden] {
	display: none;
}

.help__panel {
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-radius: var(--mkt-panel-radius);
	padding: var(--mkt-panel-padding-lg);
	box-shadow: var(--mkt-shadow-md);
	max-width: 30rem;
	width: 100%;
	display: grid;
	row-gap: 1.25rem;
}

.help__title {
	font-size: var(--mkt-text-xl);
	font-weight: var(--mkt-weight-semibold);
	letter-spacing: var(--mkt-tracking-tight);
}

.help__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	row-gap: 0.5rem;
	font-size: var(--mkt-text-base);
}

.help__row {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	color: var(--muted-foreground);
}

.help__keys {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--foreground);
	flex-shrink: 0;
	min-width: 9rem;
}

.help__close {
	justify-self: end;
	background: var(--primary);
	color: var(--primary-foreground);
	border: 1px solid var(--primary);
	border-radius: var(--radius-md);
	padding: 0.4rem 0.85rem;
	font-size: var(--text-sm);
	font-weight: var(--mkt-weight-medium);
}

.help__close:hover {
	opacity: 0.9;
}

/* ---- Side-rail ------------------------------------------------------ */

.rail {
	position: fixed;
	top: 50%;
	right: 1.5rem;
	transform: translateY(-50%);
	z-index: 50;
	width: var(--mkt-rail-width);
	max-height: 78vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in oklch, var(--foreground) 20%, transparent) transparent;
}

.rail::-webkit-scrollbar {
	width: 4px;
}

.rail::-webkit-scrollbar-thumb {
	background: color-mix(in oklch, var(--foreground) 20%, transparent);
	border-radius: 999px;
}

.rail::-webkit-scrollbar-track {
	background: transparent;
}

.rail__list {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
}

.rail__group {
	margin: 0.85rem 0 0.35rem;
	padding: 0 0.625rem;
	font-size: var(--text-xs);
	font-weight: var(--mkt-weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--mkt-tracking-caps);
	color: var(--muted-foreground);
}

.rail__group:first-child {
	margin-top: 0;
}

.rail__item {
	margin: 0;
}

.rail__link {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 0.625rem;
	border-radius: var(--radius-md);
	font-size: var(--text-xs);
	color: var(--muted-foreground);
	text-decoration: none;
	transition:
		color var(--mkt-duration-quick) var(--mkt-ease-out),
		background var(--mkt-duration-quick) var(--mkt-ease-out);
}

.rail__link:hover {
	color: var(--foreground);
	background: color-mix(in oklch, var(--accent) 65%, transparent);
}

.rail__bullet {
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: currentColor;
	opacity: 0.4;
	flex-shrink: 0;
	transition: opacity var(--mkt-duration-quick) var(--mkt-ease-out);
}

.rail__item--active .rail__link {
	color: var(--foreground);
	background: color-mix(in oklch, var(--accent) 95%, transparent);
}

.rail__item--active .rail__bullet {
	background: var(--mkt-status-running);
	opacity: 1;
}

.rail__label {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Deck (scenes container) --------------------------------------- */

.deck {
	width: 100%;
}

/* ---- Scene base ----------------------------------------------------- */

.scene {
	position: relative;
	width: 100%;
	min-height: 100dvh;
	height: 100dvh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	justify-items: center;
	padding: 4.5rem clamp(2rem, 5vw, 4rem);
	padding-right: calc(var(--mkt-rail-width) + 3.5rem);
	/* 3D context for the inner card. The card itself tilts; everything
	 * else stays flat. Distance is large enough that the tilt reads as
	 * a gentle parallax, not a perspective trick. */
	perspective: 1500px;
	perspective-origin: 50% 50%;
}

.scene__inner {
	width: 100%;
	max-width: 60rem;
	display: grid;
	row-gap: 1.5rem;
	/* Card frame. Static shadow + hairline border + token surface — no
	 * animated box-shadow / backdrop-filter (DESIGN.md §5.1, §7).
	 * The 3D tilt is a transform-only layer applied at runtime by
	 * app.js, so the scene timelines stay pure (BRIEF §6). */
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-radius: var(--mkt-panel-radius-lg);
	padding: var(--mkt-panel-padding-lg);
	box-shadow: var(--mkt-shadow-md);
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.scene--intro .scene__inner {
	max-width: 38rem;
	row-gap: 1.25rem;
}

/* ---- Caption layers (scene title, blurb, label) -------------------- */

.scene__caption {
	display: grid;
	row-gap: 0.5rem;
	max-width: 56ch;
}

.scene__label {
	font-size: var(--text-xs);
	font-weight: var(--mkt-weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--mkt-tracking-caps);
	color: var(--muted-foreground);
	font-family: var(--font-mono);
}

.scene__title {
	font-size: var(--mkt-text-3xl);
	font-weight: var(--mkt-weight-semibold);
	line-height: var(--mkt-line-snug);
	letter-spacing: var(--mkt-tracking-tight);
	color: var(--foreground);
}

.scene__blurb {
	font-size: var(--mkt-text-lg);
	line-height: var(--mkt-line-relaxed);
	color: var(--muted-foreground);
	max-width: 56ch;
}

/* ---- Pointer bubble ------------------------------------------------- */

.pointer {
	position: absolute;
	pointer-events: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.6rem;
	border-radius: 999px;
	background: var(--card);
	color: var(--foreground);
	border: 1px solid var(--border);
	font-size: var(--text-xs);
	font-weight: var(--mkt-weight-medium);
	letter-spacing: var(--mkt-tracking-caps);
	text-transform: uppercase;
	box-shadow: var(--mkt-shadow-sm);
	white-space: nowrap;
	opacity: 0;
	z-index: 5;
}

.pointer__dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--mkt-status-running);
	display: inline-block;
}

/* ---- Reveal helper -------------------------------------------------- *
 *
 * Streaming text uses clip-path inset driven by --reveal (a percentage
 * from 0% to 100%). The CSS contract: --reveal defaults to 100% so any
 * element without a declared starting value renders fully visible. The
 * scene's GSAP timeline sets the starting --reveal: 0% before the
 * stream beat and animates to 100% to play the reveal.
 */

.reveal {
	clip-path: inset(0 calc(100% - var(--reveal, 100%)) 0 0);
	-webkit-clip-path: inset(0 calc(100% - var(--reveal, 100%)) 0 0);
}

/* ---- Reduced motion ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.theme-toggle,
	.help-trigger,
	.rail__link,
	.rail__bullet {
		transition: none;
	}
}

/* ---- Mobile graceful degrade --------------------------------------- */

@media (max-width: 900px) {
	.rail,
	.help-trigger {
		display: none;
	}

	.theme-toggle {
		top: 1rem;
		right: 1rem;
	}

	.brand {
		top: 1rem;
		left: 1rem;
	}

	.scene {
		padding: 4rem 1.5rem 3rem;
	}

	.scene__title {
		font-size: var(--mkt-text-2xl);
	}

	.scene__blurb {
		font-size: var(--mkt-text-base);
	}
}