/*
 * Signature scroll sections: kinetic statement and converging cards.
 * They render inside .wp-block-post-content, where editorial.css styles bare
 * headings and paragraphs; text rules carry :not(#sg) to stay on top.
 * See inc/signature.php. Complete and readable with no script: motion only
 * plays from states signature.js sets itself (html.sg-on).
 */

.sg-statement,
.sg-converge {
	--sg-ink: #f6f3ff;
	--sg-muted: #a7a3b6;
	position: relative;
	isolation: isolate;
	color: var(--sg-ink);
}

.sg-statement *,
.sg-converge * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------
 * Accent face
 * ---------------------------------------------------------------- */
.sg-accent,
.sg-big-accent {
	padding: 0 .06em 0 .02em;
	background: linear-gradient(100deg, #fff 0%, #cdbfff 35%, #a78bfa 70%, #8b5cf6);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -.01em;
}

/* ------------------------------------------------------------------
 * Statement
 * ---------------------------------------------------------------- */
.sg-statement {
	padding: clamp(72px, 10vw, 140px) 0 clamp(40px, 6vw, 88px);
	overflow: hidden;
	text-align: center;
}

.sg-waves {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.sg-waves::before,
.sg-waves::after {
	content: "";
	position: absolute;
	width: min(70vw, 820px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: repeating-radial-gradient(ellipse at center, transparent 0 13px, rgba(134, 58, 255, .38) 14px 15px, transparent 16px 26px);
	-webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 72%);
	mask-image: radial-gradient(closest-side, #000 20%, transparent 72%);
	opacity: .55;
	animation: sg-breathe 14s ease-in-out infinite alternate;
}

.sg-waves::before {
	top: -38%;
	right: -22%;
	transform: scaleX(1.4) rotate(-18deg);
}

.sg-waves::after {
	bottom: -46%;
	left: -26%;
	transform: scaleX(1.5) rotate(22deg);
	animation-delay: -7s;
}

@keyframes sg-breathe {
	from { opacity: .35; filter: hue-rotate(0deg); }
	to { opacity: .65; filter: hue-rotate(-25deg); }
}

.sg-statement .sg-lines:not(#sg) {
	display: grid;
	gap: .06em;
	margin: 0 auto;
	color: var(--sg-ink);
	font-size: clamp(38px, 6.6vw, 96px);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -.048em;
	text-wrap: balance;
}

.sg-line {
	display: block;
}

.sg-line.is-1 {
	padding-left: clamp(0px, 6vw, 120px);
}

.sg-line.is-2 {
	padding-right: clamp(0px, 4vw, 80px);
}

.sg-w,
.sg-accent {
	display: inline-block;
	will-change: opacity;
}

.sg-pill {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 1.42em;
	height: .9em;
	margin: 0 .04em;
	border: 1px solid rgba(167, 139, 250, .55);
	border-radius: 99px;
	background:
		radial-gradient(70% 90% at 50% 0%, rgba(139, 92, 246, .45), transparent 70%),
		#140a2e;
	color: #cdbfff;
	vertical-align: -.08em;
	box-shadow: 0 0 0 4px rgba(139, 92, 246, .08), 0 10px 40px -10px rgba(139, 92, 246, .9), inset 0 1px 0 rgba(255, 255, 255, .15);
}

.sg-pill svg {
	width: .44em;
	height: .44em;
}

.sg-statement .sg-text:not(#sg) {
	max-width: 640px;
	margin: clamp(28px, 4vw, 48px) auto 0;
	color: var(--sg-muted);
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.7;
}

/* Armed: words wait dim, then light up with the scroll. */
html.sg-on .sg-statement .sg-w,
html.sg-on .sg-statement .sg-accent {
	opacity: .14;
}

html.sg-on .sg-statement .sg-pill {
	opacity: 0;
	transform: scale(.6) rotate(-14deg);
}

/* ------------------------------------------------------------------
 * Converge
 * ---------------------------------------------------------------- */
.sg-converge {
	height: 230vh;
}

.sg-converge-stage {
	position: sticky;
	top: 0;
	display: grid;
	place-items: center;
	height: 100vh;
	min-height: 680px;
	padding-top: var(--chrome-head, 80px);
	overflow: hidden;
	text-align: center;
}

.sg-converge-stage::before {
	content: "";
	position: absolute;
	inset: 10% 15%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(134, 58, 255, .28), transparent 70%);
	filter: blur(30px);
}

.sg-converge-stage > .w-container {
	position: relative;
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: 22px;
}

.sg-converge .sg-big:not(#sg) {
	display: grid;
	margin: 0;
	color: #fff;
	font-size: clamp(48px, 7.4vw, 122px);
	font-weight: 500;
	line-height: .94;
	letter-spacing: -.058em;
}

.sg-converge .sg-big-accent:not(#sg) {
	font-size: 1.08em;
	line-height: .95;
}

.sg-converge .sg-converge-text:not(#sg) {
	max-width: 520px;
	margin: 6px 0 0;
	color: var(--sg-muted);
	font-size: 17px;
	line-height: 1.6;
}

.sg-converge-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 50px;
	padding: 0 24px;
	border: 1px solid rgba(167, 139, 250, .6);
	border-radius: 14px;
	background: linear-gradient(180deg, #8a35ef, #4b1690);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 40px -12px rgba(139, 92, 246, .9);
	transition: transform .25s cubic-bezier(.2, .75, .2, 1), filter .2s ease;
}

.sg-converge-cta:hover,
.sg-converge-cta:focus-visible {
	color: #fff;
	filter: brightness(1.12);
	transform: translateY(-2px);
}

.sg-cards {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.sg-card {
	--k: 1;
	--s: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	gap: 6px;
	width: 230px;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 18px;
	background: rgba(18, 10, 43, .82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .07);
	color: #e8e2f5;
	font-size: 12.5px;
	line-height: 1.45;
	text-align: left;
	transform:
		translate(-50%, -50%)
		translate(calc(var(--x) * var(--k) * 1vw), calc(var(--y) * var(--k) * 1vh))
		rotate(calc(var(--r) * var(--k)))
		scale(var(--s));
}

.sg-card b {
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
}

.sg-card small {
	color: #b3aec2;
	font-size: 12px;
}

.sg-card-icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(167, 139, 250, .35);
	border-radius: 9px;
	background: rgba(139, 92, 246, .16);
	color: #cdbfff;
}

.sg-card-icon svg {
	width: 16px;
	height: 16px;
}

.sg-faces {
	display: flex;
	align-items: center;
	margin-top: 4px;
}

.sg-faces img {
	width: 28px;
	height: 28px;
	margin-right: -8px;
	border: 2px solid #120a2b;
	border-radius: 50%;
	object-fit: cover;
}

.sg-faces i {
	margin-left: 14px;
	color: #cdbfff;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
}

.sg-card.is-stat {
	width: 170px;
	color: #4ade80;
}

.sg-card.is-stat b {
	font-size: 30px;
	letter-spacing: -.03em;
}

.sg-card.is-face {
	width: auto;
	padding: 5px;
	border-radius: 22px;
}

.sg-card.is-face img {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 17px;
	object-fit: cover;
}

.sg-card.is-face.is-sm img {
	width: 52px;
	height: 52px;
	border-radius: 14px;
}

.sg-dot {
	position: absolute;
	right: -3px;
	bottom: -3px;
	width: 14px;
	height: 14px;
	border: 3px solid #120a2b;
	border-radius: 50%;
	background: #4ade80;
}

.sg-card.is-reply,
.sg-card.is-booked {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 272px;
}

.sg-card.is-reply img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

.sg-card.is-reply span,
.sg-card.is-booked span {
	display: grid;
	gap: 2px;
}

.sg-card.is-reply em {
	flex: none;
	margin-left: auto;
	padding: 3px 8px;
	border-radius: 99px;
	background: rgba(74, 222, 128, .14);
	color: #4ade80;
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
}

.sg-card.is-booked {
	border-color: rgba(74, 222, 128, .35);
	background: rgba(10, 30, 22, .85);
}

.sg-booked-icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #4ade80;
	color: #052e16;
	box-shadow: 0 0 24px rgba(74, 222, 128, .6);
}

html.sg-on .sg-converge .sg-card {
	--k: 2.6;
	--s: .7;
	opacity: 0;
}

/* ------------------------------------------------------------------
 * Small screens: no pinned stage, the cards line up under the headline.
 * ---------------------------------------------------------------- */
@media screen and (max-width: 991px) {
	.sg-converge {
		height: auto;
		padding: clamp(64px, 10vw, 110px) 0;
	}

	.sg-converge-stage {
		position: relative;
		height: auto;
		min-height: 0;
		overflow: visible;
	}

	.sg-cards {
		position: relative;
		inset: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		margin-top: 36px;
		padding: 0 16px;
	}

	.sg-card,
	html.sg-on .sg-converge .sg-card {
		--k: 0;
		--s: 1;
		position: relative;
		top: auto;
		left: auto;
		opacity: 1;
		transform: none;
	}

	.sg-card.is-face,
	.sg-card.is-stat {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.sg-line.is-1,
	.sg-line.is-2 {
		padding: 0;
	}

	.sg-card {
		width: 100%;
		max-width: 340px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sg-waves::before,
	.sg-waves::after {
		animation: none;
	}

	.sg-converge {
		height: auto;
	}
}

/* ------------------------------------------------------------------
 * Handwritten notes: the human margin scribble
 * ---------------------------------------------------------------- */
.sg-note {
	position: relative;
	display: inline-flex;
	align-items: flex-start;
	gap: 4px;
	color: #cdbfff;
	font-family: Caveat, "Segoe Print", "Bradley Hand", cursive;
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 600;
	line-height: 1.1;
	transform: rotate(-4deg);
	pointer-events: none;
}

.sg-doodle {
	flex: none;
	margin-top: 10px;
	opacity: .85;
}

.sg-note.is-statement {
	margin: clamp(18px, 2.4vw, 28px) auto 0;
	padding-left: 18%;
}

.sg-cta-wrap {
	position: relative;
	display: inline-block;
	margin-top: 10px;
}

.sg-note.is-cta {
	position: absolute;
	left: calc(100% + 10px);
	bottom: 30px;
	flex-direction: row-reverse;
	white-space: nowrap;
	transform: rotate(5deg);
}

/* Draw the arrow in when JS arms the section. */
html.sg-on .sg-doodle path {
	stroke-dasharray: 120;
	stroke-dashoffset: 120;
	transition: stroke-dashoffset 1.1s cubic-bezier(.2, .75, .2, 1) .2s;
}

html.sg-on .sg-note.is-drawn .sg-doodle path {
	stroke-dashoffset: 0;
}

@media screen and (max-width: 767px) {
	.sg-note.is-cta {
		position: static;
		display: flex;
		justify-content: center;
		margin-bottom: 6px;
	}

	.sg-note.is-cta .sg-doodle {
		display: none;
	}

	.sg-note.is-statement {
		padding-left: 0;
	}
}

@media screen and (max-width: 767px) {
	.sg-card.is-opener,
	.sg-card.is-draft {
		display: none;
	}
}