/*
 * Section: closing call to action (the "jl-closing" group).
 *
 * A small line, a large heading and a button over a line drawing, all in one
 * light ink on the deep green of the footer band. Built from ordinary blocks;
 * the drawing is added on the site by inc/closing.php, which also marks the
 * section "jl-closing--art". Without that mark (in the editor) the blocks
 * simply follow one another, list of labels included.
 *
 * The green is the footer's (--jl-deep in jlaude.css), so a page that ends on
 * this section runs straight into the footer as one block, with the footer
 * card set into the same ground. Both colours are the same in light and dark
 * mode. Above the section a strip eases from the page colour into the green.
 *
 * The lines only draw themselves in once the script is running (html.jl-js);
 * the drifting second line and the travelling dot only run while the section
 * is on screen.
 */

.jl-closing.jl-closing {
	--cl-pad: 48px;
	--cl-ink: var(--wp--preset--color--dark-contrast);
	--cl-bg: var(--jl-deep);
	--cl-ease: cubic-bezier(0.6, 0, 0.2, 1);
	position: relative;
	margin-block: 0;
	padding: clamp(72px, 11vh, 120px) var(--cl-pad);
	overflow: hidden;
	background-color: var(--cl-bg);
	color: var(--cl-ink);
}

/* WordPress spaces out a Group's children; every part here sets its own spacing. */
.jl-closing.jl-closing > *,
.jl-closing .jl-closing__main > * {
	margin-block: 0;
}

/*
 * The strip above the section (added on the site): it eases from the page
 * colour into the green. Its lower half tells the floating header that the
 * ground behind it is already dark.
 */
.jl-closing__lead {
	--cl-lead: clamp(120px, 15vw, 200px);
	position: relative;
	height: var(--cl-lead);
	margin-block: 0;
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--base) 0,
		color-mix(in srgb, var(--jl-deep) 10%, var(--wp--preset--color--base)) 18%,
		color-mix(in srgb, var(--jl-deep) 38%, var(--wp--preset--color--base)) 42%,
		color-mix(in srgb, var(--jl-deep) 74%, var(--wp--preset--color--base)) 68%,
		color-mix(in srgb, var(--jl-deep) 94%, var(--wp--preset--color--base)) 88%,
		var(--jl-deep) 100%
	);
}

/* The strip and the section overlap by a pixel, so no hairline of the page colour can show between them. */
.jl-closing__lead + .jl-closing {
	margin-top: -1px;
}

.jl-closing__lead > div {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 55%;
}

/* ---------- Text ---------- */

/* Small labels: the line above the heading, and the labels of the drawing */
.jl-closing .jl-closing__eyebrow,
.jl-closing .jl-closing__labels li {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.jl-closing .jl-closing__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
}

.jl-closing .jl-closing__eyebrow::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	background: currentColor;
}

.jl-closing .jl-closing__main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
	max-width: 760px;
	margin-top: 38px;
}

.jl-closing .jl-closing__main h2 {
	color: inherit;
	font-size: clamp(3rem, 4.9vw, 6rem);
	letter-spacing: -0.035em;
	line-height: 0.98;
	text-wrap: balance;
}

/* ---------- Button: filled pill, with an arrow that leaves and returns on hover ---------- */

.jl-closing .jl-closing__btn .wp-block-button__link {
	--a: 34px;
	--c: calc((var(--a) - 12px) / 2);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	height: 44px;
	padding: 0 5px 0 20px;
	border: 0;
	border-radius: 999px;
	background: var(--cl-ink);
	color: var(--cl-bg);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1;
	transition: background-color 0.3s ease;
}

.jl-closing .jl-closing__btn .wp-block-button__link:hover,
.jl-closing .jl-closing__btn .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, var(--cl-ink) 84%, var(--cl-bg));
	color: var(--cl-bg);
}

.jl-closing .jl-closing__btn .wp-block-button__link:focus-visible {
	outline-color: var(--cl-ink);
}

/* The round badge */
.jl-closing .jl-closing__btn .wp-block-button__link::after {
	content: "";
	flex: none;
	width: var(--a);
	height: var(--a);
	border-radius: 50%;
	background: var(--cl-bg);
}

/* Two arrows cut out of one layer over the badge: one in the middle, one waiting below left. */
.jl-closing .jl-closing__btn .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 5px;
	z-index: 1;
	width: var(--a);
	height: var(--a);
	margin-top: calc(var(--a) / -2);
	border-radius: 50%;
	background: var(--cl-ink);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 10 L10 2 M3.5 2 H10 V8.5'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 10 L10 2 M3.5 2 H10 V8.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 10 L10 2 M3.5 2 H10 V8.5'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 10 L10 2 M3.5 2 H10 V8.5'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 12px 12px;
	mask-size: 12px 12px;
	-webkit-mask-position: var(--c) var(--c), calc(var(--c) - var(--a)) calc(var(--c) + var(--a));
	mask-position: var(--c) var(--c), calc(var(--c) - var(--a)) calc(var(--c) + var(--a));
	transition: -webkit-mask-position 0.45s var(--cl-ease), mask-position 0.45s var(--cl-ease);
}

.jl-closing .jl-closing__btn .wp-block-button__link:hover::before,
.jl-closing .jl-closing__btn .wp-block-button__link:focus-visible::before {
	-webkit-mask-position: calc(var(--c) + var(--a)) calc(var(--c) - var(--a)), var(--c) var(--c);
	mask-position: calc(var(--c) + var(--a)) calc(var(--c) - var(--a)), var(--c) var(--c);
}

/* ---------- Labels ---------- */

/* In the editor: a row of small labels under the button. */
.jl-closing .jl-closing__labels {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}

.jl-closing .jl-closing__labels li {
	margin: 0;
}

.jl-closing .jl-closing__labels.block-editor-block-list__block::before {
	content: "Labels along the drawing — wide screens show the first five, tablets the first three";
	flex: 0 0 100%;
	opacity: 0.7;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* On the site the drawing shows the labels; the list stays for screen readers and search engines. */
.jl-closing .jl-closing__labels--hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Line drawing (front only) ---------- */

/* One version per screen size; each is a faint drifting layer under the lines themselves. */
.jl-closing .jl-closing__art {
	position: relative;
	display: none;
	pointer-events: none;
}

.jl-closing .jl-closing__art svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.jl-closing .jl-closing__breath {
	position: absolute;
	inset: 0;
	height: 100% !important;
	opacity: 0.28;
	transform: translate(6px, 6px);
}

.jl-closing .jl-closing__art path {
	stroke: var(--cl-ink);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1;
}

.jl-closing .jl-closing__lines g {
	opacity: 0.6;
}

.jl-closing .jl-closing__art circle,
.jl-closing .jl-closing__art .jl-dot {
	fill: var(--cl-ink);
}

.jl-closing .jl-closing__art .jl-tick {
	stroke-width: 2;
}

/* --k keeps the labels the same size on screen while the drawing scales (set by the script). */
.jl-closing .jl-closing__art .jl-label {
	fill: var(--cl-ink);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: calc(11.5px * var(--k, 1));
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.jl-closing .jl-closing__art .jl-draw {
	stroke-dasharray: 1;
}

/* ---------- Motion (front only, once the script is running) ---------- */

/* Lines start undrawn; "is-in", added when the section scrolls into view, draws them. */
.jl-js .jl-closing .jl-draw {
	stroke-dashoffset: 1;
	transition: stroke-dashoffset var(--t, 2.4s) var(--cl-ease) var(--d, 0s);
}

.jl-js .jl-closing .jl-fade {
	opacity: 0;
	transition: opacity 0.8s ease var(--d, 0s);
}

.jl-js .jl-closing .jl-dot {
	opacity: 0;
	transition: opacity 1s ease 2.4s;
}

.jl-js .jl-closing.is-in .jl-draw {
	stroke-dashoffset: 0;
}

.jl-js .jl-closing.is-in .jl-fade,
.jl-js .jl-closing.is-in .jl-dot {
	opacity: 1;
}

/* The faint second line drifts in and out, on its own layer, while the section is on screen ("is-live"). */
@keyframes jl-closing-breathe {
	0%,
	100% {
		transform: translate(6px, 6px);
	}

	50% {
		transform: translate(17px, 17px);
	}
}

@keyframes jl-closing-breathe-sm {
	0%,
	100% {
		transform: translate(5px, 5px);
	}

	50% {
		transform: translate(12px, 12px);
	}
}

.jl-js .jl-closing.is-live .jl-closing__breath {
	animation: jl-closing-breathe 7s ease-in-out infinite;
	will-change: transform;
}

/* ---------- Wide screens: the text sits over the drawing, which fills the section ---------- */
@media (min-width: 1100px) {
	.jl-closing--art.jl-closing {
		aspect-ratio: 1440 / 680;
		padding: 0;
	}

	.jl-closing--art .jl-closing__eyebrow {
		position: absolute;
		top: 14.1%;
		left: var(--cl-pad);
		z-index: 1;
	}

	.jl-closing--art .jl-closing__main {
		position: absolute;
		top: 12.35%;
		right: var(--cl-pad);
		left: 53.6%;
		z-index: 1;
		gap: clamp(22px, 1.8vw, 34px);
		max-width: none;
		margin-top: 0;
	}

	.jl-closing .jl-closing__art--desktop {
		position: absolute;
		inset: 0;
		display: block;
	}

	.jl-closing .jl-closing__art--desktop svg {
		height: 100%;
	}
}

/* ---------- Tablet: text on top, the drawing below, edge to edge ---------- */
@media (max-width: 1099px) {
	.jl-closing.jl-closing {
		--cl-pad: 40px;
	}

	.jl-closing--art.jl-closing {
		padding-top: 96px;
		padding-bottom: 0;
	}

	.jl-closing .jl-closing__main {
		gap: 28px;
		max-width: 620px;
	}

	.jl-closing .jl-closing__main h2 {
		font-size: clamp(3.25rem, 8.85vw, 4.75rem);
	}

	.jl-closing .jl-closing__btn .wp-block-button__link {
		--a: 36px;
		gap: 44px;
	}

	.jl-closing .jl-closing__art {
		margin: 8px calc(-1 * var(--cl-pad)) 0;
	}
}

@media (min-width: 700px) and (max-width: 1099px) {
	.jl-closing .jl-closing__art--tablet {
		display: block;
	}
}

/* ---------- Mobile: a simpler drawing without labels, a full-width button ---------- */
@media (max-width: 699px) {
	.jl-closing.jl-closing {
		--cl-pad: 24px;
	}

	.jl-closing--art.jl-closing {
		padding-top: 72px;
	}

	.jl-closing .jl-closing__eyebrow {
		gap: 10px;
	}

	.jl-closing .jl-closing__main {
		align-items: stretch;
		margin-top: 30px;
	}

	.jl-closing .jl-closing__main h2 {
		font-size: clamp(2.25rem, 11.8vw, 3.25rem);
		line-height: 1;
	}

	.jl-closing .jl-closing__btn,
	.jl-closing .jl-closing__btn .wp-block-button__link {
		width: 100%;
	}

	.jl-closing .jl-closing__btn .wp-block-button__link {
		--a: 40px;
		display: flex;
		height: 52px;
		padding: 0 6px 0 22px;
	}

	.jl-closing .jl-closing__btn .wp-block-button__link::before {
		right: 6px;
	}

	.jl-closing .jl-closing__art {
		margin-top: 12px;
	}

	.jl-closing .jl-closing__art--mobile {
		display: block;
	}

	.jl-js .jl-closing.is-live .jl-closing__breath {
		animation-name: jl-closing-breathe-sm;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jl-js .jl-closing .jl-draw {
		stroke-dashoffset: 0;
		transition: none;
	}

	.jl-js .jl-closing .jl-fade {
		opacity: 1;
		transition: none;
	}

	.jl-js .jl-closing.is-live .jl-closing__breath {
		animation: none;
	}

	.jl-closing .jl-closing__art .jl-dot {
		display: none;
	}

	.jl-closing .jl-closing__btn .wp-block-button__link,
	.jl-closing .jl-closing__btn .wp-block-button__link::before {
		transition: none;
	}
}