/**
 * DELIAN — motion layer.
 *
 * Additive, era-agnostic enhancement loaded after the era stylesheet. Every
 * effect is transform/opacity only, gated behind the `dl-js` class so the site
 * is fully readable without JavaScript, and disabled for
 * `prefers-reduced-motion: reduce`.
 *
 *  1. Tokens & keyframes    5. Cards & media
 *  2. Page furniture        6. Technical drawings
 *  3. Header & hero         7. Numbers & bands
 *  4. Reveal system         8. Reduced motion
 */

/* 1. Tokens & keyframes ---------------------------------------------------- */
:root {
	--dl-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--dl-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dl-kenburns {
	from {
		transform: scale(1.04) translate3d(0, 0, 0);
	}
	to {
		transform: scale(1.14) translate3d(-1.4%, -1%, 0);
	}
}

@keyframes dl-kenburns-soft {
	from {
		transform: scale(1.015) translate3d(0, 0, 0);
	}
	to {
		transform: scale(1.05) translate3d(-0.6%, -0.4%, 0);
	}
}

@keyframes dl-sheen {
	0% {
		background-position: 135% 0, 0 0;
	}
	45%,
	100% {
		background-position: -45% 0, 0 0;
	}
}

@keyframes dl-flow-dash {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -160px 0;
	}
}

@keyframes dl-cue-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(6px);
	}
}

@keyframes dl-cue-line {
	0% {
		transform: scaleY(0);
		opacity: 0;
	}
	35% {
		transform: scaleY(1);
		opacity: 1;
	}
	100% {
		transform: scaleY(1);
		opacity: 0;
	}
}

@keyframes dl-pulse-ring {
	0% {
		box-shadow: 0 0 0 0 rgba(var(--dl-accent-rgb, 125, 183, 19), 0.5);
	}
	70%,
	100% {
		box-shadow: 0 0 0 14px rgba(var(--dl-accent-rgb, 125, 183, 19), 0);
	}
}

/* 2. Page furniture -------------------------------------------------------- */
.dl-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 130;
	width: 100%;
	height: 3px;
	transform: scaleX(var(--dl-progress, 0));
	transform-origin: left center;
	background: linear-gradient(90deg, rgba(125, 183, 19, 0.7), var(--dl-accent, #7db713));
	pointer-events: none;
}

.dl-to-top {
	position: fixed;
	right: clamp(0.9rem, 3vw, 1.6rem);
	bottom: clamp(4.6rem, 8vw, 1.6rem);
	z-index: 110;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	background: #181818;
	border: 0;
	border-radius: var(--dl-radius, 0);
	color: #ffffff;
	cursor: pointer;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 260ms var(--dl-ease-soft), transform 260ms var(--dl-ease-soft), background 200ms linear;
	pointer-events: none;
}

.dl-to-top.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.dl-to-top:hover {
	background: var(--dl-accent, #7db713);
}

/* 3. Header & hero --------------------------------------------------------- */
.dl-js .dl-header {
	transition: padding 260ms var(--dl-ease-soft), box-shadow 260ms var(--dl-ease-soft), background 260ms linear;
}

.dl-js .dl-header.is-compact .dl-header__bar {
	padding-top: 0.55rem;
	padding-bottom: 0.45rem;
}

.dl-js .dl-header.is-compact .dl-brand__name {
	font-size: clamp(1.3rem, 1.9vw, 1.75rem);
	transition: font-size 260ms var(--dl-ease-soft);
}

.dl-js .dl-header.is-compact .dl-brand__tagline {
	opacity: 0;
	transition: opacity 200ms linear;
}

/* Hero: slow photographic drift behind the scrim. */
.dl-js .dl-hero::before {
	content: "";
	position: absolute;
	inset: -3%;
	z-index: 0;
	background-image: var(--dl-hero-image, none);
	background-size: cover;
	background-position: center;
	animation: dl-kenburns-soft 52s var(--dl-ease-soft) infinite alternate;
	will-change: transform;
}

/* Full adds a stronger drift; off leaves the photograph still. */
.dl-motion--full.dl-js .dl-hero::before {
	animation: dl-kenburns 30s var(--dl-ease-soft) infinite alternate;
}

.dl-motion--off.dl-js .dl-hero::before {
	animation: none;
}

.dl-js .dl-hero {
	background-image: none;
}

/* Headline sheen: a slow highlight crossing the type.
   Two layers — a solid white base plus a moving highlight band — so the type is
   never transparent, whatever position the animation is in. */
.dl-motion--full.dl-js .dl-hero__title {
	background-image:
		linear-gradient(100deg, rgba(255, 255, 255, 0) 42%, rgba(223, 242, 194, 0.95) 50%, rgba(255, 255, 255, 0) 58%),
		linear-gradient(#ffffff, #ffffff);
	background-size: 220% 100%, 100% 100%;
	background-repeat: no-repeat, no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: dl-sheen 9s linear infinite;
}

/* Subtle and off keep the headline solid white — no sweeping highlight. Only the
   background and the sheen animation are reset; entrance transitions must live. */
.dl-motion--subtle.dl-js .dl-hero__title,
.dl-motion--off.dl-js .dl-hero__title {
	background-image: none;
	color: #ffffff;
	animation: none;
}

/* Corner brackets on the hero media panel. */
.dl-js .dl-hero__media,
.dl-js .dl-feature__media {
	position: relative;
}

.dl-js .dl-hero__media::before,
.dl-js .dl-hero__media::after,
.dl-js .dl-feature__media::before,
.dl-js .dl-feature__media::after {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	border: 2px solid var(--dl-accent, #7db713);
	z-index: 3;
	pointer-events: none;
}

.dl-js .dl-hero__media::before,
.dl-js .dl-feature__media::before {
	top: 10px;
	left: 10px;
	border-right: 0;
	border-bottom: 0;
}

.dl-js .dl-hero__media::after,
.dl-js .dl-feature__media::after {
	right: 10px;
	bottom: 10px;
	border-left: 0;
	border-top: 0;
}

/* Scroll cue: drawing line above a gently moving chevron. */
.dl-js .dl-hero__scroll::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	width: 1px;
	height: 46px;
	background: currentColor;
	transform-origin: bottom center;
	animation: dl-cue-line 3.8s var(--dl-ease-soft) infinite;
}

.dl-js .dl-hero__scroll .dl-icon,
.dl-js .dl-hero__scroll svg {
	animation: dl-cue-bounce 3.8s var(--dl-ease-soft) infinite;
}

.dl-motion--off.dl-js .dl-hero__scroll::before,
.dl-motion--off.dl-js .dl-hero__scroll .dl-icon,
.dl-motion--off.dl-js .dl-hero__scroll svg {
	animation: none;
}

/* Pointer spotlight on dark bands. */
.dl-js [data-dl-spotlight] {
	position: relative;
	isolation: isolate;
}

.dl-motion--full.dl-js [data-dl-spotlight]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(320px circle at var(--dl-mx, 50%) var(--dl-my, 0%), rgba(var(--dl-accent-rgb, 125, 183, 19), 0.16), transparent 68%);
	opacity: 0;
	transition: opacity 300ms linear;
	pointer-events: none;
}

.dl-js [data-dl-spotlight].is-active::after {
	opacity: 1;
}

.dl-js [data-dl-spotlight] > * {
	position: relative;
	z-index: 2;
}

/* 4. Reveal system --------------------------------------------------------- */
.dl-motion--subtle.dl-js [data-dl-reveal],
.dl-motion--full.dl-js [data-dl-reveal] {
	opacity: 0;
	will-change: transform, opacity;
}

/* Subtle: one short fade, no cascade — nothing that reads as a looping animation. */
.dl-motion--subtle.dl-js [data-dl-reveal] {
	transform: translate3d(0, 18px, 0);
	transition:
		opacity 600ms ease var(--dl-delay, 0ms),
		transform 700ms var(--dl-ease-out) var(--dl-delay, 0ms);
}

.dl-motion--full.dl-js [data-dl-reveal] {
	transform: translate3d(0, 26px, 0);
	transition:
		opacity 700ms var(--dl-ease-out) var(--dl-delay, 0ms),
		transform 800ms var(--dl-ease-out) var(--dl-delay, 0ms);
}

.dl-motion--subtle.dl-js [data-dl-reveal].is-revealed,
.dl-motion--full.dl-js [data-dl-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Headings and section titles rise out of a mask.
   The hero headline is deliberately not in this group: its words rise one by one
   out of their own masks (cinematic layer) and the block itself is choreographed
   by the `is-entered` entrance. A container mask here has no release rule, so it
   would hide the page's H1 for good. */
.dl-motion--subtle.dl-js .dl-section-head__title,
.dl-motion--full.dl-js .dl-section-head__title,
.dl-motion--subtle.dl-js .dl-archive-head__title,
.dl-motion--full.dl-js .dl-archive-head__title,
.dl-motion--subtle.dl-js .dl-credentials__headline,
.dl-motion--full.dl-js .dl-credentials__headline,
.dl-motion--subtle.dl-js .dl-specialists__title,
.dl-motion--full.dl-js .dl-specialists__title,
.dl-motion--subtle.dl-js .dl-feature__title,
.dl-motion--full.dl-js .dl-feature__title,
.dl-motion--subtle.dl-js .dl-footer__cta-title,
.dl-motion--full.dl-js .dl-footer__cta-title {
	clip-path: inset(0 0 105% 0);
	transition: clip-path 1000ms var(--dl-ease-out) var(--dl-delay, 0ms);
}

/* Guarantee at every level: the hero headline is never masked. */
.dl-motion--subtle.dl-js .dl-hero__title,
.dl-motion--full.dl-js .dl-hero__title,
.dl-motion--off.dl-js .dl-hero__title,
.dl-js .dl-hero__title {
	clip-path: none;
}

.dl-motion--subtle.dl-js .dl-section-head__title.is-revealed,
.dl-motion--full.dl-js .dl-section-head__title.is-revealed,
.dl-motion--subtle.dl-js .dl-archive-head__title.is-revealed,
.dl-motion--full.dl-js .dl-archive-head__title.is-revealed,
.dl-motion--subtle.dl-js .dl-credentials__headline.is-revealed,
.dl-motion--full.dl-js .dl-credentials__headline.is-revealed,
.dl-motion--subtle.dl-js .dl-specialists__title.is-revealed,
.dl-motion--full.dl-js .dl-specialists__title.is-revealed,
.dl-motion--subtle.dl-js .dl-feature__title.is-revealed,
.dl-motion--full.dl-js .dl-feature__title.is-revealed,
.dl-motion--subtle.dl-js .dl-footer__cta-title.is-revealed,
.dl-motion--full.dl-js .dl-footer__cta-title.is-revealed {
	clip-path: inset(0 0 0 0);
}

/* The same release for a title the word-reveal script put in place itself
   (anything outside the reveal system). Without this the mask stayed closed and
   the heading never painted — the bug that hid the process title. */
.dl-motion--subtle.dl-js .dl-section-head__title.is-in,
.dl-motion--full.dl-js .dl-section-head__title.is-in,
.dl-motion--subtle.dl-js .dl-credentials__headline.is-in,
.dl-motion--full.dl-js .dl-credentials__headline.is-in,
.dl-motion--subtle.dl-js .dl-specialists__title.is-in,
.dl-motion--full.dl-js .dl-specialists__title.is-in,
.dl-motion--subtle.dl-js .dl-feature__title.is-in,
.dl-motion--full.dl-js .dl-feature__title.is-in,
.dl-motion--subtle.dl-js .dl-footer__cta-title.is-in,
.dl-motion--full.dl-js .dl-footer__cta-title.is-in {
	clip-path: inset(0 0 0 0);
}

/* Green rule that draws under section titles. */
.dl-motion--subtle.dl-js .dl-section-head__title::after,
.dl-motion--full.dl-js .dl-section-head__title::after,
.dl-motion--subtle.dl-js .dl-specialists__title::after,
.dl-motion--full.dl-js .dl-specialists__title::after,
.dl-motion--subtle.dl-js .dl-credentials__headline::after,
.dl-motion--full.dl-js .dl-credentials__headline::after {
	content: "";
	display: block;
	width: 84px;
	height: 4px;
	margin-top: 0.85rem;
	background: var(--dl-accent, #7db713);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 800ms var(--dl-ease-out) calc(var(--dl-delay, 0ms) + 220ms);
}

.dl-motion--subtle.dl-js .dl-section-head__title.is-revealed::after,
.dl-motion--full.dl-js .dl-section-head__title.is-revealed::after,
.dl-motion--subtle.dl-js .dl-specialists__title.is-revealed::after,
.dl-motion--full.dl-js .dl-specialists__title.is-revealed::after,
.dl-motion--subtle.dl-js .dl-credentials__headline.is-revealed::after,
.dl-motion--full.dl-js .dl-credentials__headline.is-revealed::after {
	transform: scaleX(1);
}

.dl-body--industrial .dl-section-head__title::after,
.dl-body--industrial .dl-credentials__headline::after {
	margin-left: auto;
	margin-right: auto;
	transform-origin: center;
}

/* Off: headings and their rules do not animate at all. */
.dl-motion--off.dl-js .dl-section-head__title,
.dl-motion--off.dl-js .dl-archive-head__title,
.dl-motion--off.dl-js .dl-credentials__headline,
.dl-motion--off.dl-js .dl-specialists__title,
.dl-motion--off.dl-js .dl-feature__title,
.dl-motion--off.dl-js .dl-footer__cta-title {
	clip-path: none;
	transition: none;
}

.dl-motion--off.dl-js .dl-section-head__title::after,
.dl-motion--off.dl-js .dl-specialists__title::after,
.dl-motion--off.dl-js .dl-credentials__headline::after {
	transform: none;
	transition: none;
}

/* 5. Cards & media --------------------------------------------------------- */
.dl-js .dl-card {
	transition:
		transform 420ms var(--dl-ease-out),
		border-color 260ms linear,
		box-shadow 420ms var(--dl-ease-out);
}

.dl-js .dl-card:hover {
	transform: translate3d(0, -8px, 0);
}

.dl-js .dl-card__media {
	position: relative;
	overflow: hidden;
}

.dl-js .dl-card__media > *,
.dl-js .dl-card__media img,
.dl-js .dl-card__media .dl-ph__media {
	transition: transform 700ms var(--dl-ease-out);
}

.dl-js .dl-card:hover .dl-card__media img,
.dl-js .dl-card:hover .dl-card__media .dl-ph__media,
.dl-js .dl-gallery__item:hover img {
	transform: scale(1.05);
}

/* Sheen sweeping across the card image on hover. */
.dl-motion--full.dl-js .dl-card__media::after {
	content: "";
	position: absolute;
	top: -60%;
	left: -30%;
	width: 40%;
	height: 220%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
	transform: translateX(-140%) rotate(8deg);
	transition: transform 900ms var(--dl-ease-out);
	pointer-events: none;
	z-index: 4;
}

.dl-motion--full.dl-js .dl-card:hover .dl-card__media::after {
	transform: translateX(320%) rotate(8deg);
}

.dl-js .dl-card__title a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 420ms var(--dl-ease-out);
}

.dl-js .dl-card:hover .dl-card__title a {
	background-size: 100% 1px;
}

/* Buttons: light sweep plus arrow slide. */
.dl-js .dl-btn {
	position: relative;
	overflow: hidden;
	transition:
		transform 260ms var(--dl-ease-out),
		background 220ms linear,
		border-color 220ms linear,
		color 220ms linear;
}

.dl-motion--full.dl-js .dl-btn::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -20%;
	width: 32%;
	height: 200%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transform: translateX(-180%) rotate(10deg);
	transition: transform 700ms var(--dl-ease-out);
	pointer-events: none;
}

.dl-js .dl-btn:hover::after,
.dl-js .dl-btn:focus-visible::after {
	transform: translateX(420%) rotate(10deg);
}

.dl-js .dl-btn:hover {
	transform: translate3d(0, -2px, 0);
}

.dl-js .dl-link .dl-icon,
.dl-js .dl-card__action .dl-icon {
	transition: transform 320ms var(--dl-ease-out);
}

.dl-js .dl-link:hover .dl-icon,
.dl-js .dl-card:hover .dl-card__action .dl-icon {
	transform: translateX(5px);
}

/* Floating inquiries benefit from a soft pulse on the primary action. */
.dl-motion--full.dl-js .dl-inquiry__form-wrap .dl-btn--primary {
	animation: dl-pulse-ring 3.4s var(--dl-ease-soft) infinite;
}

/* 6. Technical drawings ---------------------------------------------------- */
.dl-js .dl-ph__svg.is-drawing .dl-ph__art {
	stroke-dasharray: 2400;
	stroke-dashoffset: 2400;
	animation: dl-draw 2600ms var(--dl-ease-out) var(--dl-draw-delay, 0ms) forwards;
}

@keyframes dl-draw {
	to {
		stroke-dashoffset: 0;
	}
}

/* Process rail: a moving dashed line reads as flowing slurry. */
.dl-js .dl-flow__list {
	background-image: linear-gradient(90deg, var(--dl-accent, #7db713) 0 26px, transparent 26px 46px);
	background-repeat: repeat-x;
	background-size: 46px 3px;
	background-position: 0 0;
}

/* The process rail reads as flowing slurry: gentle by default, faster and richer
   at the full level, still when motion is switched off. */
.dl-js .dl-flow__list {
	animation: dl-flow-dash 4.6s linear infinite;
}

.dl-motion--full.dl-js .dl-flow__list {
	animation: dl-flow-dash 2.4s linear infinite;
}

.dl-motion--off.dl-js .dl-flow__list {
	animation: none;
}

.dl-js .dl-flow__stage::before {
	transition: transform 700ms var(--dl-ease-out) var(--dl-delay, 0ms);
}

.dl-js .dl-flow__stage.is-revealed .dl-flow__icon {
	transition: transform 420ms var(--dl-ease-out), background 260ms linear, color 260ms linear;
}

.dl-js .dl-flow__stage:hover .dl-flow__icon {
	transform: translateY(-3px) rotate(-4deg);
}

/* 7. Numbers & bands ------------------------------------------------------- */
.dl-js .dl-credentials__value,
.dl-js .dl-results__icon,
.dl-js .dl-capability__icon {
	--dl-accent-rgb: 125, 183, 19;
}

.dl-js .dl-credentials__figure.is-counting .dl-credentials__value {
	animation: dl-pulse-ring 1.6s var(--dl-ease-soft) 2;
}

.dl-body--industrial .dl-credentials__value {
	transition: color 300ms linear;
}

/* 8. Reduced motion -------------------------------------------------------- */
.dl-motion-paused *,
.dl-hero.is-out-of-view,
.dl-hero.is-out-of-view * {
	animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
	.dl-js .dl-hero::before,
	.dl-js .dl-hero__title,
	.dl-js .dl-hero__scroll::before,
	.dl-js .dl-hero__scroll .dl-icon,
	.dl-js .dl-hero__scroll svg,
	.dl-js .dl-flow__list,
	.dl-js .dl-inquiry__form-wrap .dl-btn--primary,
	.dl-js .dl-credentials__figure.is-counting .dl-credentials__value {
		animation: none;
	}

	.dl-js [data-dl-reveal],
	.dl-js .dl-section-head__title,
	.dl-js .dl-archive-head__title,
	.dl-js .dl-credentials__headline,
	.dl-js .dl-specialists__title,
	.dl-js .dl-feature__title,
	.dl-js .dl-footer__cta-title {
		opacity: 1;
		transform: none;
		clip-path: none;
	}

	.dl-js .dl-section-head__title::after,
	.dl-js .dl-specialists__title::after,
	.dl-js .dl-credentials__headline::after {
		transform: scaleX(1);
	}

	.dl-js .dl-card:hover,
	.dl-js .dl-btn:hover,
	.dl-js .dl-card:hover .dl-card__media img,
	.dl-js .dl-card:hover .dl-card__media .dl-ph__media {
		transform: none;
	}

	.dl-js .dl-card__media::after,
	.dl-js .dl-btn::after {
		display: none;
	}

	.dl-js .dl-ph__svg.is-drawing .dl-ph__art {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		animation: none;
	}

	.dl-scroll-progress {
		display: none;
	}
}

/**
 * Entrance choreography.
 *
 * The `is-entered` class is added by the inline bootstrap in header.php (with a
 * 900 ms safety timer), so the hero always animates in even if the theme's main
 * script fails, and can never be left hidden. Transitions are used rather than a
 * keyframe animation because a stalled animation clock would otherwise strand
 * the content in its hidden start state.
 */
.dl-motion--subtle.dl-js .dl-hero__text > *,
.dl-motion--full.dl-js .dl-hero__text > *,
.dl-motion--subtle.dl-js .dl-archive-head > .dl-container > *,
.dl-motion--full.dl-js .dl-archive-head > .dl-container > * {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition:
		opacity 640ms var(--dl-ease-out),
		transform 700ms var(--dl-ease-out);
}

.dl-motion--subtle.dl-js .dl-hero.is-entered .dl-hero__text > *,
.dl-motion--full.dl-js .dl-hero.is-entered .dl-hero__text > *,
.dl-motion--subtle.dl-js .dl-archive-head.is-entered > .dl-container > *,
.dl-motion--full.dl-js .dl-archive-head.is-entered > .dl-container > * {
	opacity: 1;
	transform: none;
}

/* Stagger: kicker → headline → supporting copy → buttons → index rows. */
.dl-js .dl-hero__kicker {
	transition-delay: 70ms !important;
}

.dl-js .dl-hero__title {
	transition-delay: 160ms !important;
}

.dl-js .dl-hero__subtitle {
	transition-delay: 320ms !important;
}

.dl-js .dl-hero__text-body {
	transition-delay: 420ms !important;
}

.dl-js .dl-hero__actions {
	transition-delay: 520ms !important;
}

.dl-js .dl-hero__index {
	transition-delay: 620ms !important;
}

.dl-js .dl-archive-head > .dl-container > *:nth-child(2) {
	transition-delay: 120ms !important;
}

.dl-js .dl-archive-head > .dl-container > *:nth-child(3) {
	transition-delay: 200ms !important;
}

.dl-js .dl-archive-head > .dl-container > *:nth-child(4) {
	transition-delay: 280ms !important;
}

/* The hero media, the flow visualisation and the scroll cue follow a step behind. */
.dl-motion--subtle.dl-js .dl-hero__media,
.dl-motion--full.dl-js .dl-hero__media {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity 760ms var(--dl-ease-out) 240ms, transform 800ms var(--dl-ease-out) 240ms;
}

.dl-motion--subtle.dl-js .dl-hero.is-entered .dl-hero__media,
.dl-motion--full.dl-js .dl-hero.is-entered .dl-hero__media {
	opacity: 1;
	transform: none;
}

.dl-motion--subtle.dl-js .dl-hero__viz {
	--dl-enter-opacity: 0.5;
	opacity: 0;
	transition: opacity 1100ms ease 380ms;
}

.dl-motion--full.dl-js .dl-hero__viz {
	--dl-enter-opacity: 0.85;
	opacity: 0;
	transition: opacity 1100ms ease 380ms;
}

.dl-motion--subtle.dl-js .dl-hero.is-entered .dl-hero__viz,
.dl-motion--full.dl-js .dl-hero.is-entered .dl-hero__viz {
	opacity: var(--dl-enter-opacity);
}

.dl-motion--subtle.dl-js .dl-hero__scroll,
.dl-motion--full.dl-js .dl-hero__scroll {
	opacity: 0;
	transition: opacity 700ms ease 820ms, background 200ms linear, color 200ms linear;
}

.dl-motion--subtle.dl-js .dl-hero.is-entered .dl-hero__scroll,
.dl-motion--full.dl-js .dl-hero.is-entered .dl-hero__scroll {
	opacity: 1;
}

/* Off, and reduced motion: everything is painted from the first frame. */
.dl-motion--off.dl-js .dl-hero__text > *,
.dl-motion--off.dl-js .dl-archive-head > .dl-container > *,
.dl-motion--off.dl-js .dl-hero__media,
.dl-motion--off.dl-js .dl-hero__viz,
.dl-motion--off.dl-js .dl-hero__scroll,
.dl-motion--off.dl-js [data-dl-reveal] {
	opacity: 1;
	transform: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.dl-js .dl-hero__text > *,
	.dl-js .dl-archive-head > .dl-container > *,
	.dl-js .dl-hero__media,
	.dl-js .dl-hero__viz,
	.dl-js .dl-hero__scroll {
		opacity: 1;
		transform: none;
		transition: none;
	}
}