/*
 * Environment Deck gallery — fanned per-environment screenshot cards.
 *
 * Pairs with js/entry/site/marketing/envDeck.ts. A feature tile that supplies
 * `gallery_slides` renders its hero screenshot with the other environment
 * variants (Terminal / VS Code / Web…) fanned behind it like a slid deck of
 * cards, each badged with its environment. The engine maintains the
 * [data-env-deck-depth] attribute (0 = front card); ALL stacking + fan offsets
 * are expressed here off that attribute, so the script sets no inline styles.
 *
 * Each card stays a [data-lightbox-src] trigger, so clicking the front card
 * zooms it through the existing shared lightbox (reused unchanged); clicking a
 * peeking back card rotates it forward instead.
 *
 * Mobile-first; brand tokens only (brand/tokens.css).
 */

.pc-env-deck {
	position: relative;
}

/* The stacking area. Every card occupies the same grid cell so the deck sizes
 * to the hero; the padding reserves room for the fanned cards that peek out
 * toward the bottom-right. */
.pc-env-deck__cards {
	list-style: none;
	margin: 0;
	/* Fan reserve so back cards peek (the "stack" read). Must stay large enough
	 * that depth-1/2 translates are visible on first paint — not after JS. */
	padding: 0 var(--nllm-space-2xl, 1.5rem) var(--nllm-space-2xl, 1.5rem) 0;
	display: grid;
}

.pc-env-deck__card {
	grid-area: 1 / 1;
	z-index: var(--pc-env-deck-z, 0);
	transition: transform var(--nllm-transition-base), opacity var(--nllm-transition-base);
}

/* No fan animation until envDeck has finished first enhance — kills load flicker
 * when setActive(0) rewrites depths that were already correct in HTML. */
.pc-env-deck:not([data-env-deck-ready]) .pc-env-deck__card {
	transition: none;
}

/* Front card: flush, opaque, on top. Deeper cards fan down-right, shrink, and
 * fade — capped at depth 3 so a large deck stays tidy. */
.pc-env-deck__card[data-env-deck-depth="0"] {
	--pc-env-deck-z: 40;

	transform: none;
	opacity: 1;
}

.pc-env-deck__card[data-env-deck-depth="1"] {
	--pc-env-deck-z: 30;

	transform: translate(6%, 7%) scale(0.94);
	opacity: 0.9;
}

.pc-env-deck__card[data-env-deck-depth="2"] {
	--pc-env-deck-z: 20;

	transform: translate(11%, 13%) scale(0.88);
	opacity: 0.75;
}

.pc-env-deck__card[data-env-deck-depth="3"] {
	--pc-env-deck-z: 10;

	transform: translate(16%, 19%) scale(0.82);
	opacity: 0.62;
}

.pc-env-deck__trigger {
	position: relative;
	display: block;
	width: 100%;
	/* [claude:opus-4.8-1m][client:2.1.186][hurc:v0.11.975] Uniform card frame: every environment card is the SAME 16:10 box,
	 * regardless of its source screenshot's native dimensions. A tall portrait
	 * shot (e.g. the VS Code activity-bar panel) can no longer poke out below a
	 * short terminal card and leave a misleading dead click-target sticking out
	 * the bottom of the deck. The full, uncropped image still shows in the
	 * lightbox carousel — the deck card is only the teaser. */
	aspect-ratio: 1600 / 1000;
	overflow: hidden;
	padding: 0;
	border: var(--nllm-border-width-thin) solid var(--nllm-border);
	background: var(--nllm-surface-deep);
	cursor: zoom-in;
	border-radius: var(--nllm-radius-md);
	box-shadow: var(--nllm-shadow-lg);
}

/* Back cards advance the deck rather than zoom — signal that with a pointer. */
.pc-env-deck__card:not(.is-active) .pc-env-deck__trigger {
	cursor: pointer;
}

.pc-env-deck__trigger:focus-visible {
	outline: var(--nllm-border-width-medium) solid var(--nllm-violet);
	outline-offset: var(--nllm-space-2xs);
}

.pc-env-deck__img {
	display: block;
	width: 100%;
	height: 100%;
	/* [claude:opus-4.8-1m][client:2.1.186][hurc:v0.11.975] Cover the uniform frame; anchor to the TOP so the most identifying
	 * part of each screenshot (title bar / first rows) stays visible after the
	 * crop. Border + radius + shadow now live on the clipping frame (.__trigger). */
	object-fit: cover;
	object-position: top center;
}

/* Environment badge chip pinned to each card's top-left. */
.pc-env-deck__badge {
	position: absolute;
	top: var(--nllm-space-xs);
	left: var(--nllm-space-xs);
	padding: var(--nllm-space-2xs) var(--nllm-space-xs);
	background: var(--nllm-violet);
	color: var(--nllm-text);
	font-size: var(--nllm-text-xs);
	font-weight: var(--nllm-font-weight-semibold);
	line-height: var(--nllm-leading-snug);
	letter-spacing: 0.02em;
	border-radius: var(--nllm-radius-full);
	box-shadow: var(--nllm-shadow-sm);
}

/* Expand: only the front card may host a pill (back cards rotate, not zoom).
 * Reveal/hover rules live in lightbox.css — do not force opacity:1 here. */
.pc-env-deck__card:not([data-env-deck-depth="0"]) .pc-media-expand,
.pc-env-deck__card:not([data-env-deck-depth="0"]) .pc-env-deck__expand-hint,
.pc-env-deck__card:not(.is-active) .pc-media-expand,
.pc-env-deck__card:not(.is-active) .pc-env-deck__expand-hint {
	display: none !important;
}

.pc-env-deck__card[data-env-deck-depth="0"].is-active .pc-media-expand,
.pc-env-deck__card[data-env-deck-depth="0"].is-active .pc-env-deck__expand-hint {
	display: inline-flex !important;
}

/* ── Feature demo VIDEO — same uniform frame as screenshot cards ───────────
 * No min-height (overflows the tile column). Match aspect-ratio + cover-fit
 * so the fan stack reads as one deck, not a letterboxed video postage stamp. */
.pc-env-deck__card.pcv-feature-video {
	min-height: 0;
}

.pc-env-deck__card.pcv-feature-video .pcv-feature-video__frame,
.pc-env-deck__card.pcv-feature-video .pc-env-deck__trigger {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 1600 / 1000;
	min-height: 0;
	overflow: hidden;
	border-radius: var(--nllm-radius-md);
	background: var(--nllm-surface-deep, #070b16);
	border: var(--nllm-border-width-thin, 1px) solid rgba(124, 92, 255, 0.35);
	box-shadow: var(--nllm-shadow-lg);
	cursor: zoom-in;
	padding: 0;
}

.pc-env-deck__card.pcv-feature-video .pcv-feature-video__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	background: #070b16;
	pointer-events: none;
}

/* ── Inline controls — match live: small solid dots, quiet arrows ──────────
 * --nllm-border is empty on this site; use concrete slate so inactive dots
 * never vanish. */

.pc-env-deck__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	margin-top: 0.75rem;
}

.pc-env-deck__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid rgba(148, 163, 184, 0.35);
	border-radius: 999px;
	background: rgba(30, 41, 59, 0.9);
	color: #e2e8f0;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.pc-env-deck__arrow::before {
	display: block;
}

.pc-env-deck__arrow--prev::before {
	content: "\2039"; /* ‹ */
}

.pc-env-deck__arrow--next::before {
	content: "\203A"; /* › */
}

.pc-env-deck__arrow:hover,
.pc-env-deck__arrow:focus-visible {
	background: #7c3aed;
	border-color: #7c3aed;
	outline: none;
}

.pc-env-deck__arrow:focus-visible {
	outline: 2px solid #38bdf8;
	outline-offset: 2px;
}

.pc-env-deck__dots {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.pc-env-deck__dot {
	/* Live look: small solid slate bubbles; active = violet scale-up */
	width: 0.5rem;
	height: 0.5rem;
	min-width: 0.5rem;
	min-height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #cbd5e1;
	cursor: pointer;
	opacity: 1;
	transform: none;
	transition: background 0.15s ease, transform 0.15s ease;
}

.pc-env-deck__dot:hover {
	background: #a78bfa;
}

.pc-env-deck__dot[aria-pressed="true"] {
	background: #7c3aed;
	transform: scale(1.4);
}

.pc-env-deck__dot:focus-visible {
	outline: 2px solid #38bdf8;
	outline-offset: 2px;
}

/* ── Lightbox carousel ─ prev/next + an env counter the engine injects INTO the
 * shared lightbox when a deck card is zoomed, so the expanded view rotates
 * through the same environments as the small deck. The lightbox stays the one
 * sanctioned modal; the engine only appends these controls and swaps its image. */
.pc-env-deck__zoom-arrow {
	position: fixed;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: var(--nllm-border-width-thin) solid var(--nllm-border);
	border-radius: var(--nllm-radius-full);
	background: var(--nllm-surface-deep);
	color: var(--nllm-text);
	font-size: var(--nllm-text-h3);
	line-height: var(--nllm-leading-none);
	cursor: pointer;
	opacity: 0.9;
	transform: translateY(-50%);
	transition: background var(--nllm-transition-fast), opacity var(--nllm-transition-fast);
}

.pc-env-deck__zoom-arrow--prev {
	left: var(--nllm-space-lg);
}

.pc-env-deck__zoom-arrow--next {
	right: var(--nllm-space-lg);
}

.pc-env-deck__zoom-arrow--prev::before {
	content: "\2039"; /* ‹ */
}

.pc-env-deck__zoom-arrow--next::before {
	content: "\203A"; /* › */
}

.pc-env-deck__zoom-arrow:hover {
	background: var(--nllm-violet);
	opacity: 1;
}

.pc-env-deck__zoom-arrow:focus-visible {
	background: var(--nllm-violet);
	opacity: 1;
	outline: var(--nllm-border-width-medium) solid var(--nllm-text);
	outline-offset: var(--nllm-space-2xs);
}

/* Env label + position counter for the zoomed card, e.g. "VS Code · 1 / 3". */
.pc-env-deck__zoom-label {
	position: fixed;
	bottom: var(--nllm-space-lg);
	left: 50%;
	padding: var(--nllm-space-2xs) var(--nllm-space-md);
	background: var(--nllm-violet);
	color: var(--nllm-text);
	font-size: var(--nllm-text-sm);
	font-weight: var(--nllm-font-weight-semibold);
	border-radius: var(--nllm-radius-full);
	box-shadow: var(--nllm-shadow-md);
	transform: translateX(-50%);
}

/* Honour reduced-motion: keep the fanned layout, drop the animation. */
@media (prefers-reduced-motion: reduce) {
	.pc-env-deck__card,
	.pc-env-deck__arrow,
	.pc-env-deck__zoom-arrow,
	.pc-env-deck__dot {
		transition: none;
	}
}