/* ==========================================================================
   COMPONENTS — the shared vocabulary
   --------------------------------------------------------------------------
   topo · eyebrow · section head · buttons · chips · cards · hut tiles · grid ·
   search · pagination · breadcrumbs · filter · empty/placeholder · clouds ·
   CTA band · scroll reveals
   ========================================================================== */

/* ==========================================================================
   TOPO — contour lines from assets/img/topo.svg (via <use>)
   Colour = `color`. Tunables (inherited into the sprite):
     --topo-w      minor line width (px, non-scaling)     default 1
     --topo-wi     index line width                       default 1.6
     --topo-minor  minor line opacity                     default .55
     --topo-label  elevation label opacity                default .7
   ========================================================================== */

.sac-topo {
	display: block;
	fill: none;
	stroke: currentColor;   /* REQUIRED — <use> inherits it into the sprite */
	pointer-events: none;
	overflow: hidden;
	font-family: var(--font-mono);
}

/* "Survey sweep" — motion.js tags contour fields with .sac-survey and adds
   .is-surveyed when they scroll into view: the lines are drawn in from the
   left like a plotter. Without JS (or with reduced motion) nothing is hidden. */
.sac-survey {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 2.2s var(--ease-out) 0.1s;
}

.sac-survey.is-surveyed {
	clip-path: inset(0);
}

/* ==========================================================================
   EYEBROW — a Swiss trail blaze (white-red-white) + mono label
   ========================================================================== */

.sac-eyebrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	margin: 0 0 var(--space-4);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	line-height: 1.4;
	letter-spacing: var(--ls-mono);
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.sac-eyebrow::before {
	content: "";
	flex: none;
	width: 1.6rem;
	height: 0.75rem;
	background: linear-gradient(to bottom, var(--blaze-edge, #fff) 0 30%, var(--c-accent) 30% 70%, var(--blaze-edge, #fff) 70%);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-text) 18%, transparent);
}

.sac-eyebrow__index {
	color: var(--c-accent-text);
	font-weight: 600;
}

/* ==========================================================================
   SECTION HEAD — eyebrow, uppercase display title, link to the archive
   ========================================================================== */

.sac-shead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5) var(--space-7);
	margin-bottom: clamp(var(--space-7), 2rem + 3vw, var(--space-9));
}

.sac-shead__text {
	min-width: 0;
	max-width: 52rem;
}

.sac-shead__title {
	margin: 0;
	font-size: var(--fs-display);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	hyphens: auto;
	overflow-wrap: break-word;
}

.sac-shead__intro {
	max-width: 38rem;
	margin: var(--space-5) 0 0;
	font-size: var(--fs-lead);
	color: var(--c-text-muted);
}

/* ==========================================================================
   BUTTONS
   .sac-btn          solid trail-red pill; on hover the colour deepens and
                     the arrow nudges forward — nothing else moves
   .sac-btn--ghost   outlined
   .sac-btn--light   white on red (CTA)
   .sac-btn--block   full width
   .sac-link-arrow   text link with an arrow in a ring
   .sac-roundbtn     circular icon button (carousels)
   ========================================================================== */

.sac-btn {
	--btn-bg: var(--c-accent);
	--btn-fg: var(--c-on-accent);
	--btn-bd: var(--btn-bg);
	--btn-bg-hover: var(--c-accent-ink);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	min-height: 3.25rem;
	padding: 0 var(--space-6);
	color: var(--btn-fg);
	background: var(--btn-bg);
	border: 1px solid var(--btn-bd);
	border-radius: 999px;
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		background-color var(--dur-1) ease,
		border-color var(--dur-1) ease,
		color var(--dur-1) ease,
		transform var(--dur-1) ease;
}

.sac-btn svg {
	flex: none;
	width: 1.1rem;
	transition: transform var(--dur-1) var(--ease-out);
}

.sac-btn:hover,
.sac-btn:focus-visible {
	color: var(--btn-fg-hover, var(--btn-fg));
	background: var(--btn-bg-hover);
	border-color: var(--btn-bg-hover);
}

.sac-btn:hover svg {
	transform: translateX(3px);
}

.sac-btn:active {
	transform: scale(0.98);
}

.sac-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--c-heading);
	--btn-bd: var(--c-border-strong);
	--btn-bg-hover: var(--c-heading);
	--btn-fg-hover: var(--c-bg);
}

.sac-btn--light {
	--btn-bg: var(--c-white);
	--btn-fg: var(--c-accent-ink);
	--btn-bg-hover: var(--c-navy-900);
	--btn-fg-hover: var(--c-white);
}

.sac-btn--block {
	display: flex;
	width: 100%;
}

/* Text link + arrow ring. */
.sac-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--c-heading);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.sac-link-arrow svg {
	flex: none;
	box-sizing: content-box;
	width: 1rem;
	padding: 0.7rem;
	border: 1px solid var(--c-border-strong);
	border-radius: 50%;
	transition:
		border-color var(--dur-1) ease,
		box-shadow var(--dur-1) ease,
		color var(--dur-1) ease;
}

.sac-link-arrow:hover {
	color: var(--c-heading);
}

.sac-link-arrow:hover svg {
	color: var(--c-accent-text);
	border-color: var(--c-accent);
	box-shadow: var(--ring-hover);
}

/* Round icon button. */
.sac-roundbtn {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 3rem;
	height: 3rem;
	padding: 0;
	color: var(--c-heading);
	background: var(--c-surface);
	border: 1px solid var(--c-border-strong);
	border-radius: 50%;
	transition:
		border-color var(--dur-1) ease,
		box-shadow var(--dur-1) ease,
		color var(--dur-1) ease,
		transform var(--dur-1) ease,
		opacity var(--dur-1) ease;
}

.sac-roundbtn svg {
	width: 1.1rem;
	transition: transform var(--dur-1) var(--ease-out);
}

.sac-roundbtn:hover:not(:disabled) {
	color: var(--c-accent-text);
	border-color: var(--c-accent);
	box-shadow: var(--ring-hover);
}

.sac-roundbtn[data-sac-prev]:hover:not(:disabled) svg { transform: translateX(-2px); }
.sac-roundbtn[data-sac-next]:hover:not(:disabled) svg { transform: translateX(2px); }

.sac-roundbtn:active:not(:disabled) {
	transform: scale(0.96);
}

.sac-roundbtn:disabled {
	opacity: 0.35;
	cursor: default;
}

/* ==========================================================================
   CHIPS + RIBBON
   ========================================================================== */

.sac-chip {
	display: inline-flex;
	align-items: center;
	min-height: 1.6rem;
	padding: 0 var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-heading);
	border: 1px solid var(--c-border-strong);
	border-radius: 999px;
}

/* Category ribbon on card images. */
.sac-ribbon {
	position: absolute;
	z-index: 1;
	top: var(--space-4);
	left: 0;
	padding: var(--space-1) var(--space-3) var(--space-1) var(--space-4);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-on-accent);
	background: var(--c-accent);
}

/* ==========================================================================
   POST CARD
   ========================================================================== */

.sac-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	transition: border-color var(--dur-2) ease;
}

/* Hover never moves the card or changes its size — the frame darkens and the
   photo eases in a touch inside its fixed crop. */
.sac-card:hover {
	border-color: var(--c-border-strong);
}

.sac-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--c-surface-2);
	color: var(--c-topo);
}

.sac-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease-out);
}

/* Trail-red veil on hover (the image "is" the link). */
.sac-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-accent);
	opacity: 0;
	transition: opacity var(--dur-2) ease;
}

.sac-card:hover .sac-card__media img {
	transform: scale(1.025);
}

.sac-card:hover .sac-card__media::after {
	opacity: 0.12;
}

.sac-card__placeholder {
	width: 100%;
	height: 100%;
	--topo-minor: 0.6;
}

.sac-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--space-3);
	padding: var(--space-5) var(--space-5) var(--space-6);
}

.sac-card__meta {
	margin: 0;
	display: flex;
	gap: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.sac-card__title {
	margin: 0;
	font-size: var(--fs-h4);
	line-height: var(--lh-snug);
}

.sac-card__link {
	color: inherit;
	text-decoration: none;
}

/* Stretched link: the whole card is clickable, announced once. */
.sac-card__link::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
}

.sac-card__link:hover {
	color: inherit;
}

.sac-card:has(.sac-card__link:focus-visible) {
	outline: 2px solid var(--c-focus);
	outline-offset: 3px;
}

.sac-card__link:focus-visible {
	outline: 0;
}

.sac-card__excerpt {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.sac-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-3);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-accent-text);
}

.sac-card__more svg {
	width: 1rem;
	transition: transform var(--dur-2) var(--ease-out);
}

.sac-card:hover .sac-card__more svg {
	transform: translateX(3px);
}

/* ==========================================================================
   HUT TILE — portrait photo, name + Kanton on it, spot height
   ========================================================================== */

.sac-hut {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);   /* a long name must never widen the tile */
	height: 100%;
	color: var(--c-white);
	background: var(--c-navy-900);
	overflow: hidden;
	isolation: isolate;
}

.sac-hut > * {
	grid-area: 1 / 1;
}

.sac-hut__media {
	position: relative;
	z-index: -1;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	color: var(--c-white);
}

.sac-hut__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease-out);
}

/* Legibility gradient top + bottom. */
.sac-hut__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgb(7 13 24 / 0.62), transparent 42%),
		linear-gradient(to top, rgb(7 13 24 / 0.55), transparent 35%);
	transition: background-color var(--dur-2) ease;
}

.sac-hut:hover .sac-hut__media img {
	transform: scale(1.025);
}

.sac-hut:hover .sac-hut__media::after {
	background-color: color-mix(in srgb, var(--c-accent) 22%, transparent);
}

/* Contours surveyed over the photo on hover. */
.sac-hut__topo {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	--topo-minor: 0.5;
	--topo-label: 0.9;
	opacity: 0.85;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1.1s var(--ease-out);
}

.sac-hut:hover .sac-hut__topo {
	clip-path: inset(0);
}

.sac-hut__alt {
	position: absolute;
	z-index: 2;
	left: var(--space-5);
	bottom: var(--space-5);
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	margin: 0;
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

/* Map triangle (spot height). */
.sac-hut__alt::before {
	content: "";
	align-self: center;
	width: 0.62em;
	height: 0.54em;
	background: var(--c-accent);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.sac-hut__alt abbr {
	font-size: 0.6em;
	font-weight: 600;
	text-decoration: none;
	opacity: 0.85;
}

.sac-hut__body {
	align-self: start;
	padding: var(--space-5);
}

.sac-hut__title {
	margin: 0 0 var(--space-2);
	color: var(--c-white);
	font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
	line-height: 1.08;
	hyphens: auto;
	overflow-wrap: break-word;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

.sac-hut__link {
	color: inherit;
	text-decoration: none;
}

.sac-hut__link:hover {
	color: inherit;
}

.sac-hut__link::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
}

.sac-hut:has(.sac-hut__link:focus-visible) {
	outline: 3px solid var(--c-focus);
	outline-offset: -3px;
}

.sac-hut__link:focus-visible {
	outline: 0;
}

.sac-hut__canton {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.88;
}

.sac-hut__canton svg {
	width: 0.95rem;
}

/* ==========================================================================
   GRID (archives)
   ========================================================================== */

.sac-listing {
	padding-bottom: var(--section-y);
}

.sac-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(var(--space-5), 1rem + 2vw, var(--space-7));
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.sac-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sac-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Asymmetric rhythm: the middle column sits a step lower, like terraced
   contour bands (wide screens only). */
@media (min-width: 1024px) {
	.sac-grid__item:nth-child(3n + 2) {
		transform: translateY(var(--space-7));
	}

	.sac-grid {
		padding-bottom: var(--space-7);
	}
}

/* ==========================================================================
   SEARCH FORM
   ========================================================================== */

.sac-search {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 36rem;
	border-bottom: 2px solid var(--c-border-strong);
	transition: border-color var(--dur-2) ease;
}

.sac-search:focus-within {
	border-color: var(--c-accent);
}

.sac-search__input {
	flex: 1;
	min-width: 0;
	min-height: 3.5rem;
	padding: 0 var(--space-2) 0 0;
	background: transparent;
	border: 0;
	font-size: var(--fs-lead);
	color: var(--c-heading);
	outline: 0;
}

.sac-search__input::placeholder {
	color: var(--c-text-muted);
	opacity: 1;
}

.sac-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.sac-search__submit {
	display: grid;
	place-items: center;
	flex: none;
	width: 3rem;
	height: 3rem;
	padding: 0;
	color: var(--c-on-accent);
	background: var(--c-accent);
	border: 0;
	border-radius: 50%;
	transition: transform var(--dur-1) ease, background-color var(--dur-1) ease;
}

.sac-search__submit svg {
	width: 1.15rem;
}

.sac-search__submit:hover {
	background: var(--c-accent-ink);
}

.sac-search__submit:active {
	transform: scale(0.96);
}

/* ==========================================================================
   PAGINATION + PAGE LINKS
   ========================================================================== */

.sac-pagination {
	margin-top: var(--space-9);
}

.sac-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sac-pagination .page-numbers,
.sac-pagelinks .post-page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 3rem;
	height: 3rem;
	padding: 0 var(--space-3);
	color: var(--c-heading);
	border: 1px solid var(--c-border);
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
}

.sac-pagination .page-numbers svg {
	width: 1.05rem;
}

.sac-pagination a.page-numbers:hover,
.sac-pagelinks a.post-page-numbers:hover {
	border-color: var(--c-heading);
}

.sac-pagination .page-numbers.current,
.sac-pagelinks .post-page-numbers.current {
	color: var(--c-on-accent);
	background: var(--c-accent);
	border-color: var(--c-accent);
}

.sac-pagination .page-numbers.dots {
	border-color: transparent;
}

.sac-pagelinks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-7);
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.sac-breadcrumbs {
	margin-bottom: var(--space-6);
}

.sac-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.sac-breadcrumbs__item + .sac-breadcrumbs__item::before {
	content: "/";
	margin-right: var(--space-2);
	opacity: 0.5;
}

.sac-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.sac-breadcrumbs a:hover {
	color: var(--c-heading);
}

/* ==========================================================================
   FILTER CHIPS (category archive, tags)
   ========================================================================== */

.sac-filter {
	margin-bottom: var(--space-8);
}

.sac-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sac-filter__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 2.5rem;
	padding: 0 var(--space-4);
	color: var(--c-heading);
	border: 1px solid var(--c-border-strong);
	border-radius: 999px;
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
}

.sac-filter__chip:hover {
	color: var(--c-heading);
	border-color: var(--c-heading);
}

.sac-filter__chip[aria-current="page"] {
	color: var(--c-bg);
	background: var(--c-heading);
	border-color: var(--c-heading);
}

.sac-filter__count {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 400;
	opacity: 0.6;
}

/* ==========================================================================
   EMPTY STATES + PLACEHOLDER FLAG
   ========================================================================== */

.sac-empty {
	margin: 0;
	color: var(--c-text-muted);
}

.sac-empty--panel {
	display: grid;
	justify-items: center;
	gap: var(--space-4);
	padding: var(--space-9) var(--space-5);
	text-align: center;
	border: 1px dashed var(--c-border-strong);
}

.sac-empty--panel svg {
	width: 2.5rem;
	color: var(--c-topo);
}

/* Marks sample content that a feed will replace (⚠ Droptours). */
.sac-placeholder {
	position: relative;
}

.sac-placeholder__flag {
	position: absolute;
	z-index: 3;
	top: calc(var(--space-6) * -1);
	right: 0;
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-accent-text);
}

/* ==========================================================================
   CLOUDS — Clouds.png dissolving an image into the page
   Light: the PNG itself. Dark: the page colour masked by the same PNG, so the
   clouds turn into night. Both layers exist; --dkn crossfades them.
   ========================================================================== */

.sac-clouds {
	position: absolute;
	z-index: 1;
	inset: auto 0 -1em;
	height: 70%;
	pointer-events: none;
}

.sac-clouds::before,
.sac-clouds::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sac-clouds::before {
	background: var(--sac-clouds) center bottom / 100% auto no-repeat;
	opacity: calc(1 - var(--dkn));
}

.sac-clouds::after {
	background: var(--c-bg);
	-webkit-mask: var(--sac-clouds) center bottom / 100% auto no-repeat;
	mask: var(--sac-clouds) center bottom / 100% auto no-repeat;
	opacity: var(--dkn);
}

/* ==========================================================================
   CTA BAND — image, clouds descending from above, the red panel
   ========================================================================== */

.sac-cta {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 75svh;
	padding-block: clamp(10rem, 18vw, 16rem) var(--section-y);
	background: var(--c-navy-900) var(--sac-cta-bg, none) center / cover no-repeat;
	isolation: isolate;
	overflow: hidden;
}

/* Flipped to descend from the top. Flush to the edge and on its own layer —
   a flipped, late-loading background otherwise left a stale seam (v4 bug). */
.sac-cta__clouds {
	inset: 0 0 auto;
	height: 55%;
	transform: scaleY(-1);
	will-change: transform;
}

.sac-cta__inner {
	position: relative;
	z-index: 2;
}

.sac-cta__box {
	position: relative;
	width: min(100%, 40rem);
	padding: clamp(var(--space-6), 2rem + 2vw, var(--space-8));
	color: var(--c-on-accent);
	background: var(--sac-red-panel);
	overflow: hidden;
	isolation: isolate;
}

.sac-cta__topo {
	position: absolute;
	z-index: -1;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--c-white);
	--topo-minor: 0.45;   /* same "on red" values as the hero box */
	--topo-wi: 1.1;
	--topo-label: 0.5;
	opacity: 0.22;
}

.sac-cta__title {
	margin: 0 0 var(--space-4);
	color: inherit;
	font-size: var(--fs-h1);
	line-height: 0.98;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.sac-cta__text {
	margin: 0 0 var(--space-6);
	font-size: var(--fs-lead);
	opacity: 0.94;
}

/* ==========================================================================
   SCROLL REVEALS — [data-reveal] → .is-revealed (assets/js/motion.js)
   Only with JS, and never with reduced motion.
   ========================================================================== */

/* Shared entrance: fade + rise (hero box content, page titles). */
@keyframes sac-rise {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.js [data-reveal] {
		opacity: 0;
		translate: 0 2rem;
		transition:
			opacity var(--dur-3) var(--ease-out),
			translate var(--dur-3) var(--ease-out);
		transition-delay: calc(var(--i, 0) * 90ms);
	}

	.js [data-reveal].is-revealed {
		opacity: 1;
		translate: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sac-hut__topo,
	.js .sac-overlay .sac-overlay__topo {
		clip-path: none;
	}
}