/*
 * DAM Motion Studio
 *
 * html.dmo-js is set in <head> only when motion will actually run, so the
 * hidden starting states below never apply for reduced-motion users, inside
 * the Elementor editor, or when the script fails (a 4s failsafe removes it).
 */

/* ── Hidden until the effect has set its own starting state ───────────── */

html.dmo-js :is(
	[data-dmo~="text-mask"], [data-dmo~="text-3d"], [data-dmo~="text-blur"],
	[data-dmo~="text-scramble"], [data-dmo~="img-reveal"], [data-dmo~="rise-3d"],
	[data-dmo~="text-giant"],
	.dmo-text-mask, .dmo-text-3d, .dmo-text-blur,
	.dmo-text-scramble, .dmo-img-reveal, .dmo-rise-3d, .dmo-text-giant
):not([data-dmo-ready]) {
	visibility: hidden;
}

/* ── Text ─────────────────────────────────────────────────────────────── */

.dmo-line,
.dmo-word,
.dmo-char {
	will-change: transform;
}

/* SplitText's line masks clip descenders unless given a little room. */
.dmo-line-mask {
	padding-block: 0.06em;
	margin-block: -0.06em;
}


/* Text roll: each letter carries a copy of itself one line below. */
.dmo-roll {
	display: inline-block;
	clip-path: inset(0 -0.1em);
	vertical-align: top;
}

.dmo-roll .dmo-char {
	text-shadow: 0 1.3em 0 currentColor;
}

/* ── Images ───────────────────────────────────────────────────────────── */

.dmo-reveal-frame {
	overflow: hidden;
}

.dmo-reveal-frame img {
	transform-origin: 50% 50%;
	will-change: transform;
}

.dmo-parallax-frame {
	overflow: hidden;
}

.dmo-parallax-frame img {
	will-change: transform;
}

/* clip-path hides the zoomed media but does not stop it widening the page. */
[data-dmo~="zoom-hero"],
.dmo-zoom-hero,
[data-dmo~="video-scrub"],
.dmo-video-scrub {
	overflow: clip;
	will-change: clip-path;
}

/* ── Marquee ──────────────────────────────────────────────────────────── */

.dmo-mq {
	overflow: hidden;
	max-width: 100%;
}

/* Elementor lays these out as flex rows; the track needs a plain block. */
.dmo-mq.e-con,
.dmo-mq > .e-con-inner,
.dmo-mq > .elementor-widget-container {
	display: block !important;
}

.dmo-mq__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.dmo-mq__item {
	flex: none;
	padding-inline-end: var(--dmo-gap, 0.6em);
	white-space: nowrap;
}

.dmo-mq__item > * {
	margin: 0;
}

/* ── Horizontal scroll & stacking cards ───────────────────────────────── */

.dmo-hscroll {
	overflow: hidden;
}

.dmo-hscroll__track {
	flex-wrap: nowrap !important;
	will-change: transform;
}

.dmo-hscroll__track > * {
	flex-shrink: 0;
}

.dmo-hscroll__track > .e-con {
	min-width: min(80vw, 520px);
}

.dmo-stack-card {
	transform-origin: 50% 0;
	will-change: transform;
}

/* ── Tilt ─────────────────────────────────────────────────────────────── */

.dmo-tilting {
	transform-style: preserve-3d;
	will-change: transform;
}

.dmo-glare {
	position: absolute;
	inset: 0;
	z-index: 5;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(circle at var(--dmo-gx, 50%) var(--dmo-gy, 50%), rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%);
	mix-blend-mode: soft-light;
	opacity: var(--dmo-go, 0);
}

/* ── Hover list with floating image ───────────────────────────────────── */

.dmo-hr__src {
	display: none !important;
}

.dmo-float {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9990;
	width: var(--dmo-float-w, clamp(200px, 22vw, 340px));
	aspect-ratio: 4 / 5;
	pointer-events: none;
	will-change: transform;
}

/* Scale and fade live on the inner layer; the outer one only moves. */
.dmo-float__inner {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 6px;
	opacity: 0;
	will-change: transform, opacity;
}

.dmo-float img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

.dmo-hr__row {
	transition: opacity 0.35s ease;
}

.dmo-hr.is-hovering .dmo-hr__row:not(.is-active) {
	opacity: 0.35;
}

/* ── Liquid fill ──────────────────────────────────────────────────────── */

.dmo-fill-host {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.dmo-fill {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	border-radius: 50%;
	background: var(--dmo-fill, var(--dmo-accent));
	pointer-events: none;
	transform: scale(0);
}

/* ── Cursor ───────────────────────────────────────────────────────────── */

html.dmo-cursor-on,
html.dmo-cursor-on body :not(input, textarea, select, [contenteditable="true"]) {
	cursor: none;
}

.dmo-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	pointer-events: none;
	color: var(--dmo-cursor);
}

.dmo-cursor--blend {
	mix-blend-mode: difference;
}

.dmo-cursor__dot,
.dmo-cursor__ring {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	will-change: transform;
}

.dmo-cursor__dot {
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: currentColor;
}

.dmo-cursor__ring {
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 1px solid currentColor;
}

/* Filled ring behind a label. Kept out of the blend group so the label reads. */
.dmo-cursor.has-label .dmo-cursor__ring {
	background: var(--dmo-accent);
	border-color: transparent;
}

.dmo-cursor.has-label {
	mix-blend-mode: normal;
}

/* Not inside the ring: the ring scales, and scaled text rasterises blurry. */
.dmo-cursor__label {
	position: absolute;
	top: 0;
	left: 0;
	font: 600 12px/1 system-ui, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	opacity: 0;
	will-change: transform;
}

.dmo-cursor.is-hidden {
	opacity: 0;
}

/* ── Scroll progress ──────────────────────────────────────────────────── */

.dmo-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99998;
	width: 100%;
	height: 3px;
	background: var(--dmo-accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}

/* ── WebGL particle cloud ─────────────────────────────────────────────── */

/* isolation lets the canvas sit at z-index -1: above the section's own
 * background, below its content, without touching the children's position. */
.dmo-gl-host {
	isolation: isolate;
}

.dmo-gl {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.dmo-gl.is-live {
	opacity: 1;
}

/* ── Giant type ───────────────────────────────────────────────────────── */

.dmo-giant {
	white-space: nowrap !important;
	overflow: hidden;
	line-height: 0.9 !important;
	padding-block: 0.04em;
}

.dmo-giant--outline {
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: max(1px, 0.012em) currentColor;
}

/* ── Preloader ────────────────────────────────────────────────────────── */

.dmo-preloader {
	display: none;
}

html.dmo-js .dmo-preloader {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	color: #fff;
	background: var(--dmo-pl-bg, #050505);
}

html.dmo-loading,
html.dmo-loading body {
	overflow: hidden !important;
}

.dmo-pl__inner {
	display: grid;
	justify-items: center;
	gap: 28px;
}

.dmo-pl__brand {
	overflow: hidden;
	font-size: clamp(28px, 4vw, 56px);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.1;
	text-transform: uppercase;
}

.dmo-pl__bar {
	width: min(210px, 50vw);
	height: 3px;
	background: rgba(255, 255, 255, 0.18);
}

.dmo-pl__bar span {
	display: block;
	height: 100%;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.dmo-pl__num {
	position: absolute;
	bottom: 0.08em;
	left: 0.12em;
	display: flex;
	height: 1em;
	overflow: hidden;
	font-size: clamp(64px, 11vw, 150px);
	font-weight: 300;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* flex-start, not the default stretch: a stretched column would be one digit
 * tall, and yPercent -10 would then move it a tenth of a digit. */
.dmo-pl__col {
	display: flex;
	flex-direction: column;
	align-self: flex-start;
}

.dmo-pl__col span {
	display: block;
	height: 1em;
}

@media (prefers-reduced-motion: reduce) {
	.dmo-cursor,
	.dmo-float {
		display: none;
	}
}