/* The home page's prompt-to-site demo: the prompt card, the browser frame and its width
   switch, the phone frame, and the animation that assembles the preview. Every colour, size
   and radius comes from the tokens in tokens.css / theme.css. */

.demo {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.demo-panel {
	padding: var(--space-3);
}

.demo-prompt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2);
	border: 1px solid var(--control-border);
	border-radius: var(--radius-card);
	background: var(--surface);
}

.demo-prompt__input {
	flex: 1;
	min-inline-size: 0;
	min-block-size: var(--control);
	border: 0;
	background: transparent;
	color: var(--text);
	font: inherit;
}

.demo-prompt__input::placeholder {
	color: var(--text-secondary);
}

.browser {
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	background: var(--surface);
}

.browser__bar {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-block-end: 1px solid var(--border);
	background: var(--bg-subtle);
}

.browser__dots {
	display: flex;
	gap: 6px;
}

.browser__dot {
	inline-size: 8px;
	block-size: 8px;
	border-radius: var(--radius-full);
	background: var(--control-border);
}

.browser__address {
	flex: 1;
	min-inline-size: 0;
	color: var(--text-secondary);
	font-size: var(--text-xs);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* A narrow phone drops the decorative window dots, so the preview address is not cut. */
@media (max-width: 520px) {
	.browser__dots {
		display: none;
	}
}

.browser__page {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
}

/* The width switch. It stays hidden until the script can honour it (html.js), so a
   browser without script never shows a control that does nothing. */
.browser__sizes {
	display: none;
}

html.js .browser__sizes {
	display: inline-flex;
	gap: 2px;
	flex: 0 0 auto;
}

.browser__size {
	padding: 2px var(--space-2);
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--text-secondary);
	font: inherit;
	font-size: var(--text-xs);
	line-height: 1.5;
	cursor: pointer;
}

.browser__size[aria-pressed="true"] {
	border-color: var(--border);
	background: var(--surface);
	color: var(--text);
}

.preview__nav {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.preview__logo {
	inline-size: 18px;
	block-size: 18px;
	border-radius: var(--radius-xs);
	background: var(--ink);
}

.preview__line {
	block-size: 6px;
	border-radius: var(--radius-full);
	background: var(--border);
}

.preview__line--strong {
	background: var(--control-border);
}

.preview__line--short {
	inline-size: 40%;
}

.preview__line--mid {
	inline-size: 70%;
}

.preview__hero {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-block: var(--space-4);
}

.preview__headline {
	color: var(--text);
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}

.preview__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-2);
}

.preview__card {
	block-size: 48px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-subtle);
}

/* Phone frame: the same preview at 390×844, drawn 258×558 so the whole screen fits the card. */
.demo-panel[data-demo-viewport="phone"] .browser {
	display: flex;
	flex-direction: column;
	inline-size: 258px;
	block-size: 558px;
	margin-inline: auto;
	border-radius: 34px;
}

.demo-panel[data-demo-viewport="phone"] .browser__bar {
	gap: var(--space-1);
	padding-inline: var(--space-2);
}

.demo-panel[data-demo-viewport="phone"] .browser__dots {
	display: none;
}

.demo-panel[data-demo-viewport="phone"] .browser__address {
	font-size: 10px;
}

.demo-panel[data-demo-viewport="phone"] .browser__page {
	flex: 1;
	min-block-size: 0;
	padding: var(--space-4);
	overflow: hidden;
}

.demo-panel[data-demo-viewport="phone"] .preview__headline {
	font-size: var(--text-lg);
}

.demo-panel[data-demo-viewport="phone"] .preview__cards {
	grid-template-columns: 1fr;
}

.demo-panel[data-demo-viewport="phone"] .preview__card {
	block-size: 34px;
}

/* The phone frame's tab bar: part of the mock screen, so it is drawn, never a live control. */
.preview__tabs {
	display: none;
}

.demo-panel[data-demo-viewport="phone"] .preview__tabs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: end;
	gap: var(--space-1);
	margin-block-start: auto;
	padding-block-start: var(--space-3);
	border-block-start: 1px solid var(--border);
}

.preview__tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: var(--text-secondary);
	font-size: 10px;
	line-height: 1.2;
}

.preview__tab--on {
	color: var(--text);
}

.preview__tab-label {
	overflow: hidden;
	max-inline-size: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Live demo. The same parts stand in for the skeleton while the prompt types and the build runs,
   then rise in order as the page assembles. The server renders the settled page, so a visitor
   without script sees no skeleton at all. */
.demo[data-demo-step="typing"] .preview__headline,
.demo[data-demo-step="building"] .preview__headline {
	inline-size: 72%;
}

.demo[data-demo-step="typing"] [data-demo-part],
.demo[data-demo-step="building"] [data-demo-part] {
	border-color: transparent;
	color: transparent;
	background-color: var(--border);
	animation: demo-pulse 1.4s ease-in-out infinite;
}

.demo[data-demo-step="done"] [data-demo-part] {
	animation: demo-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-demo-order="2"] {
	animation-delay: 70ms;
}

[data-demo-order="3"] {
	animation-delay: 140ms;
}

[data-demo-order="4"] {
	animation-delay: 190ms;
}

[data-demo-order="5"] {
	animation-delay: 240ms;
}

@keyframes demo-pulse {
	50% {
		opacity: 0.45;
	}
}

@keyframes demo-rise {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.demo [data-demo-part] {
		animation: none !important;
	}
}