/* ============================================================
   AvestaTech — service previews
   Each service pane shows a small, honest mock of the actual
   work: a posts list, an editor, a checkout, a design canvas,
   an API log, a performance report. Real labels, real numbers —
   no grey placeholder bars.
   ============================================================ */

/* ---------- The preview surface ----------
   Deliberately plain: the section already sits inside a macOS window, so a
   second set of window chrome here reads as decoration on decoration. */

.avesta-svc-preview {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 0.9rem;
	border: 1px solid var(--avesta-hairline);
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 3.5%, transparent);
}

.avesta-svc-stage {
	flex: 1 1 auto;
	display: grid;
	align-content: center;
	padding: clamp(0.9rem, 1.6vw, 1.35rem);
	min-block-size: clamp(12rem, 15vw, 14.5rem);
}

/* ---------- Shared scene primitives ---------- */

.avesta-sc {
	display: grid;
	gap: 0.5rem;
	align-content: start;
	font-size: 0.78rem;
}

.avesta-sc-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding-block-end: 0.5rem;
	border-block-end: 1px solid var(--avesta-hairline);
}

.avesta-sc-bar-title {
	font-size: 0.8rem;
	font-weight: 800;
}

.avesta-sc-row {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.42rem 0.5rem;
	border-radius: 0.6rem;
	border: 1px solid var(--avesta-hairline);
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 3%, transparent);
}

.avesta-sc-thumb {
	flex: 0 0 auto;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-radius: 0.45rem;
	background: linear-gradient(140deg,
		color-mix(in srgb, var(--wp--preset--color--primary) 80%, #FFFFFF),
		var(--wp--preset--color--primary));
}

.avesta-sc-thumb.t2 {
	background: linear-gradient(140deg, #7DD3FC, #2563EB);
}

.avesta-sc-thumb.t3 {
	background: linear-gradient(140deg, #FDBA74, #EA580C);
}

.avesta-sc-txt {
	flex: 1 1 auto;
	font-size: 0.76rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.avesta-sc-pill {
	flex: 0 0 auto;
	padding: 0.14rem 0.5rem;
	border-radius: 999px;
	font-size: 0.64rem;
	font-weight: 800;
	white-space: nowrap;
}

.avesta-sc-pill.is-live {
	color: #1E8E3E;
	background: color-mix(in srgb, #28C840 18%, transparent);
}

.avesta-sc-pill.is-draft {
	color: var(--wp--preset--color--muted);
	background: color-mix(in srgb, var(--wp--preset--color--muted) 16%, transparent);
}

html[data-theme="dark"] .avesta-sc-pill.is-live {
	color: #4ADE80;
}

/* Scenes play once, on open. Panes are display:none until their radio is
   checked, so switching services replays the whole sequence — no endless
   looping in the corner of the eye while somebody is reading. */
@keyframes avesta-sc-in {
	from {
		opacity: 0;
		translate: 0 8px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

/* One label replaces another once the rows have landed
   (draft -> published, pending -> 200 OK) */
.avesta-sc-swap {
	display: inline-grid;
}

.avesta-sc-swap > * {
	grid-area: 1 / 1;
}

@keyframes avesta-sc-swap-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes avesta-sc-swap-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.avesta-sc-swap > .is-before {
	animation: avesta-sc-swap-out 260ms var(--avesta-ease) 1.9s both;
}

.avesta-sc-swap > .is-after {
	animation: avesta-sc-swap-in 260ms var(--avesta-ease) 1.9s both;
}

/* ---------- Scene: WordPress posts list ---------- */

.avesta-sc-cms .avesta-sc-row {
	animation: avesta-sc-in 420ms var(--avesta-ease) both;
}

.avesta-sc-cms .avesta-sc-row:nth-of-type(1) { animation-delay: 0.15s; }
.avesta-sc-cms .avesta-sc-row:nth-of-type(2) { animation-delay: 0.45s; }
.avesta-sc-cms .avesta-sc-row:nth-of-type(3) { animation-delay: 0.75s; }

/* ---------- Scene: the editor ---------- */

.avesta-sc-code {
	direction: ltr;
	text-align: left;
	gap: 0.6rem;

	--c-key: #7C3AED;
	--c-type: #0E7490;
	--c-fn: #B45309;
	--c-var: #BE185D;
	--c-punc: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
}

html[data-theme="dark"] .avesta-sc-code {
	--c-key: #A78BFA;
	--c-type: #67E8F9;
	--c-fn: #FBBF24;
	--c-var: #F472B6;
}

.avesta-sc-tabs {
	display: flex;
	gap: 0.3rem;
	font-size: 0.68rem;
	font-weight: 700;
}

.avesta-sc-tabs span {
	padding: 0.22rem 0.6rem;
	border-radius: 0.45rem 0.45rem 0 0;
	color: var(--wp--preset--color--muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.avesta-sc-tabs .is-active {
	color: var(--wp--preset--color--contrast);
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent);
}

.avesta-sc-code-body {
	display: grid;
	gap: 0.05rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.71rem;
	line-height: 1.95;
	color: var(--c-punc);
}

.avesta-sc-code-body .ln {
	white-space: nowrap;
	animation: avesta-sc-type 520ms steps(26, end) both;
}

.avesta-sc-code-body .ln:nth-child(1) { animation-delay: 0.1s; }
.avesta-sc-code-body .ln:nth-child(2) { animation-delay: 0.6s; }
.avesta-sc-code-body .ln:nth-child(3) { animation-delay: 1s; }
.avesta-sc-code-body .ln:nth-child(4) { animation-delay: 1.25s; }
.avesta-sc-code-body .ln:nth-child(5) { animation-delay: 1.75s; }

/* <em> is the semantic fit for a highlighted token, but code is not italic */
.avesta-sc-code-body em {
	font-style: normal;
}

.avesta-sc-code-body .i1 { padding-inline-start: 1.1rem; }
.avesta-sc-code-body .i2 { padding-inline-start: 2.2rem; }

.avesta-sc-code-body .k { color: var(--c-key); font-weight: 700; }
.avesta-sc-code-body .t { color: var(--c-type); }
.avesta-sc-code-body .f { color: var(--c-fn); }
.avesta-sc-code-body .v { color: var(--c-var); }

@keyframes avesta-sc-type {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

.avesta-sc-caret {
	display: inline-block;
	inline-size: 6px;
	block-size: 0.8rem;
	vertical-align: -2px;
	background: var(--wp--preset--color--primary);
	animation: avesta-sc-blink 1s steps(1) infinite;
}

@keyframes avesta-sc-blink {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* ---------- Scene: checkout ---------- */

.avesta-sc-cart .avesta-sc-row {
	animation: avesta-sc-in 420ms var(--avesta-ease) both;
}

.avesta-sc-cart .avesta-sc-row:nth-of-type(1) { animation-delay: 0.2s; }
.avesta-sc-cart .avesta-sc-row:nth-of-type(2) { animation-delay: 0.5s; }

.avesta-sc-price {
	flex: 0 0 auto;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

.avesta-sc-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 1.15rem;
	block-size: 1.15rem;
	padding-inline: 0.3rem;
	border-radius: 999px;
	font-size: 0.65rem;
	font-weight: 800;
	color: var(--wp--preset--color--on-primary);
	background: var(--wp--preset--color--primary);
	animation: avesta-sc-pop 520ms var(--avesta-ease) 0.75s both;
}

@keyframes avesta-sc-pop {
	0% { scale: 0.4; opacity: 0; }
	55% { scale: 1.25; opacity: 1; }
	100% { scale: 1; opacity: 1; }
}

.avesta-sc-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block-start: 0.5rem;
	border-block-start: 1px dashed var(--avesta-hairline);
	font-size: 0.74rem;
	color: var(--wp--preset--color--muted);
	animation: avesta-sc-in 420ms var(--avesta-ease) 0.85s both;
}

.avesta-sc-total b {
	font-size: 0.82rem;
	font-weight: 800;
	color: var(--wp--preset--color--contrast);
}

.avesta-sc-pay {
	position: relative;
	display: block;
	padding: 0.5rem;
	border-radius: 0.6rem;
	text-align: center;
	font-size: 0.76rem;
	font-weight: 800;
	color: var(--wp--preset--color--on-primary);
	background: var(--wp--preset--color--primary);
	animation:
		avesta-sc-in 420ms var(--avesta-ease) 1.1s both,
		avesta-sc-press 900ms var(--avesta-ease) 1.8s both;
}

/* The checkout button gets "clicked" once the cart has filled in */
@keyframes avesta-sc-press {
	0% { scale: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent); }
	18% { scale: 0.965; box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent); }
	100% { scale: 1; box-shadow: 0 0 0 14px color-mix(in srgb, var(--wp--preset--color--primary) 0%, transparent); }
}

/* ---------- Scene: design canvas ---------- */

.avesta-sc-uiux {
	grid-template-columns: 6.2rem minmax(0, 1fr);
	gap: 0.6rem;
	align-content: stretch;
}

.avesta-sc-layers {
	display: grid;
	align-content: start;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

.avesta-sc-layers li {
	padding: 0.28rem 0.45rem;
	border-radius: 0.4rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.avesta-sc-layers .is-active {
	color: var(--wp--preset--color--primary);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
}

.avesta-sc-canvas {
	position: relative;
	min-block-size: 8.5rem;
	border-radius: 0.6rem;
	border: 1px solid var(--avesta-hairline);
	background:
		radial-gradient(circle at 1px 1px,
			color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent) 1px,
			transparent 1px) 0 0 / 12px 12px;
}

.avesta-sc-frame {
	position: absolute;
	inset-block-start: 22%;
	inset-inline-start: 16%;
	inline-size: 62%;
	block-size: 52%;
	border-radius: 0.5rem;
	border: 1.5px solid var(--wp--preset--color--primary);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	animation: avesta-sc-resize 6s var(--avesta-ease) infinite;
}

@keyframes avesta-sc-resize {
	0%, 20% { inline-size: 62%; block-size: 52%; }
	48%, 78% { inline-size: 74%; block-size: 62%; }
	96%, 100% { inline-size: 62%; block-size: 52%; }
}

.avesta-sc-frame i {
	position: absolute;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 1px;
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--primary);
}

.avesta-sc-frame .h1 { inset-block-start: -4px; inset-inline-start: -4px; }
.avesta-sc-frame .h2 { inset-block-start: -4px; inset-inline-end: -4px; }
.avesta-sc-frame .h3 { inset-block-end: -4px; inset-inline-start: -4px; }
.avesta-sc-frame .h4 { inset-block-end: -4px; inset-inline-end: -4px; }

/* Dimensions are a measurement, not prose — they must not be bidi-flipped */
.avesta-sc-size {
	position: absolute;
	direction: ltr;
	inset-block-end: -1.45rem;
	inset-inline-start: 50%;
	translate: 50% 0;
	padding: 0.1rem 0.4rem;
	border-radius: 0.3rem;
	font-size: 0.6rem;
	font-weight: 800;
	white-space: nowrap;
	color: var(--wp--preset--color--on-primary);
	background: var(--wp--preset--color--primary);
}

/* A pointer arrow, drawn rather than imported */
.avesta-sc-cursor {
	position: absolute;
	inline-size: 13px;
	block-size: 17px;
	inset-block-start: 72%;
	inset-inline-start: 76%;
	background: var(--wp--preset--color--contrast);
	clip-path: polygon(0 0, 0 78%, 27% 60%, 46% 100%, 66% 90%, 47% 52%, 100% 46%);
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
	animation: avesta-sc-drag 6s var(--avesta-ease) infinite;
}

@keyframes avesta-sc-drag {
	0%, 20% { translate: 0 0; }
	48%, 78% { translate: -14px -12px; }
	96%, 100% { translate: 0 0; }
}

/* ---------- Scene: API log ---------- */

.avesta-sc-api {
	direction: ltr;
	text-align: left;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.avesta-sc-api .avesta-sc-bar,
.avesta-sc-api .avesta-sc-bar-title {
	font-family: inherit;
}

.avesta-sc-api .avesta-sc-row {
	gap: 0.45rem;
	font-size: 0.7rem;
	animation: avesta-sc-in 420ms var(--avesta-ease) both;
}

.avesta-sc-api .avesta-sc-row:nth-of-type(1) { animation-delay: 0.15s; }
.avesta-sc-api .avesta-sc-row:nth-of-type(2) { animation-delay: 0.5s; }
.avesta-sc-api .avesta-sc-row:nth-of-type(3) { animation-delay: 0.85s; }

/* Each request resolves a beat after the one above it */
.avesta-sc-api .avesta-sc-row:nth-of-type(1) .avesta-sc-swap > * { animation-delay: 1.15s; }
.avesta-sc-api .avesta-sc-row:nth-of-type(2) .avesta-sc-swap > * { animation-delay: 1.5s; }
.avesta-sc-api .avesta-sc-row:nth-of-type(3) .avesta-sc-swap > * { animation-delay: 1.9s; }

.avesta-sc-method {
	flex: 0 0 auto;
	padding: 0.1rem 0.35rem;
	border-radius: 0.3rem;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.avesta-sc-method.post {
	color: var(--wp--preset--color--on-primary);
	background: var(--wp--preset--color--primary);
}

.avesta-sc-method.get {
	color: #0E7490;
	background: color-mix(in srgb, #22D3EE 22%, transparent);
}

html[data-theme="dark"] .avesta-sc-method.get {
	color: #67E8F9;
}

.avesta-sc-path {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 75%, transparent);
}

.avesta-sc-status {
	flex: 0 0 auto;
	font-size: 0.64rem;
	font-weight: 800;
}

.avesta-sc-status .is-before {
	color: var(--wp--preset--color--muted);
}

.avesta-sc-status .is-after {
	color: #1E8E3E;
}

html[data-theme="dark"] .avesta-sc-status .is-after {
	color: #4ADE80;
}

.avesta-sc-live {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

.avesta-sc-live::before {
	content: "";
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: #28C840;
	animation: avesta-sc-blip 1.8s ease-in-out infinite;
}

@keyframes avesta-sc-blip {
	0%, 100% { opacity: 0.35; scale: 0.8; }
	50% { opacity: 1; scale: 1; }
}

/* ---------- Scene: performance report ---------- */

@property --avesta-arc {
	syntax: "<percentage>";
	initial-value: 0%;
	inherits: false;
}

.avesta-sc-seo {
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.9rem;
	align-items: center;
	align-content: center;
}

.avesta-sc-ring {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 5.2rem;
	block-size: 5.2rem;
	border-radius: 50%;
	background: conic-gradient(from -90deg,
		#28C840 var(--avesta-arc),
		color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent) 0);
	animation: avesta-sc-arc 1.5s var(--avesta-ease) 0.2s both;
}

@keyframes avesta-sc-arc {
	from { --avesta-arc: 0%; }
	to { --avesta-arc: 98%; }
}

.avesta-sc-ring::before {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface, #FFFFFF);
}

.avesta-sc-ring b {
	position: relative;
	margin-block-end: -0.15rem;
	font-size: 1.5rem;
	line-height: 1.1;
	font-weight: 800;
	color: #1E8E3E;
}

html[data-theme="dark"] .avesta-sc-ring b {
	color: #4ADE80;
}

.avesta-sc-ring small {
	position: relative;
	font-size: 0.56rem;
	line-height: 1.2;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

.avesta-sc-metrics {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.avesta-sc-metrics li {
	display: grid;
	grid-template-columns: 2.2rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

.avesta-sc-metrics i {
	block-size: 5px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	overflow: hidden;
}

.avesta-sc-metrics i::after {
	content: "";
	display: block;
	block-size: 100%;
	inline-size: var(--w, 70%);
	border-radius: inherit;
	background: linear-gradient(90deg, #28C840, #7DD3FC);
	animation: avesta-sc-fill 900ms var(--avesta-ease) both;
}

.avesta-sc-metrics .m1::after { --w: 84%; animation-delay: 0.35s; }
.avesta-sc-metrics .m2::after { --w: 92%; animation-delay: 0.55s; }
.avesta-sc-metrics .m3::after { --w: 96%; animation-delay: 0.75s; }

@keyframes avesta-sc-fill {
	from { inline-size: 0; }
	to { inline-size: var(--w); }
}

.avesta-sc-metrics b {
	font-size: 0.68rem;
	font-weight: 800;
	color: var(--wp--preset--color--contrast);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

@media (prefers-reduced-motion: reduce) {
	.avesta-sc-row,
	.avesta-sc-total,
	.avesta-sc-badge,
	.avesta-sc-pay,
	.avesta-sc-frame,
	.avesta-sc-cursor,
	.avesta-sc-ring,
	.avesta-sc-caret,
	.avesta-sc-live::before,
	.avesta-sc-metrics i::after,
	.avesta-sc-code-body .ln,
	.avesta-sc-swap > * {
		animation: none;
	}

	.avesta-sc-ring {
		--avesta-arc: 98%;
	}

	.avesta-sc-metrics i::after {
		inline-size: var(--w);
	}

	.avesta-sc-swap > .is-before {
		opacity: 0;
	}
}