/*! Scroll notes — highlighted line + explanation card (2026-09-23).
 *  Articles (single-post) and any page whose content has a .hype-note.
 *  Behaviour: assets/js/pages/single-post.js. Markup contract: see the comment at the
 *  'article layout v2' block in single-post-parts.css.
 */

/* ------------------------------------------------------- highlight + note */

.hype-hl {
	padding: 0 2px;
	border-radius: 2px;
	background: linear-gradient(rgba(247, 148, 29, .26), rgba(247, 148, 29, .26)) no-repeat 0 100% / 100% 42%;
	color: inherit;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size .7s cubic-bezier(.2, .7, .2, 1);
}

.hype-hl::after {
	content: attr(data-n);
	display: inline-block;
	min-width: 16px;
	height: 16px;
	margin-left: 4px;
	padding: 0 4px;
	border-radius: 8px;
	background: #e08a1e;
	color: #fff;
	font: 700 10px/16px var(--font-display, Manrope, sans-serif);
	text-align: center;
	vertical-align: 3px;
}

.hype-hl--warn {
	background-image: linear-gradient(rgba(192, 57, 43, .14), rgba(192, 57, 43, .14));
}

.hype-hl--warn::after {
	background: #c0392b;
}

.hype-hl-row td {
	transition: background-color .4s;
}

.hype-note {
	position: relative;
	margin: 4px 0 32px;
	padding: 18px 20px 18px 22px;
	border: 1px solid #e3eaee;
	border-left: 3px solid #e08a1e;
	border-radius: 4px 12px 12px 4px;
	background: #fff;
	box-shadow: 0 8px 28px rgba(11, 29, 46, .08);
}

.hype-note::before {
	content: "";
	position: absolute;
	left: 24px;
	top: -7px;
	width: 12px;
	height: 12px;
	border-left: 1px solid #e3eaee;
	border-top: 1px solid #e3eaee;
	background: inherit;
	transform: rotate(45deg);
}

.hype-note__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font: 700 11px/1.4 var(--font-display, Manrope, sans-serif);
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--orange-text, #a25e00);
}

.hype-note__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e3eaee;
}

.hype-note__num {
	display: inline-block;
	min-width: 18px;
	height: 18px;
	border-radius: 9px;
	background: #e08a1e;
	color: #fff;
	font-size: 10px;
	line-height: 18px;
	letter-spacing: 0;
	text-align: center;
}

.hype-note__big {
	font: 800 clamp(34px, 3.4vw, 44px)/1 var(--font-display, Manrope, sans-serif);
	letter-spacing: -.03em;
	color: var(--navy, #0b1d2e);
}

.hype-note__title {
	margin: 6px 0 8px;
	font: 700 18px/1.3 var(--font-display, Manrope, sans-serif);
	color: var(--navy, #0b1d2e);
}

/* !important: theme.css pins article paragraphs to 17px with !important */
body.wp-theme-hype.single-post .hype-article-body .hype-note p.hype-note__body {
	margin: 0 !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
}

.hype-note--warn {
	border-left-color: #c0392b;
	background: #fff8f7;
}

.hype-note--warn .hype-note__eyebrow {
	color: #c0392b;
}

.hype-note--warn .hype-note__num {
	background: #c0392b;
}

/* mobile/tablet — the highlighter runs, then the note unfolds in place */
.hype-hl {
	background-size: 0% 42%;
}

.hype-hl.is-seen {
	background-size: 100% 42%;
}

.hype-hl.is-on {
	background-size: 100% 100%;
}

.hype-hl-row.is-on td {
	background: rgba(247, 148, 29, .26);
}

.hype-note {
	opacity: 0;
	clip-path: inset(0 0 100% 0 round 12px);
	transform: translateY(-6px);
	transition: clip-path .7s cubic-bezier(.2, .7, .2, 1), opacity .35s, transform .7s cubic-bezier(.2, .7, .2, 1);
}

.hype-note.is-seen {
	opacity: 1;
	clip-path: inset(-40px round 12px);
	transform: none;
}

/* desktop — the note sits in the rail, level with its line */
@media (min-width: 1025px) {
	.hype-article-body {
		position: relative;
	}

	.hype-article-grid .hype-note {
		position: absolute;
		left: calc(100% + 48px);
		z-index: 2;
		width: var(--hype-rail-w, 320px);
		margin: 0;
	}

	.hype-article-grid .hype-note::before {
		left: -51px;
		top: 22px;
		width: 48px;
		height: 1px;
		border: 0;
		background: #e08a1e;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .5s .15s cubic-bezier(.2, .7, .2, 1);
	}

	.hype-article-grid .hype-note::after {
		content: "";
		position: absolute;
		left: -55px;
		top: 19px;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #e08a1e;
		opacity: 0;
		transition: opacity .2s;
	}

	.hype-article-grid .hype-note--warn::before,
	.hype-article-grid .hype-note--warn::after {
		background: #c0392b;
	}

	.hype-article-grid .hype-note,
	.hype-article-grid .hype-note.is-seen {
		opacity: 0;
		clip-path: none;
		transform: translateX(14px);
		pointer-events: none;
		transition: opacity .45s, transform .6s cubic-bezier(.2, .7, .2, 1);
	}

	.hype-article-grid .hype-note.is-on {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	.hype-article-grid .hype-note.is-on::before {
		transform: scaleX(1);
	}

	.hype-article-grid .hype-note.is-on::after {
		opacity: 1;
	}

	.hype-article-grid .hype-hl-row.is-on {
		outline: 2px solid #e08a1e;
		outline-offset: -1px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hype-hl,
	.hype-note,
	.hype-note::before,
	.hype-tick::before {
		transition: none !important;
	}
}