/*
Theme Name: Plains & Petal
Theme URI: https://plainsandpetal.com
Author: Metzae
Description: Coming-soon landing page for Plains & Petal, Holly Womack's bath and body line. A West Texas dusk over the plains, with wildflowers on the horizon.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: plainsandpetal
*/

/* Palette is the High Plains draft sunset palette (brand/BRAND-COVENANT.md §3).
   Warm colors are accents, never text on light grounds; here every ground is dark. */
:root {
	--navy: #062f46;
	--sky: #2a879e;
	--sun: #fdb62f;
	--clay: #fa8233;
	--coral: #f35526;
	--cream: #f4ede1;
	--display: "Playfair Display", Georgia, serif;
	--text: "Montserrat", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
	min-height: 100svh;
	background: var(--navy);
	color: var(--cream);
	font-family: var(--text);
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* The sky: deep navy overhead, West Texas blue, then the last of the sun at the horizon. */
.pp-sky {
	position: relative;
	min-height: 100svh;
	display: grid;
	grid-template-rows: 1fr auto auto;
	background:
		radial-gradient(120% 55% at 50% 100%, rgba(253, 182, 47, .55) 0%, rgba(250, 130, 51, .35) 28%, rgba(243, 85, 38, 0) 60%),
		linear-gradient(180deg, #041f30 0%, var(--navy) 30%, #145a73 62%, var(--sky) 80%, #6e8f86 100%);
	isolation: isolate;
}

/* A few early stars, upper sky only. */
.pp-sky::before {
	content: "";
	position: absolute;
	inset: 0 0 55% 0;
	background-image:
		radial-gradient(1.5px 1.5px at 12% 18%, rgba(244, 237, 225, .9), transparent),
		radial-gradient(1px 1px at 27% 8%, rgba(244, 237, 225, .7), transparent),
		radial-gradient(1.5px 1.5px at 44% 26%, rgba(244, 237, 225, .6), transparent),
		radial-gradient(1px 1px at 63% 12%, rgba(244, 237, 225, .8), transparent),
		radial-gradient(1.5px 1.5px at 81% 22%, rgba(244, 237, 225, .7), transparent),
		radial-gradient(1px 1px at 92% 6%, rgba(244, 237, 225, .6), transparent);
	z-index: -1;
}

.pp-main {
	align-self: center;
	justify-self: center;
	width: min(100% - 32px, 760px);
	padding: 32px 0 24px;
	text-align: center;
}

.pp-title {
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(3rem, 12vw, 6.5rem);
	line-height: 1;
	letter-spacing: -.01em;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(4, 31, 48, .45);
}

.pp-title .amp {
	font-style: italic;
	font-weight: 700;
	padding: 0 .04em;
}

.pp-rule {
	width: 64px;
	height: 2px;
	margin: 20px auto 16px;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--clay), transparent);
}

.pp-line {
	margin: 0;
	font-size: clamp(1rem, 3.6vw, 1.25rem);
	letter-spacing: .02em;
	text-wrap: balance;
}

.pp-soon {
	display: inline-block;
	margin-top: 16px;
	padding: 8px 18px;
	border: 1px solid rgba(253, 182, 47, .7);
	border-radius: 999px;
	color: var(--sun);
	font-weight: 600;
	font-size: .875rem;
	letter-spacing: .08em;
	white-space: nowrap;
}

/* The horizon: flat plains and a row of wildflowers in silhouette. */
.pp-horizon {
	display: block;
	width: 100%;
	/* A floor so a phone crops the sides instead of shrinking the flowers away. */
	height: clamp(150px, 21vw, 300px);
}

.pp-foot {
	margin: 0;
	padding: 4px 16px 14px;
	background: var(--navy);
	text-align: center;
	font-size: .75rem;
	letter-spacing: .04em;
	color: rgba(244, 237, 225, .72);
}

/* Petals carried on the evening wind. Decorative only. */
.pp-petals {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: -1;
}

.pp-petals span {
	position: absolute;
	top: -24px;
	width: 12px;
	height: 18px;
	border-radius: 80% 0 80% 0;
	background: var(--coral);
	opacity: .9;
	animation: pp-drift linear infinite;
}

.pp-petals span:nth-child(1) { left: 8%;  animation-duration: 19s; animation-delay: -2s; }
.pp-petals span:nth-child(2) { left: 22%; animation-duration: 23s; animation-delay: -11s; background: var(--sun); width: 9px; height: 14px; }
.pp-petals span:nth-child(3) { left: 37%; animation-duration: 17s; animation-delay: -6s; background: var(--clay); }
.pp-petals span:nth-child(4) { left: 55%; animation-duration: 25s; animation-delay: -15s; width: 10px; height: 15px; }
.pp-petals span:nth-child(5) { left: 71%; animation-duration: 21s; animation-delay: -4s; background: var(--sun); }
.pp-petals span:nth-child(6) { left: 86%; animation-duration: 18s; animation-delay: -9s; background: var(--clay); width: 9px; height: 14px; }
.pp-petals span:nth-child(7) { left: 95%; animation-duration: 27s; animation-delay: -19s; }

@keyframes pp-drift {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%  { transform: translate3d(-40px, 55vh, 0) rotate(200deg); }
	100% { transform: translate3d(30px, 110vh, 0) rotate(400deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pp-petals { display: none; }
}