/**
 * Kids Capsule — Launch Mode Teaser Styles
 *
 * KC-specific design tokens and teaser layout.
 * Loaded only when KC is in launch mode (slug: kc-launch).
 *
 * @package SkyyRose
 * @since   6.5.0
 */

/* ---------------------------------------------------------------
 * 1. KC Design Tokens
 * --------------------------------------------------------------- */

:root {
	--kc-sunrise: #F4A261;
	--kc-sky:     #A8D8EA;
	--kc-bloom:   #E8A0BF;
	--kc-mint:    #B8F0C8;
	--kc-cloud:   #F8F4EE;
	--kc-night:   #1A1A2E;
	--kc-dawn:    linear-gradient(135deg, #A8D8EA 0%, #E8A0BF 40%, #F4A261 80%, #B76E79 100%);
}

/* ---------------------------------------------------------------
 * 2. Teaser Container
 * --------------------------------------------------------------- */

.kc-teaser {
	background-color: var(--kc-night);
	color: var(--kc-cloud);
	font-family: var(--font-body, 'Cormorant Garamond', serif);
	overflow-x: hidden;
}

/* ---------------------------------------------------------------
 * 3. Hero Section
 * --------------------------------------------------------------- */

.kc-teaser__hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}

.kc-teaser__hero-bg {
	position: absolute;
	inset: 0;
	background: var(--kc-dawn);
	opacity: 0.15;
	pointer-events: none;
}

.kc-teaser__hero-content {
	position: relative;
	z-index: 1;
	padding: var(--space-lg, 3rem) var(--space-md, 1.5rem);
}

.kc-teaser__badge {
	display: inline-block;
	padding: 0.4em 1.2em;
	border: 1px solid var(--kc-bloom);
	border-radius: 2em;
	font-family: var(--font-ui, 'Bebas Neue', sans-serif);
	font-size: var(--text-xs, 0.75rem);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--kc-bloom);
	margin-bottom: var(--space-md, 1.5rem);
}

.kc-teaser__wordmark {
	font-family: var(--font-display, 'Playfair Display', serif);
	font-size: clamp(2.5rem, 8vw, 6rem);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 var(--space-sm, 1rem);
	background: var(--kc-dawn);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.kc-teaser__tagline {
	font-size: var(--text-lg, 1.25rem);
	color: var(--kc-sky);
	margin: 0;
	letter-spacing: 0.05em;
}

.kc-teaser__scroll {
	position: absolute;
	bottom: var(--space-lg, 3rem);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--text-xs, 0.75rem);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--kc-bloom);
	opacity: 0.6;
	animation: kc-scroll-hint 2s ease-in-out infinite;
}

.kc-teaser__scroll svg {
	width: 20px;
	height: 20px;
}

@keyframes kc-scroll-hint {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%      { transform: translateX(-50%) translateY(8px); }
}

/* ---------------------------------------------------------------
 * 4. Reveal Statement
 * --------------------------------------------------------------- */

.kc-teaser__reveal {
	padding: var(--space-3xl, 8rem) var(--space-md, 1.5rem);
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

.kc-teaser__quote {
	margin: 0;
	padding: 0;
}

.kc-teaser__quote-text {
	font-family: var(--font-display, 'Playfair Display', serif);
	font-size: clamp(1.5rem, 4vw, 3rem);
	font-weight: 600;
	font-style: italic;
	line-height: 1.3;
	color: var(--kc-sunrise);
	margin: 0 0 var(--space-md, 1.5rem);
}

.kc-teaser__reveal-sub {
	font-size: var(--text-base, 1rem);
	line-height: 1.7;
	color: rgba(248, 244, 238, 0.7);
	margin: 0;
}

/* ---------------------------------------------------------------
 * 5. Countdown Timer
 * --------------------------------------------------------------- */

.kc-teaser__countdown {
	padding: var(--space-2xl, 5rem) var(--space-md, 1.5rem);
	text-align: center;
}

.kc-teaser__section-title {
	font-family: var(--font-ui, 'Bebas Neue', sans-serif);
	font-size: var(--text-sm, 0.875rem);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--kc-bloom);
	margin: 0 0 var(--space-lg, 3rem);
}

.kc-countdown {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm, 1rem);
}

.kc-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}

.kc-countdown__num {
	font-family: var(--font-display, 'Playfair Display', serif);
	font-size: clamp(2rem, 6vw, 4.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--kc-cloud);
}

.kc-countdown__label {
	font-family: var(--font-ui, 'Bebas Neue', sans-serif);
	font-size: var(--text-xs, 0.75rem);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba(248, 244, 238, 0.5);
}

.kc-countdown__sep {
	font-size: clamp(1.5rem, 4vw, 3rem);
	color: var(--kc-bloom);
	opacity: 0.5;
	align-self: flex-start;
	margin-top: 0.2em;
}

/* ---------------------------------------------------------------
 * 6. Parent-Child Preview
 * --------------------------------------------------------------- */

.kc-teaser__preview {
	padding: var(--space-3xl, 8rem) var(--space-md, 1.5rem);
	text-align: center;
}

.kc-teaser__preview-inner {
	max-width: 900px;
	margin: 0 auto;
}

.kc-teaser__preview-text {
	font-size: var(--text-base, 1rem);
	line-height: 1.7;
	color: rgba(248, 244, 238, 0.7);
	max-width: 600px;
	margin: 0 auto var(--space-xl, 4rem);
}

.kc-teaser__silhouettes {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: var(--space-xl, 4rem);
}

.kc-teaser__silhouette {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm, 1rem);
}

.kc-teaser__silhouette-placeholder {
	border-radius: 8px;
	background: linear-gradient(180deg, rgba(232, 160, 191, 0.15) 0%, rgba(168, 216, 234, 0.1) 100%);
	border: 1px solid rgba(232, 160, 191, 0.2);
}

.kc-teaser__silhouette--adult .kc-teaser__silhouette-placeholder {
	width: 180px;
	height: 320px;
}

.kc-teaser__silhouette--child .kc-teaser__silhouette-placeholder {
	width: 140px;
	height: 240px;
}

.kc-teaser__silhouette-label {
	font-family: var(--font-ui, 'Bebas Neue', sans-serif);
	font-size: var(--text-xs, 0.75rem);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--kc-bloom);
}

/* ---------------------------------------------------------------
 * 7. Waitlist Form
 * --------------------------------------------------------------- */

.kc-teaser__waitlist {
	padding: var(--space-3xl, 8rem) var(--space-md, 1.5rem);
	text-align: center;
	background: rgba(26, 26, 46, 0.6);
}

.kc-teaser__waitlist-inner {
	max-width: 560px;
	margin: 0 auto;
}

.kc-teaser__waitlist-text {
	font-size: var(--text-base, 1rem);
	line-height: 1.7;
	color: rgba(248, 244, 238, 0.7);
	margin: 0 0 var(--space-lg, 3rem);
}

.kc-waitlist-form__row {
	display: flex;
	gap: 0;
	border-radius: 4px;
	overflow: hidden;
}

.kc-waitlist-form__input {
	flex: 1;
	padding: 0.9em 1.2em;
	border: 1px solid rgba(232, 160, 191, 0.3);
	border-right: none;
	border-radius: 4px 0 0 4px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--kc-cloud);
	font-family: inherit;
	font-size: var(--text-base, 1rem);
	outline: none;
	transition: border-color 0.2s ease;
}

.kc-waitlist-form__input:focus {
	border-color: var(--kc-bloom);
}

.kc-waitlist-form__input::placeholder {
	color: rgba(248, 244, 238, 0.4);
}

.kc-waitlist-form__btn {
	padding: 0.9em 1.8em;
	border: none;
	border-radius: 0 4px 4px 0;
	background: var(--kc-bloom);
	color: var(--kc-night);
	font-family: var(--font-ui, 'Bebas Neue', sans-serif);
	font-size: var(--text-sm, 0.875rem);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: background-color 0.2s ease;
	white-space: nowrap;
}

.kc-waitlist-form__btn:hover {
	background: var(--kc-sunrise);
}

.kc-waitlist-form__btn:focus-visible {
	outline: 2px solid var(--kc-sky);
	outline-offset: 2px;
}

.kc-waitlist-form__status {
	margin-top: var(--space-sm, 1rem);
	font-size: var(--text-sm, 0.875rem);
	min-height: 1.5em;
}

/* ---------------------------------------------------------------
 * 8. Brand Anchor
 * --------------------------------------------------------------- */

.kc-teaser__anchor {
	padding: var(--space-3xl, 8rem) var(--space-md, 1.5rem);
	text-align: center;
}

.kc-teaser__anchor-inner {
	max-width: 700px;
	margin: 0 auto;
}

.kc-teaser__anchor-text {
	font-family: var(--font-display, 'Playfair Display', serif);
	font-size: clamp(1.25rem, 3vw, 2.25rem);
	font-weight: 600;
	font-style: italic;
	line-height: 1.4;
	color: var(--kc-cloud);
	margin: 0 0 var(--space-md, 1.5rem);
}

.kc-teaser__anchor-tagline {
	font-family: var(--font-ui, 'Bebas Neue', sans-serif);
	font-size: var(--text-sm, 0.875rem);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--kc-bloom);
	margin: 0;
}

/* ---------------------------------------------------------------
 * 9. Responsive
 * --------------------------------------------------------------- */

@media (max-width: 640px) {
	.kc-teaser__silhouettes {
		gap: var(--space-md, 1.5rem);
	}

	.kc-teaser__silhouette--adult .kc-teaser__silhouette-placeholder {
		width: 120px;
		height: 220px;
	}

	.kc-teaser__silhouette--child .kc-teaser__silhouette-placeholder {
		width: 100px;
		height: 170px;
	}

	.kc-waitlist-form__row {
		flex-direction: column;
	}

	.kc-waitlist-form__input {
		border-right: 1px solid rgba(232, 160, 191, 0.3);
		border-radius: 4px 4px 0 0;
		border-bottom: none;
	}

	.kc-waitlist-form__btn {
		border-radius: 0 0 4px 4px;
	}

	.kc-countdown {
		gap: 0.5rem;
	}
}

/* ---------------------------------------------------------------
 * 10. Reduced Motion
 * --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.kc-teaser__scroll {
		animation: none;
	}

	.kc-teaser .rv-clip-up,
	.kc-teaser .rv-blur,
	.kc-teaser .rv-split-word,
	.kc-teaser .col-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}