/* =========================================================================
   PAGE — Home (index.html)
   ========================================================================= */

.hero {
	position: relative;
	padding-block: clamp(3rem, 2rem + 6vw, 7rem) var(--space-section);
	overflow: hidden;
}
.hero__inner {
	display: grid;
	gap: var(--space-block);
	align-items: center;
}
.hero__copy {
	max-width: 44rem;
}
.hero__eyebrow {
	margin-bottom: 1.75rem;
}
.hero__title {
	margin-bottom: 2rem;
}
/* The one plain sentence on the page: what this actually is, stated before
   the copy starts playing with negations. Sized between lead and body so it
   reads as explanation, not as another claim. */
.hero__intro {
	max-width: 42ch;
	margin-bottom: 1.75rem;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
	line-height: 1.6;
	color: var(--color-ink-muted);
}
.hero__intro strong {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-ink);
}

.hero__negations {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
	color: var(--color-ink-muted);
	margin-bottom: 1.75rem;
}
.hero__pitch {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2rem);
	letter-spacing: -0.02em;
	margin-bottom: 2.5rem;
}
.hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
}
.hero__mark {
	display: none;
	justify-self: center;
	position: relative;
	opacity: 0.95;
	/* Both layers of the figure are absolutely positioned, so nothing is left
	   in flow to give this box a width — it has to be stated. */
	width: min(30rem, 100%);
}

/* ─── HERO ILLUSTRATION ───────────────────────────────────────────────────
   A square stage: the dial fills it, the mark sits on top and slightly left,
   the way the logo already leans. Everything scales off the stage width, so
   the composition holds at every size.
   ----------------------------------------------------------------------- */
.hero__figure {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
}
.hero__dial,
.hero__logo {
	grid-area: 1 / 1;
}
.hero__dial {
	width: 100%;
	height: 100%;
	overflow: visible;
}
.hero__logo {
	width: 62%;
	height: auto;
	/* The lens sits left of centre in the artwork; nudge it so it lands over
	   the middle of the dial rather than the middle of the PNG. */
	margin-left: 8%;
}

/* The 30 days. Quiet by default — this is the grid the mark reads, not the
   headline. */
.hero__days {
	stroke: color-mix(in srgb, var(--color-antraciet) 34%, transparent);
	stroke-width: 2.5;
}
/* One day, marked. */
.hero__today {
	stroke: var(--color-petrol);
	stroke-width: 6;
	stroke-linecap: round;
}
.hero__ring {
	stroke: color-mix(in srgb, var(--color-antraciet) 12%, transparent);
	stroke-width: 1.5;
}
.hero__ring--inner {
	stroke-dasharray: 2 7;
}
/* The one variable we take out: outlined, deliberately empty. */
.hero__void {
	stroke: var(--color-ink-faint);
	stroke-width: 1.5;
	stroke-dasharray: 4 6;
}
.hero__bubble {
	fill: var(--color-fluo-soft);
}

/* ─── HERO MOTION ─────────────────────────────────────────────────────────
   The choreography of the opening. The generic stagger lives in
   assets/css/motion.css; what follows only re-times it for this page, because the
   title here is set in two lines that should land before the rest follows.
   ----------------------------------------------------------------------- */

/* The title hands its motion to the individual lines. */
.hero__title {
	animation: none;
}
.hero__line {
	display: block;
	overflow: hidden;
	/* Display type runs at line-height 0.94, so the clipping box needs a
	   sliver of room or it shaves the ascenders. */
	padding-block: 0.1em;
	margin-block: -0.1em;
}
.hero__line > span {
	display: block;
	animation: enter-line var(--dur-enter) var(--ease-out) both;
}
.hero__line:nth-child(1) > span {
	animation-delay: 120ms;
}
.hero__line:nth-child(2) > span {
	animation-delay: 200ms;
}

/* Between the second title line (200ms) and the first negation (340ms). */
.hero__intro {
	animation-delay: 280ms;
}

.hero__negations > p:nth-child(1) {
	animation-delay: 340ms;
}
.hero__negations > p:nth-child(2) {
	animation-delay: 410ms;
}
.hero__negations > p:nth-child(3) {
	animation-delay: 480ms;
}
.hero__pitch {
	animation-delay: 560ms;
}
.hero__pitch .u-underline {
	animation-delay: 900ms;
}
.hero__cta {
	animation-delay: 660ms;
}

/* The dial is drawn before the mark lands on it: the ticks fade in while the
   whole ring settles out of a slow quarter-turn. */
.hero__dial {
	animation: hero-dial-in 1.6s var(--ease-out) 180ms both;
}
.hero__today {
	animation: hero-today-in 700ms var(--ease-out) 1s both;
}
.hero__bubble {
	animation: hero-bubble 7s var(--ease-in-out) infinite;
}
.hero__bubble--2 {
	animation-duration: 9s;
	animation-delay: 1.2s;
}
.hero__bubble--3 {
	animation-duration: 11s;
	animation-delay: 2.4s;
}

@keyframes hero-dial-in {
	from {
		opacity: 0;
		transform: rotate(-24deg) scale(0.9);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes hero-today-in {
	from {
		opacity: 0;
		stroke-width: 0;
	}
	to {
		opacity: 1;
		stroke-width: 6;
	}
}
@keyframes hero-bubble {
	0%,
	100% {
		transform: translateY(0);
		opacity: 0.75;
	}
	50% {
		transform: translateY(-14px);
		opacity: 1;
	}
}

/* The mark arrives last and then never quite stands still — the magnifier
   hovering over the experiment. */
.hero__logo {
	animation:
		hero-mark-in 900ms var(--ease-out) 260ms both,
		hero-float 9s var(--ease-in-out) 1.4s infinite;
}
.hero__mark::before {
	content: '';
	position: absolute;
	inset: 24%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 46%, var(--color-fluo-soft), transparent 68%);
	filter: blur(34px);
	opacity: 0;
	animation:
		hero-aura 1.4s var(--ease-out) 420ms forwards,
		hero-breathe 11s var(--ease-in-out) 2.4s infinite;
}

@keyframes hero-mark-in {
	from {
		opacity: 0;
		transform: translate3d(0, 1.5rem, 0) scale(0.94);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes hero-float {
	0%,
	100% {
		transform: translate3d(0, 0, 0);
	}
	50% {
		transform: translate3d(0, -10px, 0);
	}
}
@keyframes hero-aura {
	from {
		opacity: 0;
		transform: scale(0.88);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes hero-breathe {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.55;
		transform: scale(1.06);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__line > span,
	.hero__logo,
	.hero__dial,
	.hero__today,
	.hero__bubble {
		animation: none;
		opacity: 1;
		transform: none;
	}
	.hero__mark::before {
		animation: none;
		opacity: 1;
	}
}

/* ─── IN HET KORT ─────────────────────────────────────────────────────────
   Three plain answers, sitting on the hero's own surface so they read as the
   end of the opening rather than the start of a new chapter. Cards, because
   three short answers side by side are easier to scan than three paragraphs.
   ----------------------------------------------------------------------- */
.kort__label {
	margin-bottom: 1.5rem;
}
.kort__grid {
	display: grid;
	gap: 1rem;
}
.kort__card {
	/* The hero surface is creme; the raised card needs a touch more contrast
	   than the hairline gives it on that background. */
	border-color: var(--color-line-strong);
}
.kort__title {
	margin-bottom: 0.75rem;
}
/* The accent tick that opens each answer — the same mark .welkom__specs uses,
   so the two lists read as the same voice. */
.kort__title::before {
	content: '';
	display: block;
	width: 1.5rem;
	height: 2px;
	margin-bottom: 0.9rem;
	background: var(--color-accent);
}
.kort__text {
	color: var(--color-ink-muted);
	line-height: 1.6;
}
.kort__more {
	margin-top: 1.75rem;
	color: var(--color-ink-muted);
}

@media (min-width: 48rem) {
	.kort__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

/* ─── HET EXPERIMENT ──────────────────────────────────────────────────────
   An observation sheet: premise on the left, the nine observations numbered
   on the right. On wide screens the premise stays put while the log scrolls
   past it, so the two halves read as one document rather than two blocks.
   ----------------------------------------------------------------------- */
.experiment__grid {
	display: grid;
	gap: var(--space-block);
}
.experiment__lead {
	margin-top: 1.25rem;
	max-width: 22ch;
}
.experiment__lead--muted {
	color: var(--color-ink-muted);
}
.experiment__rule {
	margin-top: 2.5rem;
}

/* The spec strip — the experiment stated as parameters, the way the workbook
   states them. */
.experiment__spec {
	margin: 0;
	display: grid;
	gap: 0.85rem;
	margin-top: 1.5rem;
}
.experiment__spec > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}
.experiment__spec dt {
	font-size: var(--text-label);
	letter-spacing: var(--text-label--letter-spacing);
	text-transform: uppercase;
	color: var(--color-ink-faint);
}
.experiment__spec dd {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-lead);
	letter-spacing: -0.02em;
}

.experiment__log-label {
	margin-bottom: 1.25rem;
}

/* Each observation is a ruled row, numbered by counter. The number is the
   quiet part; the question carries the weight. */
.observations {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: observation;
	/* The sheet's top edge carries the same fluogroen segment as .u-rule, so
	   the log reads as part of the brand's ruled-paper language. */
	background-image: linear-gradient(
		to right,
		var(--color-accent) 0 3.5rem,
		var(--color-line-strong) 3.5rem 100%
	);
	background-repeat: no-repeat;
	background-size: 100% 2px;
	background-position: top left;
}
.observations > li {
	counter-increment: observation;
	position: relative;
	display: grid;
	grid-template-columns: 3.25rem 1fr;
	align-items: baseline;
	gap: 0.5rem;
	padding-block: clamp(0.85rem, 0.6rem + 0.5vw, 1.15rem);
	border-bottom: var(--border-hair) solid var(--color-line-strong);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
	line-height: 1.3;
	text-wrap: balance;
}
.observations > li::before {
	content: counter(observation, decimal-leading-zero);
	font-size: var(--text-label);
	letter-spacing: var(--text-label--letter-spacing);
	font-weight: 600;
	color: var(--color-ink-faint);
	transition: color var(--dur-fast) var(--ease-out);
}
/* The highlighter pen, one row at a time: a fluogroen edge wipes in from the
   left on hover. Brandbook §06 — the accent marks, it never fills. */
.observations > li::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: 0;
	background: var(--color-accent);
	transition: width var(--dur-base) var(--ease-out);
}
.observations > li:hover::after {
	width: 100%;
}
.observations > li:hover::before {
	color: var(--color-ink);
}

/* Stagger the rows in behind the block's own reveal. */
.experiment__log.is-visible .observations > li {
	animation: enter-rise var(--dur-slow) var(--ease-out) both;
}
.experiment__log.is-visible .observations > li:nth-child(1) {
	animation-delay: 60ms;
}
.experiment__log.is-visible .observations > li:nth-child(2) {
	animation-delay: 115ms;
}
.experiment__log.is-visible .observations > li:nth-child(3) {
	animation-delay: 170ms;
}
.experiment__log.is-visible .observations > li:nth-child(4) {
	animation-delay: 225ms;
}
.experiment__log.is-visible .observations > li:nth-child(5) {
	animation-delay: 280ms;
}
.experiment__log.is-visible .observations > li:nth-child(6) {
	animation-delay: 335ms;
}
.experiment__log.is-visible .observations > li:nth-child(7) {
	animation-delay: 390ms;
}
.experiment__log.is-visible .observations > li:nth-child(8) {
	animation-delay: 445ms;
}
.experiment__log.is-visible .observations > li:nth-child(9) {
	animation-delay: 500ms;
}

@media (prefers-reduced-motion: reduce) {
	.experiment__log.is-visible .observations > li {
		animation: none;
	}
}

@media (min-width: 64rem) {
	.experiment__grid {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
		gap: clamp(3rem, 5vw, 6rem);
		align-items: start;
	}
	.experiment__premise {
		position: sticky;
		/* Clears the sticky site header. */
		top: 7rem;
	}
}

.kern {
	max-width: 46rem;
}
.kern__vraag {
	margin-top: 1.5rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-h2);
	line-height: 1.16;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.welkom {
	max-width: 46rem;
}
.welkom__sub {
	margin-top: 1rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-lead);
	color: var(--color-ink-muted);
}
.welkom__rule {
	margin-block: 2.5rem;
}
.welkom__specs {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.6rem;
	font-family: var(--font-display);
	font-weight: 600;
}
.welkom__specs li {
	position: relative;
	padding-left: 1.5rem;
}
.welkom__specs li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 0.7rem;
	height: 2px;
	background: var(--color-accent);
}
.welkom__cta {
	margin-top: 2.5rem;
	display: grid;
	gap: 0.9rem;
	justify-items: start;
}

/* The illustration earns its place from tablet up; below that the copy needs
   the whole screen more than the hero needs a picture. */
@media (min-width: 48rem) {
	.hero__mark {
		display: block;
	}
}

@media (min-width: 64rem) {
	.hero__inner {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
		gap: 3rem;
	}
}