/* ==========================================================================
   OE Animate - Unlock Timeline (oe/unlock-timeline)

   Horizontal by default. script.js adds:
   - .is-vertical  below the block's breakpoint (data-breakpoint)
   - .is-ready     once the layout is decided (the block is hidden until then,
                   with a CSS fallback in case the script never runs)
   - .is-visible   when scrolled into view, which plays the build animation
   ========================================================================== */

.oe-block-unlock-timeline {
	/* Block tokens: every value points at a design-system variable. */
	--oe-ut-track: var(--oe-color-sky-blue, #008ac8);
	--oe-ut-next: var(--oe-color-plum, #d268ae);
	--oe-ut-highlight: var(--oe-color-primary, #00addc);
	--oe-ut-heading: var(--oe-color-secondary, #003469);
	--oe-ut-text: var(--oe-color-secondary, #003469);
	--oe-ut-muted: var(--oe-color-cool-grey, #455055);
	--oe-ut-rule: var(--oe-color-trans-dark-10, rgba(0, 0, 0, 0.1));
	--oe-ut-centre: var(--oe-color-primary-4, #fff);
	--oe-ut-on-card: var(--oe-color-primary-4, #fff);
	--oe-ut-on-card-muted: var(--oe-color-secondary-muted, #e8ecf4);
	/* Darkened for text contrast (4.5:1 on white); these never animate. */
	--oe-ut-date: color-mix(in srgb, var(--oe-ut-track) 75%, var(--oe-color-secondary, #003469));
	--oe-ut-next-heading: color-mix(in srgb, var(--oe-ut-next) 70%, var(--oe-color-base, #222));
	--oe-ut-halo: color-mix(in srgb, var(--oe-ut-track) 18%, transparent);
	--oe-ut-halo-highlight: color-mix(in srgb, var(--oe-ut-highlight) 22%, transparent);

	/* Track geometry. */
	--oe-ut-bar: 8px;
	--oe-ut-dot: 22px;
	--oe-ut-ease: cubic-bezier(0.65, 0, 0.35, 1);
	--oe-ut-pop: cubic-bezier(0.3, 1.6, 0.5, 1);

	position: relative;
	width: 100%;
}

.oe-block-unlock-timeline--dots-muted {
	--oe-ut-centre: var(--oe-color-muted, #f4f7fa);
}

/* Hidden until script.js has chosen the layout, so there's no jump from
   horizontal to vertical on phones. Shown anyway after 1.5s without JS. */
.oe-block-unlock-timeline:not(.is-ready) {
	visibility: hidden;
	animation: oe-ut-fallback 0s 1.5s forwards;
}

@keyframes oe-ut-fallback {
	to { visibility: visible; }
}

.oe-block-unlock-timeline__hint {
	margin: 0;
	padding: var(--oe-spacing-base, 1rem);
	border: 1px dashed var(--oe-ut-rule);
	color: var(--oe-ut-muted);
}

/* --------------------------------------------------------------------------
   Horizontal layout
   -------------------------------------------------------------------------- */

.oe-block-unlock-timeline__grid {
	display: grid;
	grid-template-columns: var(--oe-ut-cols, 1fr);
	gap: 0;
	align-items: start;
}

.oe-block-unlock-timeline__col {
	min-width: 0;
}

.oe-block-unlock-timeline__heading {
	margin: 0 var(--oe-spacing-medium, 1.5rem) var(--oe-spacing-small, 0.75rem) 0;
	font-size: var(--oe-font-size-large, 1.4rem);
	line-height: var(--oe-line-height-medium-large, 125%);
	color: var(--oe-ut-heading);
}

.oe-block-unlock-timeline__col--next .oe-block-unlock-timeline__heading {
	color: var(--oe-ut-next-heading);
}

/* One strip of the track per column; the strips join up across the grid. */
.oe-block-unlock-timeline__track {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 30px;
	padding: 0 var(--oe-spacing-small, 0.75rem);
}

.oe-block-unlock-timeline__track::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: var(--oe-ut-bar);
	margin-top: calc(var(--oe-ut-bar) / -2);
	background: var(--oe-ut-track);
	transform-origin: left center;
}

.oe-block-unlock-timeline__col:first-child .oe-block-unlock-timeline__track::before {
	border-radius: calc(var(--oe-ut-bar) / 2) 0 0 calc(var(--oe-ut-bar) / 2);
}

.oe-block-unlock-timeline__col--next .oe-block-unlock-timeline__track::before {
	background: repeating-linear-gradient(90deg, var(--oe-ut-next) 0 12px, transparent 12px 20px);
	border-radius: 0 calc(var(--oe-ut-bar) / 2) calc(var(--oe-ut-bar) / 2) 0;
}

.oe-block-unlock-timeline__dot {
	position: relative;
	z-index: 1;
	flex: none;
	box-sizing: border-box;
	width: var(--oe-ut-dot);
	height: var(--oe-ut-dot);
	border: 6px solid var(--oe-ut-track);
	border-radius: 50%;
	background: var(--oe-ut-centre);
}

.oe-block-unlock-timeline__dot--latest {
	width: 30px;
	height: 30px;
	border-width: 8px;
	box-shadow: 0 0 0 6px var(--oe-ut-halo);
}

.oe-block-unlock-timeline__dot--highlight {
	width: 34px;
	height: 34px;
	border: 9px solid var(--oe-ut-highlight);
	box-shadow: 0 0 0 7px var(--oe-ut-halo-highlight);
}

.oe-block-unlock-timeline__dot--soon {
	width: 18px;
	height: 18px;
	border: 3px dashed var(--oe-ut-next);
}

/* Lists */
.oe-block-unlock-timeline__list {
	margin: var(--oe-spacing-base, 1rem) var(--oe-spacing-medium, 1.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.oe-block-unlock-timeline__item {
	margin: 0;
}

.oe-block-unlock-timeline__item:not(.oe-block-unlock-timeline__item--highlight) {
	padding: var(--oe-spacing-small, 0.75rem) 0;
	border-top: 1px solid var(--oe-ut-rule);
}

.oe-block-unlock-timeline__item:first-child:not(.oe-block-unlock-timeline__item--highlight) {
	padding-top: 0;
	border-top: 0;
}

.oe-block-unlock-timeline__item--highlight + .oe-block-unlock-timeline__item {
	border-top: 0;
}

.oe-block-unlock-timeline__date {
	display: block;
	font-size: var(--oe-font-size-small, 0.8rem);
	line-height: var(--oe-line-height-large, 140%);
	color: var(--oe-ut-date);
}

.oe-block-unlock-timeline__title {
	display: block;
	margin-top: var(--oe-spacing-3xsmall, 0.125rem);
	font-size: var(--oe-font-size-base, 1rem);
	line-height: 1.35;
	color: var(--oe-ut-text);
	text-decoration: none;
}

a.oe-block-unlock-timeline__title:hover,
a.oe-block-unlock-timeline__title:focus-visible {
	color: var(--oe-ut-track);
	text-decoration: underline;
}

.oe-block-unlock-timeline__col--next .oe-block-unlock-timeline__title {
	color: var(--oe-ut-muted);
}

.oe-block-unlock-timeline__note {
	display: block;
	margin-top: var(--oe-spacing-3xsmall, 0.125rem);
	font-size: var(--oe-font-size-small, 0.8rem);
	color: var(--oe-ut-muted);
}

/* Highlighted "coming next" item: oe-card oe-card-small oe-background-secondary
   supply the navy card itself. Text is white, the date and badge sky blue. */
.oe-block-unlock-timeline__item--highlight {
	margin-bottom: var(--oe-spacing-xsmall, 0.5rem);
	color: var(--oe-ut-on-card);
}

.oe-block-unlock-timeline__item--highlight + .oe-block-unlock-timeline__item--highlight {
	margin-top: var(--oe-spacing-xsmall, 0.5rem);
}

.oe-block-unlock-timeline__item--highlight .oe-block-unlock-timeline__date {
	color: var(--oe-ut-highlight);
}

.oe-block-unlock-timeline__item--highlight .oe-block-unlock-timeline__note {
	color: var(--oe-ut-on-card-muted);
}

.oe-block-unlock-timeline__col--next .oe-block-unlock-timeline__item--highlight .oe-block-unlock-timeline__title,
.oe-block-unlock-timeline__item--highlight a.oe-block-unlock-timeline__title:hover,
.oe-block-unlock-timeline__item--highlight a.oe-block-unlock-timeline__title:focus-visible {
	color: var(--oe-ut-on-card);
}

.oe-block-unlock-timeline__item--highlight a.oe-block-unlock-timeline__title:focus-visible {
	outline: 2px solid var(--oe-ut-on-card);
	outline-offset: 2px;
}

.oe-block-unlock-timeline__item--highlight .oe-block-unlock-timeline__title {
	font-size: var(--oe-font-size-medium, 1.2rem);
	line-height: var(--oe-line-height-medium-large, 125%);
}

.oe-block-unlock-timeline__badge {
	display: inline-block;
	align-self: flex-start;
	margin-top: var(--oe-spacing-xsmall, 0.5rem);
	padding: var(--oe-spacing-3xsmall, 0.125rem) var(--oe-spacing-small, 0.75rem);
	border-radius: var(--oe-border-radius-badge, 500px);
	/* Navy text: white on sky blue fails contrast. */
	background: var(--oe-ut-highlight);
	color: var(--oe-color-secondary, #003469);
	font-size: var(--oe-font-size-small, 0.8rem);
	line-height: var(--oe-line-height-large, 140%);
}

/* --------------------------------------------------------------------------
   Vertical layout (below the breakpoint)
   -------------------------------------------------------------------------- */

.oe-block-unlock-timeline.is-vertical .oe-block-unlock-timeline__grid {
	grid-template-columns: 1fr;
}

.oe-block-unlock-timeline.is-vertical .oe-block-unlock-timeline__col {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	column-gap: var(--oe-spacing-base, 1rem);
}

.oe-block-unlock-timeline.is-vertical .oe-block-unlock-timeline__heading {
	grid-column: 2;
	margin: 0 0 var(--oe-spacing-xsmall, 0.5rem);
}

.oe-block-unlock-timeline.is-vertical .oe-block-unlock-timeline__track {
	grid-row: 1 / 3;
	grid-column: 1;
	flex-direction: column;
	height: auto;
	min-height: 100%;
	padding: var(--oe-spacing-small, 0.75rem) 0;
}

/* No heading: the track spans just the list. */
.oe-block-unlock-timeline.is-vertical .oe-block-unlock-timeline__track:first-child {
	grid-row: 1;
}

.oe-block-unlock-timeline.is-vertical .oe-block-unlock-timeline__track::before {
	top: 0;
	right: auto;
	bottom: 0;
	left: 50%;
	width: var(--oe-ut-bar);
	height: auto;
	margin: 0 0 0 calc(var(--oe-ut-bar) / -2);
	border-radius: 0;
	transform-origin: center top;
}

.oe-block-unlock-timeline.is-vertical .oe-block-unlock-timeline__col:first-child .oe-block-unlock-timeline__track::before {
	border-radius: calc(var(--oe-ut-bar) / 2) calc(var(--oe-ut-bar) / 2) 0 0;
}

.oe-block-unlock-timeline.is-vertical .oe-block-unlock-timeline__col--next .oe-block-unlock-timeline__track::before {
	background: repeating-linear-gradient(180deg, var(--oe-ut-next) 0 12px, transparent 12px 20px);
	border-radius: 0 0 calc(var(--oe-ut-bar) / 2) calc(var(--oe-ut-bar) / 2);
}

.oe-block-unlock-timeline.is-vertical .oe-block-unlock-timeline__list {
	grid-column: 2;
	margin: 0 0 var(--oe-spacing-large, 2rem);
}

.oe-block-unlock-timeline.is-vertical .oe-block-unlock-timeline__col:last-child .oe-block-unlock-timeline__list {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Build animation: the track draws column by column (--i), then the dots
   pop in one after another (--k). Starts when .is-visible is added.
   -------------------------------------------------------------------------- */

.oe-block-unlock-timeline.is-ready:not(.is-visible) .oe-block-unlock-timeline__track::before {
	transform: scaleX(0);
}

.oe-block-unlock-timeline.is-ready.is-vertical:not(.is-visible) .oe-block-unlock-timeline__track::before {
	transform: scaleY(0);
}

.oe-block-unlock-timeline.is-ready:not(.is-visible) .oe-block-unlock-timeline__dot {
	transform: scale(0);
}

.oe-block-unlock-timeline.is-visible .oe-block-unlock-timeline__track::before {
	transition: transform 0.7s var(--oe-ut-ease) calc(0.2s + var(--i, 0) * 0.55s);
}

.oe-block-unlock-timeline.is-visible .oe-block-unlock-timeline__dot {
	transition: transform 0.45s var(--oe-ut-pop) calc(0.5s + var(--k, 0) * 0.14s);
}

@media (prefers-reduced-motion: reduce) {
	.oe-block-unlock-timeline .oe-block-unlock-timeline__track::before,
	.oe-block-unlock-timeline .oe-block-unlock-timeline__dot {
		transform: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   Variant: Strengths (dark section) — variants/strengths.php
   A full section on oe-background-circuit-dark: heading, key, then one
   column per year along a glowing line, colour-coded by our three strengths.
   ========================================================================== */

.oe-block-unlock-timeline--strengths {
	/* Block tokens. The five colours below are set inline from the Colours
	   panel (token selects); these are the fallbacks. */
	--oe-ut-s-source: var(--oe-color-strength-source-on-dark, #41bfc8);
	--oe-ut-s-expertise: var(--oe-color-strength-expertise-on-dark, #e0b23e);
	--oe-ut-s-intelligence: var(--oe-color-strength-intelligence-on-dark, #cd70c0);
	--oe-ut-s-track: var(--oe-color-sky-blue, #008ac8);
	--oe-ut-s-glow: var(--oe-color-pillar-performance-light, #66bde0);
	--oe-ut-s-bg: var(--oe-color-navy-deep, #091939);
	--oe-ut-s-text: var(--oe-color-primary-4, #fff);
	--oe-ut-s-muted: var(--oe-color-on-dark-muted, #b2c2d1);
	--oe-ut-s-rule: var(--oe-color-trans-light-10, rgba(255, 255, 255, 0.1));
	--oe-ut-s-dash: color-mix(in srgb, var(--oe-ut-s-text) 35%, transparent);

	color: var(--oe-ut-s-muted);
	overflow-x: clip;
}

/* Plain navy until the global oe-background-circuit-dark class exists
   (zero specificity, so that class always wins). */
:where(.oe-block-unlock-timeline--strengths) {
	background-color: var(--oe-ut-s-bg);
}

/* The section itself is never hidden; only the timeline waits for script.js. */
.oe-block-unlock-timeline--strengths:not(.is-ready) {
	visibility: visible;
	animation: none;
}

.oe-block-unlock-timeline--strengths:not(.is-ready) .oe-block-unlock-timeline__years {
	visibility: hidden;
	animation: oe-ut-fallback 0s 1.5s forwards;
}

.oe-block-unlock-timeline__inner {
	container: oe-ut-strengths / inline-size;
}

/* Heading + key ---------------------------------------------------------- */

.oe-block-unlock-timeline__intro {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--oe-spacing-medium, 1.5rem) var(--oe-spacing-2xlarge, 4rem);
	align-items: end;
}

@container oe-ut-strengths (max-width: 900px) {
	.oe-block-unlock-timeline__intro {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}
}

.oe-block-unlock-timeline--strengths .oe-block-unlock-timeline__section-title {
	margin: 0;
	font-size: var(--oe-xxl, clamp(2.44rem, 1.9rem + 2.2vw, 3.75rem));
	line-height: var(--oe-line-height-medium, 112%);
	color: var(--oe-ut-s-text);
}

.oe-block-unlock-timeline__glow {
	color: var(--oe-ut-s-glow);
	text-shadow:
		0 0 var(--oe-spacing-small, 0.75rem) color-mix(in srgb, var(--oe-ut-s-glow) 60%, transparent),
		0 0 var(--oe-spacing-large, 2rem) color-mix(in srgb, var(--oe-ut-s-track) 65%, transparent);
}

.oe-block-unlock-timeline--strengths .oe-block-unlock-timeline__lede {
	max-width: 36em;
	margin: var(--oe-spacing-medium, 1.5rem) 0 0;
	font-size: var(--oe-base, 1.1rem);
	line-height: var(--oe-line-height-large, 140%);
	color: var(--oe-ut-s-text);
}

.oe-block-unlock-timeline__key {
	display: flex;
	flex-direction: column;
	gap: var(--oe-spacing-small, 0.75rem);
	font-size: var(--oe-sm, 0.85rem);
	line-height: var(--oe-line-height-large, 140%);
}

.oe-block-unlock-timeline--strengths .oe-block-unlock-timeline__key-text {
	margin: 0;
}

.oe-block-unlock-timeline__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oe-spacing-xsmall, 0.5rem) var(--oe-spacing-medium, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.oe-block-unlock-timeline__legend-item {
	display: inline-flex;
	align-items: center;
	gap: var(--oe-spacing-xsmall, 0.5rem);
	margin: 0;
	color: var(--oe-ut-s-text);
}

.oe-block-unlock-timeline--strengths a:focus-visible {
	outline: 2px solid var(--oe-ut-s-text);
	outline-offset: 2px;
}

/* Strength markers: colour AND shape (bar / circle / diamond), so colour is
   never the only cue. Hollow = coming next. */
.oe-block-unlock-timeline__marker {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 12px;
	color: var(--oe-ut-s-source);
}

.oe-block-unlock-timeline__marker::before {
	content: "";
	box-sizing: border-box;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: currentColor;
}

.oe-block-unlock-timeline__marker--expertise {
	color: var(--oe-ut-s-expertise);
}

.oe-block-unlock-timeline__marker--expertise::before {
	width: 11px;
	height: 11px;
	border-radius: 50%;
}

.oe-block-unlock-timeline__marker--intelligence {
	color: var(--oe-ut-s-intelligence);
}

.oe-block-unlock-timeline__marker--intelligence::before {
	width: 9px;
	height: 9px;
	border-radius: 1px;
	transform: rotate(45deg);
}

.oe-block-unlock-timeline__marker--hollow::before {
	border: 2px solid currentColor;
	background: transparent;
}

/* Hollow bar = dashed line. */
.oe-block-unlock-timeline__marker--source.oe-block-unlock-timeline__marker--hollow::before {
	height: 3px;
	border: 0;
	background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px);
}

.oe-block-unlock-timeline__marker--soon {
	color: var(--oe-ut-s-muted);
}

.oe-block-unlock-timeline__marker--soon::before {
	width: 11px;
	height: 11px;
	border: 2px dashed currentColor;
	border-radius: 50%;
	background: transparent;
}

/* Timeline: horizontal ---------------------------------------------------- */

.oe-block-unlock-timeline__defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.oe-block-unlock-timeline__years {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--oe-ut-years, 4), minmax(0, 1fr));
	margin: var(--oe-spacing-2xlarge, 4rem) 0 0;
	padding: 0;
	list-style: none;
}

.oe-block-unlock-timeline__year {
	position: relative;
	min-width: 0;
	margin: 0;
	padding-right: var(--oe-spacing-medium, 1.5rem);
}

/* The line: one strip per year, joined up. The first fades in from the left;
   "Coming next" is dashed and starts after its unlit charge. */
.oe-block-unlock-timeline__year::before {
	content: "";
	position: absolute;
	top: 22px;
	right: 0;
	left: 0;
	height: 3px;
	margin-top: -1.5px;
	background: var(--oe-ut-s-track);
	box-shadow: 0 0 12px color-mix(in srgb, var(--oe-ut-s-track) 80%, transparent);
	transform-origin: left center;
}

.oe-block-unlock-timeline__year:first-child::before {
	left: -64px;
	background: linear-gradient(90deg, transparent, var(--oe-ut-s-track) 64px);
}

.oe-block-unlock-timeline__year--next::before,
.oe-block-unlock-timeline__year--next:first-child::before {
	left: 26px;
	height: 2px;
	margin-top: -1px;
	background: repeating-linear-gradient(90deg, var(--oe-ut-s-dash) 0 6px, transparent 6px 12px);
	box-shadow: none;
}

/* Curves flowing into the charge, one per strength that year. */
.oe-block-unlock-timeline__inflow {
	position: absolute;
	top: -4px;
	left: -54px;
	width: 72px;
	height: 52px;
	overflow: visible;
	pointer-events: none;
}

.oe-block-unlock-timeline__curve--source { color: var(--oe-ut-s-source); }
.oe-block-unlock-timeline__curve--expertise { color: var(--oe-ut-s-expertise); }
.oe-block-unlock-timeline__curve--intelligence { color: var(--oe-ut-s-intelligence); }

.oe-block-unlock-timeline__curve path {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.oe-block-unlock-timeline__curve-glow {
	stroke-width: 6;
	opacity: 0.45;
}

.oe-block-unlock-timeline__curve-line {
	stroke-width: 2.4;
}

/* The charge: a point of light with a horizontal flare, tinted by the
   first strength of its year. */
.oe-block-unlock-timeline__charge {
	--oe-ut-t: var(--oe-ut-s-source);
	position: relative;
	z-index: 1;
	display: block;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	margin: 16px 0 0 6px;
	border-radius: 50%;
	background: var(--oe-ut-s-text);
	box-shadow:
		0 0 6px 2px var(--oe-ut-s-text),
		0 0 18px 6px color-mix(in srgb, var(--oe-ut-t) 60%, var(--oe-ut-s-glow)),
		0 0 40px 12px color-mix(in srgb, var(--oe-ut-t) 30%, transparent);
}

.oe-block-unlock-timeline__charge--expertise { --oe-ut-t: var(--oe-ut-s-expertise); }
.oe-block-unlock-timeline__charge--intelligence { --oe-ut-t: var(--oe-ut-s-intelligence); }

.oe-block-unlock-timeline__charge::before,
.oe-block-unlock-timeline__charge::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.oe-block-unlock-timeline__charge::before {
	width: 170px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--oe-ut-s-text) 95%, transparent) 50%, transparent);
}

.oe-block-unlock-timeline__charge::after {
	width: 110px;
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--oe-ut-s-text) 90%, transparent) 50%, transparent);
	filter: blur(4px);
}

.oe-block-unlock-timeline__charge--latest {
	width: 14px;
	height: 14px;
	margin: 15px 0 0 5px;
	box-shadow:
		0 0 8px 3px var(--oe-ut-s-text),
		0 0 26px 10px color-mix(in srgb, var(--oe-ut-t) 60%, var(--oe-ut-s-glow)),
		0 0 64px 22px color-mix(in srgb, var(--oe-ut-s-glow) 35%, transparent);
}

.oe-block-unlock-timeline__charge--latest::before { width: 220px; }
.oe-block-unlock-timeline__charge--latest::after { width: 170px; height: 10px; }

.oe-block-unlock-timeline__charge--off {
	border: 2px dashed var(--oe-ut-s-muted);
	background: var(--oe-ut-s-bg);
	box-shadow: none;
}

.oe-block-unlock-timeline__charge--off::before,
.oe-block-unlock-timeline__charge--off::after {
	display: none;
}

/* Year columns */
.oe-block-unlock-timeline--strengths .oe-block-unlock-timeline__year-heading {
	margin: var(--oe-spacing-medium, 1.5rem) 0 var(--oe-spacing-small, 0.75rem);
	font-size: var(--oe-font-size-large, 1.4rem);
	line-height: var(--oe-line-height-medium-large, 125%);
	color: var(--oe-ut-s-text);
}

.oe-block-unlock-timeline--strengths .oe-block-unlock-timeline__year--next .oe-block-unlock-timeline__year-heading {
	color: var(--oe-ut-s-muted);
}

.oe-block-unlock-timeline__entries {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Grid: marker | title | tag. Titles wrap within their own column. */
.oe-block-unlock-timeline__entry {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--oe-spacing-3xsmall, 0.125rem) var(--oe-spacing-small, 0.75rem);
	margin: 0;
	padding: var(--oe-spacing-xsmall, 0.5rem) 0;
	border-top: 1px solid var(--oe-ut-s-rule);
	font-size: var(--oe-sm, 0.85rem);
	line-height: var(--oe-line-height-medium-large, 125%);
	color: var(--oe-ut-s-text);
}

.oe-block-unlock-timeline__entry:first-child {
	border-top: 0;
}

.oe-block-unlock-timeline__entry-title {
	color: var(--oe-ut-s-text);
	text-decoration: none;
}

a.oe-block-unlock-timeline__entry-title:hover,
a.oe-block-unlock-timeline__entry-title:focus-visible {
	color: var(--oe-ut-s-text);
	text-decoration: underline;
}

.oe-block-unlock-timeline__entry--soon,
.oe-block-unlock-timeline__entry--soon .oe-block-unlock-timeline__entry-title {
	color: var(--oe-ut-s-muted);
}

.oe-block-unlock-timeline__tag {
	font-size: var(--oe-font-size-small, 0.8rem);
	color: var(--oe-ut-s-muted);
	white-space: nowrap;
}

/* Narrow year columns: the tag gets its own line, under the title. */
.oe-block-unlock-timeline__year {
	container: oe-ut-year / inline-size;
}

@container oe-ut-year (max-width: 280px) {
	.oe-block-unlock-timeline__tag {
		grid-column: 2;
	}
}

/* Timeline: vertical (below the breakpoint) ------------------------------- */

.oe-block-unlock-timeline--strengths.is-vertical .oe-block-unlock-timeline__years {
	grid-template-columns: minmax(0, 1fr);
	margin-top: var(--oe-spacing-xlarge, 3rem);
	padding-left: 34px;
}

.oe-block-unlock-timeline--strengths.is-vertical .oe-block-unlock-timeline__year {
	padding: 0 0 var(--oe-spacing-large, 2rem);
}

.oe-block-unlock-timeline--strengths.is-vertical .oe-block-unlock-timeline__year::before,
.oe-block-unlock-timeline--strengths.is-vertical .oe-block-unlock-timeline__year:first-child::before {
	top: 12px;
	right: auto;
	bottom: -12px;
	left: -23.5px;
	width: 3px;
	height: auto;
	margin: 0;
	background: var(--oe-ut-s-track);
	transform-origin: center top;
}

.oe-block-unlock-timeline--strengths.is-vertical .oe-block-unlock-timeline__year--next::before {
	display: none;
}

.oe-block-unlock-timeline--strengths.is-vertical .oe-block-unlock-timeline__inflow {
	display: none;
}

.oe-block-unlock-timeline--strengths.is-vertical .oe-block-unlock-timeline__charge {
	position: absolute;
	top: 6px;
	left: -28px;
	margin: 0;
}

.oe-block-unlock-timeline--strengths.is-vertical .oe-block-unlock-timeline__charge--latest {
	top: 5px;
	left: -29px;
}

.oe-block-unlock-timeline--strengths.is-vertical .oe-block-unlock-timeline__charge::before,
.oe-block-unlock-timeline--strengths.is-vertical .oe-block-unlock-timeline__charge::after {
	display: none;
}

.oe-block-unlock-timeline--strengths.is-vertical .oe-block-unlock-timeline__year-heading {
	margin: 0 0 var(--oe-spacing-xsmall, 0.5rem);
}

/* Build animation: plays once (about 2.5s) when .is-visible is added. The
   line draws year by year (--i), the curves flow in (--n), each charge
   lights up and the glowing word charges. Text never moves or hides. */

.oe-block-unlock-timeline--strengths.is-ready:not(.is-visible) .oe-block-unlock-timeline__year::before {
	transform: scaleX(0);
}

.oe-block-unlock-timeline--strengths.is-ready.is-vertical:not(.is-visible) .oe-block-unlock-timeline__year::before {
	transform: scaleY(0);
}

.oe-block-unlock-timeline--strengths.is-ready:not(.is-visible) .oe-block-unlock-timeline__curve path {
	stroke-dashoffset: 1;
}

.oe-block-unlock-timeline--strengths.is-ready:not(.is-visible) .oe-block-unlock-timeline__charge {
	opacity: 0;
	transform: scale(0.3);
}

.oe-block-unlock-timeline--strengths.is-ready:not(.is-visible) .oe-block-unlock-timeline__glow {
	color: inherit;
	text-shadow: none;
}

.oe-block-unlock-timeline--strengths.is-visible .oe-block-unlock-timeline__year::before {
	transition: transform 0.5s linear calc(var(--i, 0) * 0.45s);
}

.oe-block-unlock-timeline--strengths.is-visible .oe-block-unlock-timeline__curve path {
	transition: stroke-dashoffset 0.5s var(--oe-ut-ease) calc(0.15s + var(--i, 0) * 0.45s + var(--n, 0) * 0.08s);
}

.oe-block-unlock-timeline--strengths.is-visible .oe-block-unlock-timeline__charge {
	transition:
		opacity 0.3s ease calc(0.45s + var(--i, 0) * 0.45s),
		transform 0.5s var(--oe-ut-pop) calc(0.45s + var(--i, 0) * 0.45s);
}

.oe-block-unlock-timeline--strengths.is-visible .oe-block-unlock-timeline__glow {
	transition: color 1s ease-out 0.2s, text-shadow 1.2s ease-out 0.2s;
}

@media (prefers-reduced-motion: reduce) {
	.oe-block-unlock-timeline--strengths .oe-block-unlock-timeline__year::before,
	.oe-block-unlock-timeline--strengths .oe-block-unlock-timeline__charge,
	.oe-block-unlock-timeline--strengths .oe-block-unlock-timeline__curve path,
	.oe-block-unlock-timeline--strengths .oe-block-unlock-timeline__glow {
		transition: none !important;
	}
	/* !important: beats the higher-specificity "not yet visible" states. */
	.oe-block-unlock-timeline--strengths .oe-block-unlock-timeline__year::before,
	.oe-block-unlock-timeline--strengths .oe-block-unlock-timeline__charge {
		opacity: 1 !important;
		transform: none !important;
	}
	.oe-block-unlock-timeline--strengths .oe-block-unlock-timeline__curve path {
		stroke-dashoffset: 0 !important;
	}
	.oe-block-unlock-timeline--strengths .oe-block-unlock-timeline__glow {
		color: var(--oe-ut-s-glow) !important;
		text-shadow:
			0 0 var(--oe-spacing-small, 0.75rem) color-mix(in srgb, var(--oe-ut-s-glow) 60%, transparent),
			0 0 var(--oe-spacing-large, 2rem) color-mix(in srgb, var(--oe-ut-s-track) 65%, transparent) !important;
	}
}