/* ==========================================================================
   PTO Mode — Motion & depth system (Slice J2)
   Loaded after layout.css. Compositor-only (transform/opacity). All hide-states
   are gated on BOTH .js-reveal (added by reveal.js) AND
   prefers-reduced-motion: no-preference — so no-JS or reduced-motion users get
   the fully-visible static page with zero CLS.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* --- Scroll reveals ---------------------------------------------------- */
	.js-reveal [data-reveal] {
		opacity: 0;
		transform: translate3d(0, var(--reveal-y), 0);
		transition: opacity var(--dur-reveal) var(--ease-reveal),
			transform var(--dur-reveal) var(--ease-reveal);
	}
	.js-reveal [data-reveal].is-revealed {
		opacity: 1;
		transform: none;
	}

	/* --- Hero load cascade (eyebrow → title → subhead → form → microcopy) --
	   Hero is above the fold: cascade on load via animation, not the observer. */
	.js-reveal .hero__copy > [data-reveal] {
		opacity: 0;
		animation: pto-rise-in 560ms var(--ease-reveal) forwards;
	}
	.js-reveal .hero__chip    { animation-delay: 80ms; }
	.js-reveal .hero__title   { animation-delay: 160ms; }
	.js-reveal .hero__subhead { animation-delay: 240ms; }
	.js-reveal .hero__form    { animation-delay: 320ms; }
	.js-reveal .hero__stat    { animation-delay: 400ms; }
	/* The observer must not also hide these hero items. */
	.js-reveal .hero__copy > [data-reveal] { transform: none; transition: none; }

	@keyframes pto-rise-in {
		from { opacity: 0; transform: translate3d(0, var(--reveal-y), 0); }
		to   { opacity: 1; transform: none; }
	}

	/* --- SIGNATURE: the terracotta period lands at 720ms ------------------- */
	.js-reveal .hero__period {
		display: inline-block;
		transform-origin: bottom center;
		animation: pto-period-land 520ms var(--ease-spring) 720ms both;
	}
	@keyframes pto-period-land {
		0%   { opacity: 0; transform: translateY(-0.55em) scale(0.4); }
		60%  { opacity: 1; transform: translateY(0) scale(1.18); }
		100% { opacity: 1; transform: translateY(0) scale(1); }
	}

	/* --- Wedge punchline: comic-timing delay ------------------------------- */
	.js-reveal .wedge__flip[data-reveal] { transition-delay: 240ms; }

	/* --- The phone drifts, gently (the only looping animation) ------------- */
	.js-reveal .pto-phone { animation: pto-drift 7s var(--ease) 350ms infinite; }
	@keyframes pto-drift {
		0%, 100% { transform: translateY(0); }
		50%      { transform: translateY(-8px); }
	}
}

/* --- Depth: cards "lit from above" (always on; not motion) ---------------- */
.card {
	box-shadow: var(--shadow-1);
	transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
	pointer-events: none;
}
.card { position: relative; }
@media (prefers-reduced-motion: no-preference) {
	.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
}

/* --- Pine bands: vignette + grain + inset paper edge highlights ------------ */
.section--pine { position: relative; overflow: hidden; }
.section--pine > * { position: relative; z-index: 1; }
.section--pine::before { /* grain */
	content: "";
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.045; mix-blend-mode: overlay;
}
.section--pine::after { /* radial vignette: top-light, bottom-dark */
	content: "";
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(90% 120% at 18% 0%, rgba(20, 88, 75, 0.55) 0%, transparent 46%),
		radial-gradient(120% 100% at 50% 120%, rgba(10, 45, 38, 0.6) 0%, transparent 55%);
}
/* inset paper edge highlights */
.section--pine { box-shadow: inset 0 1px 0 rgba(244, 239, 230, 0.14), inset 0 -1px 0 rgba(244, 239, 230, 0.1); }

/* --- Thread-and-dot section divider --------------------------------------- */
.thread-divider {
	display: block;
	height: 1px;
	width: 100%;
	margin-inline: auto;
	position: relative;
	background: linear-gradient(90deg, transparent, var(--color-hairline) 22%, var(--color-hairline) 78%, transparent);
}
.thread-divider::after {
	content: "";
	position: absolute; left: 50%; top: 50%;
	width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
	border-radius: 50%;
	background: var(--color-terracotta);
}

/* --- Button hover blooms + press ------------------------------------------ */
.btn--terracotta:hover { box-shadow: 0 8px 22px -6px rgba(217, 122, 69, 0.5); }
.btn--pine:hover { box-shadow: 0 8px 22px -6px rgba(14, 76, 65, 0.45); }
@media (prefers-reduced-motion: no-preference) {
	.btn:active { transform: scale(0.97); }
}

/* --- Field focus upgrade -------------------------------------------------- */
.field:focus {
	border-color: var(--color-pine);
	box-shadow: 0 0 0 3px rgba(14, 76, 65, 0.14);
}

/* --- Waitlist success moment ---------------------------------------------- */
.waitlist.is-success .waitlist__submit {
	background: var(--color-pine);
	color: var(--color-on-dark);
}
@media (prefers-reduced-motion: no-preference) {
	.waitlist.is-success .waitlist__submit { animation: pto-success-ring 620ms var(--ease-reveal); }
	@keyframes pto-success-ring {
		0%   { box-shadow: 0 0 0 0 rgba(14, 76, 65, 0.45); }
		100% { box-shadow: 0 0 0 14px rgba(14, 76, 65, 0); }
	}
}

/* --- Stat count-up: tabular figures --------------------------------------- */
.proof__figure, .hero__stat-figure { font-variant-numeric: tabular-nums; }
.proof__pct { color: var(--color-terracotta); }

/* --- FAQ: + rotates to × -------------------------------------------------- */
.faq__q::after { transition: transform var(--dur-2) var(--ease), color var(--dur) var(--ease); }
.faq__item[open] .faq__q::after { content: "+"; transform: rotate(45deg); } /* + rotated 45° reads as × */
.faq__q:hover { color: var(--color-terracotta); }
.faq__q:hover::after { color: var(--color-terracotta-ink); }
/* Smoothly animate the accordion where supported (Chrome interpolate-size). */
@supports (interpolate-size: allow-keywords) {
	.faq__item { interpolate-size: allow-keywords; }
	.faq__item::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size var(--dur-2) var(--ease), content-visibility var(--dur-2) allow-discrete;
	}
	.faq__item[open]::details-content { block-size: auto; }
}

/* --- Footer flourishes ---------------------------------------------------- */
.site-footer { position: relative; }
.site-footer::before {
	content: "";
	position: absolute; top: 0; left: 0; right: 0; height: 1px;
	background: linear-gradient(90deg, transparent, var(--color-hairline) 15%, var(--color-hairline) 85%, transparent);
}
.site-footer__list a,
.site-footer__nav a {
	position: relative;
	text-decoration: none;
	background-image: linear-gradient(var(--color-terracotta), var(--color-terracotta));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size var(--dur-2) var(--ease), color var(--dur) var(--ease);
}
.site-footer__list a:hover,
.site-footer__nav a:hover { background-size: 100% 1px; color: var(--color-ink); }