/**
 * Story Timeline Arc block (blocks/content/story-timeline-arc.php)
 *
 * "The history of Del Maguey": milestones ride the apex of a very large
 * circle, curving away to both edges along a dotted track, with the active
 * milestone's copy in the bowl beneath.
 *
 * Geometry is driven by one number, --arc-r. The wheel is a 2R box whose
 * centre sits R below the top of the stage, so the circle's apex lands exactly
 * at the stage's top edge (plus --arc-headroom, to leave room for the year
 * label that sits outside the line). Each marker is placed by rotating it
 * about that centre and pushing it out by R — so nothing needs measuring in
 * JS, and the whole thing rescales by changing --arc-r alone.
 *
 * The stage clips, so the far ends of the ring simply leave the frame.
 */

.dm-arc {
	/* Radius of the ring. Grows with the viewport so the arc's curvature
	   stays visually similar from laptop to wide desktop. */
	--arc-r: clamp(30rem, 74vw, 70rem);
	/* Space above the apex for the active year label. */
	--arc-headroom: clamp(3.5rem, 5vw, 5rem);
	/* Visible height of the arc. A variable rather than a literal because the
	   track's fade stops are measured against it. */
	--arc-stage-h: clamp(19rem, 27vw, 27rem);
	--arc-ink: var(--dm-fg-default-primary);
	--arc-muted: var(--dm-ext-taupe);
	/* Marker dot size. Also sets the markers' pivot, which is the dot centre. */
	--arc-dot: clamp(0.75rem, 1.25vw, 1.3rem);

	background-color: var(--color-cream);
	padding-top: clamp(3rem, 6vw, 5.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
	overflow: hidden;
}

/* ---- Heading + intro -------------------------------------------------- */
.dm-arc__head {
	text-align: center;
	padding-inline: 16px;
}

.dm-arc__heading {
	margin: 0 auto;
	max-width: 40rem;
	color: var(--arc-ink);
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	font-size: clamp(2rem, 3.6vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.dm-arc__heading em {
	font-style: italic;
}

.dm-arc__intro {
	margin: clamp(0.9rem, 1.8vw, 1.4rem) auto 0;
	max-width: 30rem;
	color: var(--arc-ink);
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.25;
}

/* ---- Stage ------------------------------------------------------------ */
.dm-arc__stage {
	position: relative;
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
	/* Tall enough to hold the arc's visible drop plus the copy panel sitting
	   in the bowl. Tied loosely to the radius so the two scale together. */
	height: var(--arc-stage-h);
	overflow: hidden;
}

/* Track and wheel share the same 2R box and the same placement, so the dots
   sit exactly on the line the markers travel. */
.dm-arc__track-wrap,
.dm-arc__wheel {
	position: absolute;
	top: var(--arc-headroom);
	left: 50%;
	width: calc(var(--arc-r) * 2);
	height: calc(var(--arc-r) * 2);
	margin-left: calc(var(--arc-r) * -1);
	pointer-events: none;
}

/* Where the track hands over from sharp to blurred, and where it has faded
   out entirely. Measured down the stage, then shifted into the wrap's own
   coordinates — the wrap starts --arc-headroom below the stage's top edge. */
.dm-arc {
	--arc-fade-a: calc(var(--arc-stage-h) * 0.40 - var(--arc-headroom));
	--arc-fade-b: calc(var(--arc-stage-h) * 0.78 - var(--arc-headroom));
	--arc-fade-c: calc(var(--arc-stage-h) * 0.96 - var(--arc-headroom));
}

.dm-arc__track-layer {
	position: absolute;
	inset: 0;
}

/* Crisp near the apex, gone by the handover point. */
.dm-arc__track-layer--sharp {
	-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--arc-fade-a), transparent var(--arc-fade-b));
	mask-image: linear-gradient(to bottom, #000 0, #000 var(--arc-fade-a), transparent var(--arc-fade-b));
}

/* Absent at the apex, takes over exactly where the sharp copy leaves off, then
   dissolves just short of the clip so the line never ends on a hard edge. */
.dm-arc__track-layer--soft {
	filter: blur(1.8px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent var(--arc-fade-a), #000 var(--arc-fade-b), transparent var(--arc-fade-c));
	mask-image: linear-gradient(to bottom, transparent 0, transparent var(--arc-fade-a), #000 var(--arc-fade-b), transparent var(--arc-fade-c));
}

.dm-arc__track {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Turns with the wheel but slower — see the parallax note in the block. */
	transform: rotate(var(--track-rotation, 0deg));
	transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dm-arc__track-line {
	stroke: var(--arc-muted);
	stroke-width: 3;
	opacity: 0.72;
}

.dm-arc__wheel {
	border-radius: 50%;
	transform: rotate(var(--arc-rotation, 0deg));
	/* JS drives rotation through GSAP; this is the no-JS / reduced-motion
	   fallback and keeps keyboard jumps from snapping. */
	transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Markers ---------------------------------------------------------- */
.dm-arc__item {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.5rem, 0.9vw, 0.85rem);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	pointer-events: auto;
	/* Pivot on the dot's centre (the bottom of the year-over-dot column), so
	   the dot sits exactly on the dotted track and the year stands just
	   outside it. Rotate about the wheel's centre, then push out to the rim;
	   the marker keeps the rotation, which tips each year along the tangent.
	   Anchoring from the bottom keeps the dot on the line even as the active
	   year grows. */
	transform-origin: 50% calc(100% - var(--arc-dot) / 2);
	transform:
		translate(-50%, calc(-100% + var(--arc-dot) / 2))
		rotate(var(--item-angle))
		translateY(calc(var(--arc-r) * -1));
	transition: opacity 0.6s ease, filter 0.6s ease;
}

.dm-arc__year {
	color: var(--arc-muted);
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-size: clamp(1.5rem, 2.6vw, 2.4rem);
	line-height: 1;
	white-space: nowrap;
	transition: color 0.6s ease, font-size 0.6s ease, opacity 0.6s ease;
}

.dm-arc__dot {
	flex: 0 0 auto;
	width: var(--arc-dot);
	height: var(--arc-dot);
	border-radius: 50%;
	background-color: var(--arc-ink);
	transition: box-shadow 0.6s ease, transform 0.6s ease, background-color 0.6s ease;
}

/* Falloff by distance from the apex. Slot 0 is active; everything past the
   third step is off-frame anyway, so it fades out rather than popping. */
.dm-arc__item[data-slot="0"] .dm-arc__year {
	color: var(--arc-ink);
	font-size: clamp(2rem, 3.4vw, 3.1rem);
}

.dm-arc__item[data-slot="0"] .dm-arc__dot {
	transform: scale(1.15);
	/* The ring around the active dot. */
	box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--color-forest) 16%, transparent);
}

.dm-arc__item[data-slot="-1"],
.dm-arc__item[data-slot="1"] {
	opacity: 0.9;
}

.dm-arc__item[data-slot="-2"],
.dm-arc__item[data-slot="2"] {
	opacity: 0.68;
}

.dm-arc__item[data-slot="-3"],
.dm-arc__item[data-slot="3"] {
	opacity: 0.3;
}

/* Anything further round the ring is outside the frame; keeping it
   non-interactive stops off-screen markers catching clicks or tab stops. */
.dm-arc__item:not([data-slot="0"]):not([data-slot="1"]):not([data-slot="-1"]):not([data-slot="2"]):not([data-slot="-2"]):not([data-slot="3"]):not([data-slot="-3"]) {
	opacity: 0;
	pointer-events: none;
}

.dm-arc__item:focus-visible {
	outline: 2px solid var(--arc-ink);
	outline-offset: 6px;
	border-radius: 4px;
}

/* ---- Copy panel + arrows ---------------------------------------------- */
.dm-arc__panel {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	/* Sits in the bowl of the arc rather than below it. */
	top: clamp(9.5rem, 14vw, 14rem);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1.25rem, 3vw, 3.25rem);
	width: min(100% - 2rem, 56rem);
}

.dm-arc__copy {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}

.dm-arc__copy-text {
	margin: 0;
	color: var(--arc-ink);
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-size: clamp(1.25rem, 2.1vw, 1.95rem);
	line-height: 1.3;
}

.dm-arc__copy-text[hidden] {
	display: none;
}

.dm-arc__nav {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: clamp(2.5rem, 3.2vw, 3rem);
	height: clamp(2.5rem, 3.2vw, 3rem);
	padding: 0;
	border: 1px solid var(--dm-border-default-dark-strong);
	border-radius: 50%;
	background: none;
	color: var(--arc-ink);
	cursor: pointer;
}

.dm-arc__nav svg {
	width: 45%;
	height: 45%;
}

/* ---- Narrow screens --------------------------------------------------- */
@media (max-width: 1023px) {
	/* A flatter arc reads better in a narrow frame: a smaller radius here
	   would curve so hard the neighbouring years fall off the edge. */
	.dm-arc {
		--arc-r: clamp(34rem, 120vw, 58rem);
	}
}

@media (max-width: 767px) {
	/* --arc-stage-h has to be overridden here on .dm-arc, not on the stage:
	   the --arc-fade-* stops are computed where they are declared, so a value
	   set further down the tree would never reach them. */
	.dm-arc {
		--arc-r: clamp(28rem, 170vw, 46rem);
		--arc-headroom: clamp(2.75rem, 9vw, 3.5rem);
		--arc-stage-h: clamp(19rem, 62vw, 24rem);
	}

	.dm-arc__panel {
		top: clamp(7.5rem, 27vw, 11rem);
		gap: 0.75rem;
	}

	/* The third step round the ring is off-frame on a phone. */
	.dm-arc__item[data-slot="-3"],
	.dm-arc__item[data-slot="3"] {
		opacity: 0;
		pointer-events: none;
	}
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.dm-arc__wheel,
	.dm-arc__item,
	.dm-arc__year,
	.dm-arc__dot,
}

/* ---- Small desktop (1024-1280) ---------------------------------------
 * No Figma board; shared 1280 rules. --arc-stage-h stays on .dm-arc so the
 * --arc-fade-* calcs pick it up. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	.dm-arc {
		--arc-stage-h: 340px;
		padding-top: 80px;
		padding-bottom: 64px;
	}

	.dm-arc__head {
		/* The capped 1080 container already provides the 100px gutter. */
		padding-inline: 0;
	}

	.dm-arc__heading {
		font-size: 46px;
	}

	.dm-arc__intro {
		margin-top: 24px;
		font-size: 18px;
	}

	.dm-arc__year {
		font-size: 30px;
	}

	.dm-arc__item[data-slot="0"] .dm-arc__year {
		font-size: 40px;
	}

	.dm-arc__copy-text {
		font-size: 24px;
	}
}