/* ========================================================================
   Pasquín · Collection persuasive block
   Refined editorial layout (Cormorant Garamond + Inter + JetBrains Mono).
   Honors theme tokens: --paper, --paper-warm, --noir, --gold, --gold-soft,
   --gold-deep, --ink. 10 effects toggleable via data-pq-effects attribute.
   ======================================================================== */

.persuasive {
	position: relative;
	isolation: isolate;
	padding: clamp(56px, 9vh, 120px) 0 clamp(56px, 9vh, 120px);
	background: var(--paper, #faf8f3);
	color: var(--ink, #1a1814);
	overflow: clip;
}
.persuasive__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	background:
		radial-gradient(1100px 580px at 8% 10%, rgba(188, 144, 71, .07), transparent 60%),
		radial-gradient(900px 480px at 92% 90%, rgba(188, 144, 71, .055), transparent 60%),
		linear-gradient(180deg, var(--paper-warm, #f5efe3) 0%, var(--paper, #faf8f3) 38%, var(--paper, #faf8f3) 62%, var(--paper-warm, #f5efe3) 100%);
}
.persuasive__inner {
	max-width: 1024px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
}

/* -- Head ---------------------------------------------------------------- */
.persuasive__head {
	text-align: center;
	max-width: 820px;
	margin: 0 auto clamp(48px, 7vh, 88px);
}
.persuasive__eyebrow {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: calc(var(--fs-6, 12px) * .92);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold-deep, #8a6429);
	margin: 0 0 14px;
	opacity: .92;
}
.persuasive__lead {
	font-family: 'Cormorant Garamond', 'Times New Roman', serif;
	font-weight: 400;
	font-style: italic;
	font-size: clamp(22px, 2.6vw, 32px);
	line-height: 1.42;
	color: var(--ink, #1a1814);
	margin: 0 0 24px;
	letter-spacing: .005em;
}
.persuasive__lead strong {
	font-style: normal;
	font-weight: 500;
	color: var(--ink, #1a1814);
	background: linear-gradient(180deg, transparent 64%, rgba(188, 144, 71, .26) 64%, rgba(188, 144, 71, .26) 86%, transparent 86%);
	padding: 0 .12em;
}

/* Gold rule (draws on reveal) */
.persuasive__rule {
	display: block;
	width: 88px;
	height: 1px;
	margin: 18px auto 0;
	background: linear-gradient(90deg, transparent 0%, var(--gold, #bc9047) 18%, var(--gold-deep, #8a6429) 50%, var(--gold, #bc9047) 82%, transparent 100%);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.05s cubic-bezier(.22,.61,.36,1);
}
.persuasive__rule--center { transform-origin: center; }
[data-pq-rule].is-drawn { transform: scaleX(1); }

/* -- Section grid -------------------------------------------------------- */
.persuasive__section {
	display: grid;
	grid-template-columns: clamp(64px, 8vw, 110px) minmax(0, 1fr);
	gap: clamp(22px, 3.4vw, 56px);
	padding: clamp(28px, 4vh, 56px) 0;
	border-top: 1px solid rgba(20, 17, 13, .08);
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s ease-out, transform .9s cubic-bezier(.22,.61,.36,1);
	transition-delay: calc(var(--pq-i, 0) * 80ms);
}
.persuasive__section:first-of-type { border-top: 0; }
.persuasive__section.is-in {
	opacity: 1;
	transform: none;
}

.persuasive__num {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding-top: 6px;
}
.persuasive__roman {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 400;
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1;
	color: var(--gold-deep, #8a6429);
	letter-spacing: .02em;
	font-feature-settings: "lnum" 0, "onum" 1;
}
.persuasive__num-rule {
	display: block;
	width: 48px;
	height: 1px;
	background: var(--gold, #bc9047);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .9s cubic-bezier(.22,.61,.36,1);
	transition-delay: .15s;
}
.persuasive__section.is-in .persuasive__num-rule { transform: scaleX(1); }

.persuasive__body { min-width: 0; }
.persuasive__kicker {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: calc(var(--fs-6, 12px) * .92);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold-deep, #8a6429);
	margin: 0 0 8px;
}
.persuasive__title {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: clamp(26px, 2.8vw, 38px);
	line-height: 1.18;
	color: var(--ink, #1a1814);
	letter-spacing: .005em;
	margin: 0 0 18px;
}
.persuasive__prose p {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: clamp(15.5px, 1.18vw, 17.5px);
	line-height: 1.72;
	color: rgba(20, 17, 13, .9);
	margin: 0 0 16px;
}
.persuasive__prose p:last-child { margin-bottom: 0; }
.persuasive__prose strong {
	font-weight: 600;
	color: var(--ink, #1a1814);
	position: relative;
}
.persuasive__prose em {
	font-style: italic;
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.06em;
	color: rgba(20, 17, 13, .94);
}

/* -- Terms chips --------------------------------------------------------- */
.persuasive__terms {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}
.persuasive__terms li {
	font-family: 'JetBrains Mono', monospace;
	font-size: calc(var(--fs-6, 12px) * .92);
	letter-spacing: .06em;
	color: rgba(20, 17, 13, .76);
	border: 1px solid rgba(188, 144, 71, .42);
	padding: 5px 11px;
	border-radius: 100px;
	background: rgba(255, 253, 247, .55);
	transition: background .35s, color .35s, border-color .35s, transform .35s;
}
.persuasive__terms li:hover {
	background: var(--gold, #bc9047);
	color: var(--paper, #faf8f3);
	border-color: var(--gold-deep, #8a6429);
	transform: translateY(-1px);
}

/* -- Closing ------------------------------------------------------------- */
.persuasive__closing {
	margin-top: clamp(40px, 6vh, 72px);
	text-align: center;
	padding-top: clamp(36px, 5vh, 56px);
	border-top: 1px solid rgba(20, 17, 13, .08);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .9s ease-out, transform .9s cubic-bezier(.22,.61,.36,1);
}
.persuasive__closing.is-in { opacity: 1; transform: none; }
.persuasive__closing .persuasive__rule { margin: 0 auto 24px; }
.persuasive__quote {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.42;
	max-width: 700px;
	margin: 0 auto 16px;
	color: rgba(20, 17, 13, .92);
	border: 0;
	padding: 0;
	letter-spacing: .005em;
}
.persuasive__quote p { margin: 0; }
.persuasive__sign {
	font-family: 'JetBrains Mono', monospace;
	font-size: calc(var(--fs-6, 12px) * .9);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold-deep, #8a6429);
	margin: 0;
	opacity: .82;
}

/* ============================ EFFECTS ============================ */

/* (1) reveal-sequence — base, handled by .is-in already */

/* (2) gold-rule-draw — already on .persuasive__rule */

/* (3) parallax-figure — background subtle drift via JS (no CSS extra) */
.persuasive[data-pq-effects~="parallax-figure"] .persuasive__bg {
	will-change: transform;
}

/* (4) ken-burns — slow zoom/pan on the title (decorative pseudo-element) */
.persuasive[data-pq-effects~="ken-burns"] .persuasive__head::before {
	content: "";
	position: absolute;
	inset: -120px 10% -40px 10%;
	z-index: -1;
	background:
		radial-gradient(420px 220px at 30% 50%, rgba(188, 144, 71, .12), transparent 70%),
		radial-gradient(360px 200px at 72% 60%, rgba(188, 144, 71, .09), transparent 70%);
	filter: blur(2px);
	animation: pq-kenburns 28s ease-in-out infinite alternate;
}
@keyframes pq-kenburns {
	0%   { transform: scale(1)    translate(0, 0); }
	100% { transform: scale(1.15) translate(-2%, 1%); }
}

/* (5) palette-shift — section bg subtly shifts hue on scroll */
.persuasive[data-pq-effects~="palette-shift"] {
	animation: pq-paletteShift 24s linear infinite alternate;
}
@keyframes pq-paletteShift {
	0%   { background-color: var(--paper, #faf8f3); }
	50%  { background-color: #f6efe1; }
	100% { background-color: #f9f3e6; }
}

/* (6) marquee-terms — last section's terms list scrolls slowly */
.persuasive[data-pq-effects~="marquee-terms"] .persuasive__section:last-of-type .persuasive__terms {
	flex-wrap: nowrap;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.persuasive[data-pq-effects~="marquee-terms"] .persuasive__section:last-of-type .persuasive__terms li {
	flex: 0 0 auto;
	animation: pq-marquee 60s linear infinite;
}
@keyframes pq-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-220%); }
}

/* (7) ink-underline — strong/em get a slow draw underline on hover */
.persuasive[data-pq-effects~="ink-underline"] .persuasive__prose strong {
	background-image: linear-gradient(90deg, var(--gold-deep, #8a6429), var(--gold, #bc9047));
	background-size: 0 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	padding-bottom: 1px;
	transition: background-size .8s cubic-bezier(.22,.61,.36,1);
}
.persuasive[data-pq-effects~="ink-underline"] .persuasive__section.is-in .persuasive__prose strong {
	background-size: 100% 1px;
}

/* (8) counter-tick — numeric markers in roman or in stat tiles */
.persuasive[data-pq-effects~="counter-tick"] .persuasive__roman {
	position: relative;
}
.persuasive[data-pq-effects~="counter-tick"] .persuasive__roman::after {
	content: "";
	position: absolute;
	left: 0; right: 8px; bottom: -8px;
	height: 1px;
	background: var(--gold, #bc9047);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.persuasive[data-pq-effects~="counter-tick"] .persuasive__section.is-in .persuasive__roman::after {
	transform: scaleX(1);
}

/* (9) shimmer — gold sweep across each section title once visible */
.persuasive[data-pq-effects~="shimmer"] .persuasive__title {
	background: linear-gradient(90deg,
		var(--ink, #1a1814) 0%,
		var(--ink, #1a1814) 40%,
		var(--gold, #bc9047) 50%,
		var(--ink, #1a1814) 60%,
		var(--ink, #1a1814) 100%);
	background-size: 220% 100%;
	background-position: 200% 0;
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
	        color: transparent;
}
.persuasive[data-pq-effects~="shimmer"] .persuasive__section.is-in .persuasive__title {
	animation: pq-shimmer 2.2s cubic-bezier(.22,.61,.36,1) .3s forwards;
}
@keyframes pq-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -50% 0; }
}

/* (10) mirror-reveal — title split-clip reveal in two halves */
.persuasive[data-pq-effects~="mirror-reveal"] .persuasive__title {
	position: relative;
	display: inline-block;
	overflow: hidden;
	background: none;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	padding: 0 .25em;
}
.persuasive[data-pq-effects~="mirror-reveal"] .persuasive__section .persuasive__title {
	clip-path: inset(0 50% 0 50%);
	transition: clip-path 1.1s cubic-bezier(.22,.61,.36,1);
}
.persuasive[data-pq-effects~="mirror-reveal"] .persuasive__section.is-in .persuasive__title {
	clip-path: inset(0 0% 0 0%);
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 760px) {
	.persuasive { padding: clamp(40px, 6vh, 72px) 0; }
	.persuasive__section {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: clamp(24px, 4vh, 40px) 0;
	}
	.persuasive__num {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		margin-bottom: 4px;
	}
	.persuasive__roman { font-size: 28px; }
	.persuasive__num-rule { width: 36px; }
	.persuasive__lead { font-size: 21px; line-height: 1.45; }
	.persuasive__title { font-size: 24px; }
	.persuasive__prose p { font-size: 16px; line-height: 1.7; }
	.persuasive__quote { font-size: 21px; }
}

/* Print + reduced motion */
@media (prefers-reduced-motion: reduce) {
	.persuasive__section,
	.persuasive__closing,
	.persuasive__rule,
	.persuasive__num-rule {
		transition: none !important;
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.persuasive[data-pq-effects~="ken-burns"] .persuasive__head::before,
	.persuasive[data-pq-effects~="palette-shift"],
	.persuasive[data-pq-effects~="marquee-terms"] .persuasive__terms li {
		animation: none !important;
	}
	.persuasive[data-pq-effects~="mirror-reveal"] .persuasive__title { clip-path: none !important; }
	.persuasive[data-pq-effects~="shimmer"] .persuasive__title {
		background: none !important;
		-webkit-text-fill-color: currentColor;
		color: var(--ink, #1a1814) !important;
	}
}
@media print {
	.persuasive__bg { display: none; }
	.persuasive__section { opacity: 1 !important; transform: none !important; page-break-inside: avoid; }
}