/* ─────────────────────────────────────────────────────────────
 * Theme wall — light + dark twin sheets, side by side
 * ───────────────────────────────────────────────────────────── */

.theme-wall {
	overflow: clip;
	background: var(--dv-bg-subtle);
	/* Light-sheet signature: coral peach, redder than plain amber. */
	--sheet-light-accent: #eb6b52;
	/* Divider takes the section's own accent. */
	border-top: 2px solid var(--sheet-light-accent);
}

.theme-head {
	text-align: center;
	margin-bottom: clamp(48px, 7vh, 72px);
}

.theme-title {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.8vw, 46px);
	letter-spacing: -0.04em;
	line-height: 1.06;
	color: var(--dv-text-hi);
}

.theme-title-accent {
	color: var(--sheet-light-accent);
}

.theme-lede {
	max-width: 52ch;
	margin: 16px auto 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--dv-text-mid);
}

.theme-lede .theme-line {
	display: block;
	margin-top: 10px;
}
.theme-lede .theme-line:first-child {
	margin-top: 0;
}
.theme-lede .theme-flip {
	margin-top: 16px;
}

/* Inline pill — "Flip the toggle" + working toggle, like the GitHub pill. */
.theme-flip {
	display: inline-block;
}

.theme-pill {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 6px 7px 6px 16px;
	border-radius: 999px;
	background: #171717;
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #fff;
	box-shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.5);
	vertical-align: middle;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	font-weight: 500;
	white-space: nowrap;
}

.theme-pill .theme-toggle {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.08);
	transition:
		transform 110ms var(--ease),
		background 200ms var(--ease),
		border-color 200ms var(--ease);
}
.theme-pill .theme-toggle:hover {
	transform: rotate(-6deg);
	border-color: rgba(255, 255, 255, 0.34);
	background: rgba(255, 255, 255, 0.14);
}
.theme-pill .theme-toggle:active {
	transform: rotate(-14deg) scale(0.92);
}

/* One playful settle when the lede scrolls into view. */
.js-on .theme-lede.is-in .theme-pill .theme-toggle {
	animation: theme-wiggle 720ms var(--ease) 0.3s both;
}
@keyframes theme-wiggle {
	0% {
		transform: rotate(0deg) scale(1);
	}
	25% {
		transform: rotate(-11deg) scale(1.06);
	}
	50% {
		transform: rotate(8deg) scale(1.02);
	}
	75% {
		transform: rotate(-4deg) scale(1);
	}
	100% {
		transform: rotate(0deg) scale(1);
	}
}

.sheet-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

/* Token-grid canvas — faint dotted texture peeking around the sheets. */
.sheet-grid::before {
	content: "";
	position: absolute;
	inset: -46px -20px -20px;
	z-index: -1;
	background-image: radial-gradient(
		circle,
		color-mix(in srgb, var(--dv-border) 70%, transparent) 1px,
		transparent 1.5px
	);
	background-size: 26px 26px;
	pointer-events: none;
}

.sheet-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-2xl);
	border: 1px solid var(--dv-border);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* Accent bar now lives above the code note (see .sheet-note) — the
   card's top edge stays clean. */
.sheet-card[data-theme="light"] {
	background: var(--dv-bg-base);
	color: var(--dv-text-hi);
}
.sheet-card[data-theme="dark"] {
	background: var(--dv-bg-base);
	color: var(--dv-text-hi);
}

/* Grow on hover. The growth rides the standalone `scale` property, not
   `transform`, because the scroll-reveal owns `transform` (translateY)
   on this element — the two compose instead of fighting. The transition
   list restates the reveal's opacity/transform timing so the entrance is
   untouched, then adds scale + edge lift for the hover. */
.sheet-grid .sheet-card {
	transition:
		opacity 0.9s var(--ease),
		transform 0.9s var(--ease),
		scale 340ms var(--ease),
		border-color 340ms var(--ease),
		box-shadow 340ms var(--ease);
}
.sheet-grid .sheet-card:hover,
.js-on .sr-stagger > .sheet-card:hover {
	scale: 1.02;
	/* The reveal's stagger delay (0.06s / 0.16s) also delays the hover
     change; zero it so the card answers the cursor immediately. */
	transition-delay: 0s;
	border-color: color-mix(in srgb, var(--dv-border-hi) 26%, var(--dv-border));
	box-shadow: 0 30px 64px -38px rgba(15, 23, 42, 0.5);
}

.sheet-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dv-text-mid);
}

/* Identity tag — sun on coral peach, moon on indigo. */
.sheet-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 10px;
	letter-spacing: 0.14em;
	font-weight: 600;
	text-transform: uppercase;
	color: #fff;
}
.sheet-tag svg {
	display: block;
	transform-box: fill-box;
	transform-origin: center;
}
.sheet-tag--light {
	background: var(--sheet-light-accent);
}
.sheet-tag--dark {
	background: #6366f1;
}

/* ── sun / moon micro-animations ───────────────────────────── */

/* Entrance: placed before the hover rules and sharing their
   specificity, so a later hover still re-plays its own animation. */
.sheet-card.is-in .sheet-tag--light svg {
	animation: sun-rise 700ms var(--ease) 0.2s both;
}
.sheet-card.is-in .sheet-tag--dark svg {
	animation: moon-rock 700ms var(--ease) 0.32s both;
}
@keyframes sun-rise {
	0% {
		transform: translateY(5px) scale(0.7);
		opacity: 0;
	}
	55% {
		transform: translateY(-2px) scale(1.08);
		opacity: 1;
	}
	100% {
		transform: translateY(0) scale(1);
	}
}
@keyframes moon-rock {
	0% {
		transform: rotate(-16deg);
		opacity: 0;
	}
	45% {
		transform: rotate(9deg);
		opacity: 1;
	}
	70% {
		transform: rotate(-4deg);
	}
	100% {
		transform: rotate(0);
	}
}

/* Hover: sun makes one slow full turn, moon nudges aside. Triggered
   from the whole card (equal specificity to the entrance rules above
   + placed after them, so hover wins once the card is in view).
   Full 360° keeps the handoff back to the resting state seamless. */
.sheet-card:hover .sheet-tag--light svg {
	animation: sun-turn 900ms var(--ease);
}
@keyframes sun-turn {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}
.sheet-card:hover .sheet-tag--dark svg {
	animation: moon-nudge 420ms var(--ease);
}
@keyframes moon-nudge {
	0% {
		transform: rotate(0) translateY(0);
	}
	40% {
		transform: rotate(14deg) translateY(-2px);
	}
	100% {
		transform: rotate(0) translateY(0);
	}
}

/* The flip-the-toggle pill gets the same spin + nudge, fired from
   the whole pill — hover anywhere on the label or the toggle and the
   icon plays. Icons have an SVG centre pivot like the sheet tags, so
   the play stays on the glyph while the button's own crossfade/rotate
   live on their own elements. */
.theme-toggle svg {
	transform-box: fill-box;
	transform-origin: center;
}
.theme-pill:hover .ti-sun svg {
	animation: sun-turn 900ms var(--ease);
}
.theme-pill:hover .ti-moon svg {
	animation: moon-nudge 420ms var(--ease);
}

.sheet-roles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.role-chip {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 12px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--dv-border);
	background: color-mix(in srgb, var(--dv-bg-subtle) 70%, transparent);
	color: var(--dv-text-mid);
	text-align: left;
	cursor: copy;
	transition:
		border-color 200ms var(--ease),
		background 200ms var(--ease),
		transform 200ms var(--ease);
}
.role-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.role-label {
	font-size: 12px;
	line-height: 1.25;
	font-weight: 500;
	color: var(--dv-text-hi);
}
.role-var {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.02em;
	color: var(--dv-text-lo);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.role-chip:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--chip, var(--dv-border)) 45%, var(--dv-border));
	background: color-mix(in srgb, var(--chip, var(--dv-bg-subtle)) 8%, var(--dv-bg-subtle));
}
.role-chip:hover .dot {
	animation: role-dot-pop 320ms var(--ease);
}
@keyframes role-dot-pop {
	0% {
		transform: scale(1);
	}
	45% {
		transform: scale(1.32);
	}
	100% {
		transform: scale(1);
	}
}
.role-chip .dot {
	width: 14px;
	height: 14px;
	border-radius: 999px;
	background: var(--chip);
	border: 1px solid rgba(15, 23, 42, 0.1);
	flex: none;
}
.role-chip.is-copied {
	border-color: var(--dv-border-brand);
}
.role-chip.is-copied .role-label {
	color: var(--dv-brand);
}
.role-chip.is-copied .role-var {
	color: color-mix(in srgb, var(--dv-brand) 72%, var(--dv-text-lo));
}
.role-chip.is-copied .dot {
	background: var(--dv-brand);
	animation: role-dot-kick 420ms var(--ease);
}
@keyframes role-dot-kick {
	0% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.5) rotate(14deg);
	}
	100% {
		transform: scale(1);
	}
}

.sheet-note {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--dv-text-lo);
	border-top: 2px solid #6366f1;
	padding-top: 14px;
}
.sheet-card[data-theme="light"] .sheet-note {
	border-top-color: var(--sheet-light-accent);
}

@media (max-width: 760px) {
	.sheet-grid {
		grid-template-columns: 1fr;
	}
	.sheet-roles {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sheet-grid .sheet-card:hover {
		scale: 1;
	}
}