/* ============================================================
   Domus — preloader (printed after <body>, Domus → Preloader)
   Figma: Intro 20:189 (desktop) / 770:3098 (mobile): black screen, the mark (120×147) + the stacked wordmark (284),
   32 apart, centred (mobile: 67 + 160, 15 apart).

   The wordmark opens through a diagonal band (rising to the right, 32°): two black panels meet on a line across it
   (only a hair of the letters shows), then slide apart along the normal until it is all there — the band's final edges
   are the cuts the logo already has. Pure CSS from the first paint, transforms only (smooth while the page loads).
   preloader.js only lifts the panel when the duration (counted from the start of the page) is over.
   ============================================================ */

.dm-pre {
	--dm-pre-open: 230px;           /* how far each panel slides: enough to clear the wordmark */
	--dm-pre-reveal: 1.45s;         /* how long the band takes to open (Domus → Preloader → Logo reveal) */
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow: hidden;
	background: #000;
	color: #fff;
	transition: transform 1.1s cubic-bezier(.77, 0, .18, 1);
}
.dm-pre *, .dm-pre *::before, .dm-pre *::after { box-sizing: border-box; }
html.dm-pre-on, html.dm-pre-on body { overflow: hidden !important; }

.dm-pre__logo { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 32px; transform: translate(-50%, -50%); transition: opacity .45s ease; }
.dm-pre__mark { display: block; width: 120px; height: auto; }
.dm-pre__words { position: relative; display: block; overflow: hidden; }
.dm-pre__word { display: block; width: 284px; height: auto; animation: dm-pre-show .25s linear .45s both; }

/* the two panels, in a frame turned 32° about the band's centre line */
.dm-pre__veils { position: absolute; left: 50%; top: 46%; width: 0; height: 0; transform: rotate(-32deg); pointer-events: none; }
.dm-pre__veils::before,
.dm-pre__veils::after { content: ''; position: absolute; left: -600px; width: 1200px; height: 600px; background: #000; will-change: transform; animation: var(--dm-pre-reveal, 1.45s) cubic-bezier(.65, 0, .25, 1) .7s both; }
.dm-pre__veils::before { bottom: .5px; animation-name: dm-pre-up; }
.dm-pre__veils::after { top: .5px; animation-name: dm-pre-down; }
@keyframes dm-pre-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes dm-pre-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(var(--dm-pre-open) * -1), 0); } }
@keyframes dm-pre-down { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, var(--dm-pre-open), 0); } }

/* the lift (preloader.js adds .is-out) */
.dm-pre.is-out { transform: translate3d(0, -100%, 0); }
.dm-pre.is-out .dm-pre__logo { opacity: 0; }

@media (max-width: 767px) {
	.dm-pre { --dm-pre-open: 140px; }
	.dm-pre__logo { gap: 15px; }
	.dm-pre__mark { width: 67px; }
	.dm-pre__word { width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
	.dm-pre { transition: opacity .3s ease; }
	.dm-pre.is-out { transform: none; opacity: 0; }
	.dm-pre__word { animation: none; }
	.dm-pre__veils { display: none; }
}