/* ============================================================
   Domus — home hero  [domus_home_hero]
   Figma: Homepage 122:280 (desktop) / 737:1538 (mobile).

   Everything is measured in design pixels (--u = 1 px of the 1440 frame, from the content width like the wordmark,
   capped by the height so a short screen keeps it all in view) and anchored to the bottom of the hero, as in the
   design: the photo / video 450×599 ends 79 above the hero's end (overlapping the wordmark), the line 14 caps sits
   167 above it, the wordmark 25 above it. Mobile (375 frame): hero 698, photo 303×434 ending 120 above the end,
   the line over the top of the photo (2 lines, 333 wide), the stacked wordmark 30 above the end.
   The wordmark "DOMUS ERGO" (content width; mobile: the stacked one, 343 wide) is white with mix-blend-mode:
   difference, so it reads dark over the light background, inverted over the photo and black over the white page.
   Its own place is just under the hero (26 below it); position: sticky; bottom: 25px (mobile 30) holds it at the
   bottom of the screen first — over the hero — so it stays put while the hero scrolls away, turns black, and then
   leaves with the next section once its place arrives. Native sticky: no scroll script.
   ============================================================ */

.dm-hh {
	/* 1 design px: the content width / 1376, but never more than the screen height / 780 */
	--u: min(calc(min(100vw - var(--dm-sbw, 0px) - var(--dm-side, 32px) * 2, var(--dm-max, 1440px)) / 1376), calc(100vh / 780));
	position: relative;
	width: 100%;
	color: #fff;
	font-family: var(--dm-font, 'CF ModGrotesk'), 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}
.dm-hh *, .dm-hh *::before, .dm-hh *::after { box-sizing: border-box; }
.elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .dm-hh),
.elementor-widget:has(> .elementor-shortcode > .dm-hh) { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
.dm-hh p { margin: 0; padding: 0; }

/* full width, full screen height */
.dm-hh__stage {
	position: relative;
	width: calc(100vw - var(--dm-sbw, 0px));
	margin-left: calc(50% - (100vw - var(--dm-sbw, 0px)) / 2);
	height: 100vh;
	min-height: 560px;
	overflow: hidden;
	background: #d9d9d9;
}
/* The design's light: a conic gradient (a cone) centred on the screen, turning slowly in a full circle (60 s a
   turn); on desktop the mouse adds a little turn (--hh-r). Transforms only, so it never repaints.
   A background image / video, when set, covers it. */
/* The light: a WebGL aurora (home-hero.js) on a canvas in .dm-hh__silk. Under it, the design's gradient (whites toned to
   grey) as it stands when WebGL is not there. A background image / video, when set, covers both. */
.dm-hh__silk {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: conic-gradient(from 169.83deg at 49.03% 39.55%, #C2C0C0 0deg, #393535 164.05deg, #2E2A2A 222.96deg, #C9C4C4 276.56deg, #C8C4C4 308.46deg, #C2C0C0 360deg);
	pointer-events: none;
}
.dm-hh__silk canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.dm-hh__bg { position: absolute; inset: 0; }
.dm-hh__bg img, .dm-hh__bg video,
.dm-hh__media img, .dm-hh__media video { display: block; width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover; }

.dm-hh__media { position: absolute; left: 50%; bottom: calc(var(--u) * 79); width: calc(var(--u) * 450); height: calc(var(--u) * 599); transform: translateX(-50%); overflow: hidden; }
.dm-hh .dm-hh__line { position: absolute; z-index: 1; left: 50%; bottom: calc(var(--u) * 167); width: max-content; max-width: calc(100% - 64px); transform: translateX(-50%); font-size: 14px; line-height: 18px; text-align: center; text-transform: uppercase; color: #fff; mix-blend-mode: difference; }

/* the wordmark: its place is under the stage; sticky holds it at the bottom of the screen, over the stage, first */
.dm-hh__mark {
	position: sticky;
	bottom: calc(var(--u) * 25);
	z-index: 2;
	display: block;
	width: 100%;
	margin-top: 26px;
	color: #fff;
	mix-blend-mode: difference;
	pointer-events: none;
}
.dm-hh h1.dm-hh__mark { margin: calc(var(--u) * 26) 0 0; padding: 0; font-size: 0; line-height: 0; }
.dm-hh__mark svg { display: block; width: 100%; height: auto; }
.dm-hh__mark-m { display: none !important; }

/* entrance: the photo settles, the line and the wordmark come up */
@keyframes dm-hh-img { from { transform: scale(1.06); } to { transform: none; } }
@keyframes dm-hh-up { from { opacity: 0; transform: translate3d(0, 30px, 0); } to { opacity: 1; transform: none; } }
.dm-hh__media img, .dm-hh__media video { animation: dm-hh-img 1.8s cubic-bezier(.2, .7, .2, 1) both; }
.dm-hh__mark svg { animation: dm-hh-up 1.2s cubic-bezier(.16, 1, .3, 1) .2s both; }
.dm-hh__line { animation: dm-hh-fade 1s ease .5s both; }
@keyframes dm-hh-fade { from { opacity: 0; } to { opacity: 1; } }
/* after the preloader: start when it lifts (preloader.js fires domus:preloaded; html.dm-pre-on is set meanwhile) */
html.dm-pre-on .dm-hh__media img, html.dm-pre-on .dm-hh__media video, html.dm-pre-on .dm-hh__mark svg, html.dm-pre-on .dm-hh__line { animation-play-state: paused; }

@media (max-width: 767px) {
	/* the 375 frame: 1 design px = the screen width / 375 (capped by the height / 812) */
	.dm-hh { --u: min(calc((100vw - var(--dm-sbw, 0px)) / 375), calc(100svh / 812)); }
	.dm-hh__stage { height: calc(var(--u) * 698); min-height: 0; }
	.dm-hh__media { bottom: calc(var(--u) * 120); width: calc(var(--u) * 303); height: calc(var(--u) * 434); }
	.dm-hh .dm-hh__line { bottom: calc(var(--u) * 493); width: calc(var(--u) * 333); max-width: none; font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 18); }
	/* Held from the TOP of the screen (the address bar grows and shrinks at the bottom, so "bottom" would make it
	   slide): it sits over the hero, its bottom 30 above the hero's end (546 → 668), stays there while the page
	   scrolls, and leaves once it reaches its own place under the hero (724, as in the design: 178 of scrolling).
	   The hero keeps that room below it (a block after the wordmark), so the next section starts where the design has it. */
	.dm-hh::after { content: ''; display: block; height: calc(var(--u) * 178); } /* the room (content, not padding: sticky only travels inside the content box) */
	.dm-hh h1.dm-hh__mark { margin-top: calc(var(--u) * -152); }
	.dm-hh__mark { top: calc(var(--u) * 546); bottom: auto; }
	.dm-hh__mark-d { display: none !important; }
	.dm-hh__mark-m { display: block !important; }
}
@media (prefers-reduced-motion: reduce) {
	.dm-hh__media img, .dm-hh__media video, .dm-hh__mark svg, .dm-hh__line { animation: none; }
}