/**
 * PrettyCool: Static Site Gen integration.
 *
 * The plugin's form.css is deliberately theme-neutral, so this sheet dresses
 * its widget in stickers and pink pills, then builds the waiting room: the
 * builder artwork, the step strip and the rotating phrase rendered through
 * the `ssg_form_progress` action (inc/static-site-gen.php).
 *
 * Loaded after both style.css and form.css, so plain class selectors win.
 */

/* 1. The widget in stickers
 * ------------------------------------------------------------ */

.ssg-widget {
	--ssg-border: var(--pc-ink);
	--ssg-muted: var(--pc-ink-70);
}

/* The widget sits inside the page's own .pc-entry sticker, so its panels
 * stay flat: a second outline here would double the border. Only the
 * pending-claim box, a distinct offer, keeps a thin one. */
.ssg-result,
.ssg-pending-claim {
	border: var(--pc-line-thin);
	border-radius: var(--pc-radius);
}

.ssg-field label,
.ssg-field legend {
	font-family: var(--pc-font-display);
	font-size: var(--pc-step-0);
	font-weight: 600;
}

.ssg-input,
.ssg-textarea,
.ssg-claim-label {
	background: var(--pc-white);
	border: var(--pc-line-thin);
	border-radius: var(--pc-radius-sm);
	padding: 0.7em 0.9em;
	transition: box-shadow 0.15s var(--pc-ease);
}

.ssg-input:focus-visible,
.ssg-textarea:focus-visible,
.ssg-claim-label:focus-visible {
	outline: none;
	box-shadow: var(--pc-shadow-pink);
}

.ssg-radio input[type="radio"] { accent-color: var(--pc-pink); }

/* The pink pill from style.css, restated because form.css outranks the
 * theme's bare `button` selector. */
.ssg-submit,
.ssg-button,
.ssg-claim-button,
.ssg-restart,
.ssg-upsell-cta {
	font-weight: 700;
	color: var(--pc-white);
	background: var(--pc-pink);
	border: var(--pc-line);
	border-radius: var(--pc-radius-pill);
	box-shadow: var(--pc-shadow-sm);
	padding: 0.85em 1.6em;
	transition: transform 0.15s var(--pc-ease-bounce), box-shadow 0.15s var(--pc-ease-bounce), background-color 0.15s var(--pc-ease);
}

.ssg-submit:hover,
.ssg-button:hover,
.ssg-claim-button:hover,
.ssg-restart:hover,
.ssg-upsell-cta:hover {
	color: var(--pc-white);
	background: var(--pc-pink-dark);
	transform: translate(-2px, -2px);
	box-shadow: var(--pc-shadow);
}

.ssg-submit:active,
.ssg-button:active,
.ssg-claim-button:active,
.ssg-restart:active,
.ssg-upsell-cta:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--pc-ink);
}

.ssg-submit:focus-visible,
.ssg-button:focus-visible,
.ssg-claim-button:focus-visible,
.ssg-restart:focus-visible {
	outline: 3px solid var(--pc-pink);
	outline-offset: 3px;
}

.ssg-button-secondary,
.ssg-restart {
	background: var(--pc-white);
	color: var(--pc-ink);
}

.ssg-button-secondary:hover,
.ssg-restart:hover {
	background: var(--pc-pink-100);
	color: var(--pc-ink);
}

.ssg-submit[disabled]:hover {
	transform: none;
	box-shadow: var(--pc-shadow-sm);
}

.ssg-notice {
	background: var(--pc-pink-50);
	border: var(--pc-line-thin);
	border-left-width: 6px;
	border-radius: var(--pc-radius-sm);
}

.ssg-notice-error { border-left-color: #a3231f; }
.ssg-notice-warning { border-left-color: var(--pc-pink); }

.ssg-result-title {
	font-size: var(--pc-step-2);
}

.ssg-upsell-card {
	background: var(--pc-white);
	border: var(--pc-line-thin);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-sm);
}

.ssg-upsell-card-featured { background: var(--pc-pink-50); }

.ssg-upsell-badge {
	background: var(--pc-pink);
	color: var(--pc-white);
	border-color: var(--pc-ink);
}

/* 2. The waiting room
 * ------------------------------------------------------------ */

.ssg-progress {
	position: relative;
	padding: var(--pc-space-sm) 0 var(--pc-space-md);
	gap: 0.75rem;
}

/* The artwork stands in for the plugin's spinner. */
.ssg-progress .ssg-spinner { display: none; }

/* The plugin's live label becomes the small, honest line under the fun one. */
.ssg-progress .ssg-progress-label {
	font-family: var(--pc-font-body);
	font-size: var(--pc-step--1);
	font-weight: 600;
	color: var(--pc-ink-70);
}

.pc-builder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	width: 100%;
}

.pc-builder__art {
	width: min(20rem, 100%);
}

.pc-builder__art .pc-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* The step strip: mini stickers that fill in as the generator moves on. */
.pc-builder__steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-builder__step {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.3em 0.85em;
	font-size: var(--pc-step--1);
	font-weight: 700;
	color: var(--pc-ink-40);
	background: var(--pc-white);
	border: var(--pc-line-thin);
	border-radius: var(--pc-radius-pill);
	transition: color 0.25s var(--pc-ease), background-color 0.25s var(--pc-ease), transform 0.25s var(--pc-ease-bounce);
}

.pc-builder__step.is-done {
	color: var(--pc-ink);
	background: var(--pc-pink-100);
}

.pc-builder__step.is-done::before {
	content: "\2713";
	font-size: 0.9em;
}

.pc-builder__step.is-active {
	color: var(--pc-white);
	background: var(--pc-pink);
	box-shadow: var(--pc-shadow-sm);
	transform: translate(-1px, -1px) rotate(-2deg);
}

/* The rotating line. */
.pc-builder__phrase {
	min-height: 1.4em;
	margin: 0;
	font-family: var(--pc-font-display);
	font-size: var(--pc-step-1);
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
	transition: opacity 0.26s var(--pc-ease), transform 0.26s var(--pc-ease-bounce);
}

.pc-builder__phrase.is-out {
	opacity: 0;
	transform: translateY(-10px);
}

/* Entering: parked below with no transition, then released to rest. */
.pc-builder__phrase.is-in {
	transition: none;
	opacity: 0;
	transform: translateY(12px);
}

/* 3. Animating the artwork
 * ------------------------------------------------------------ */

/* Every animated piece rotates and scales about itself, not the SVG's
 * origin. The static tilts sit on wrapper groups in inc/svg.php, so these
 * transforms compose with them rather than replacing them. */
.pc-builder__card,
.pc-builder__part,
.pc-builder__wand,
.pc-builder__puff,
.pc-builder__glass,
.pc-builder__swatch,
.pc-builder__rocket,
.pc-builder__art .pc-sparkle {
	transform-box: fill-box;
	transform-origin: center;
}

/* The page's pieces pop in one after another, hold, then clear for the
 * next pass. `--i` is set on each part in inc/svg.php. */
.pc-builder__part {
	opacity: 0;
	animation: pc-build 6s var(--pc-ease-bounce) infinite;
	animation-delay: calc(var(--i, 0) * 0.45s);
}

@keyframes pc-build {
	0% { opacity: 0; transform: scale(0.2) rotate(-8deg); }
	9% { opacity: 1; transform: scale(1.14) rotate(3deg); }
	14% { transform: scale(1) rotate(0deg); }
	72% { opacity: 1; transform: scale(1); }
	80% { opacity: 0; transform: scale(0.5) translateY(8px); }
	100% { opacity: 0; transform: scale(0.2); }
}

/* The wand taps in time with the parts. */
.pc-builder__wand {
	transform-origin: 50% 100%;
	animation: pc-wave 0.9s ease-in-out infinite alternate;
}

@keyframes pc-wave {
	from { transform: rotate(-7deg); }
	to { transform: rotate(7deg); }
}

.pc-builder__puff {
	animation: pc-puff 2.4s ease-in-out infinite;
}

@keyframes pc-puff {
	0% { opacity: 0; transform: translate(0, 6px) scale(0.6); }
	30% { opacity: 1; }
	100% { opacity: 0; transform: translate(6px, -22px) scale(1.15); }
}

/* Stage props: each shows only while the generator is in its stage. */
.pc-builder__glass,
.pc-builder__swatches,
.pc-builder__rocket {
	opacity: 0;
	transition: opacity 0.4s var(--pc-ease);
}

.pc-builder[data-stage="scraping"] .pc-builder__glass,
.pc-builder[data-stage="designing"] .pc-builder__swatches,
.pc-builder[data-stage="publishing"] .pc-builder__rocket {
	opacity: 1;
}

.pc-builder__glass {
	animation: pc-scan 3.2s ease-in-out infinite alternate;
}

@keyframes pc-scan {
	0% { transform: translate(-14px, -6px) rotate(-4deg); }
	100% { transform: translate(60px, 22px) rotate(6deg); }
}

.pc-builder__swatch {
	animation: pc-bob 1.2s var(--pc-ease-bounce) infinite alternate;
	animation-delay: calc(var(--i, 0) * 0.2s);
}

@keyframes pc-bob {
	from { transform: translateY(0) scale(1); }
	to { transform: translateY(-9px) scale(1.12); }
}

.pc-builder__rocket {
	animation: pc-liftoff 1.6s ease-in-out infinite alternate;
}

@keyframes pc-liftoff {
	from { transform: translateY(6px) rotate(-3deg); }
	to { transform: translateY(-14px) rotate(3deg); }
}

/* Publishing: the whole page floats, ready to go. */
.pc-builder[data-stage="publishing"] .pc-builder__card {
	animation: pc-float 2.2s ease-in-out infinite;
}

/* 4. Reduced motion
 * ------------------------------------------------------------ */

/* style.css collapses every animation to a single instant frame, which
 * would leave the parts on their final, invisible keyframe. Show the page
 * fully built and still instead; the phrase still changes, it just cuts. */
@media (prefers-reduced-motion: reduce) {
	.pc-builder__part,
	.pc-builder__wand,
	.pc-builder__puff,
	.pc-builder__glass,
	.pc-builder__swatch,
	.pc-builder__rocket,
	.pc-builder[data-stage="publishing"] .pc-builder__card {
		animation: none;
	}

	.pc-builder__part { opacity: 1; }

	.pc-builder__puff { opacity: 0.8; }

	.pc-builder__phrase,
	.pc-builder__phrase.is-in,
	.pc-builder__phrase.is-out {
		opacity: 1;
		transform: none;
	}
}