/* Intro loader: a round mark pops in, the monogram reveals inside it, then the name slides out beside it
   (modelled on the "Scene" reference video). Pure CSS timeline, so it can never get stuck if JS fails.
   Total: 2.6s of animation, then the curtain lifts. */
.de-loader {
	position: fixed;
	inset: 0;
	z-index: 5000;
	display: none;
	place-items: center;
	background: #000;
	color: #fff;
	overflow: hidden;
}

html.de-loading .de-loader {
	display: grid;
	animation: de-lift 0.75s cubic-bezier(0.76, 0, 0.24, 1) 2.55s forwards;
}

html.de-loading,
html.de-loading body {
	overflow: hidden;
}

.de-loader__pair {
	display: flex;
	align-items: center;
	gap: 0;
	--mark: clamp(4.6rem, 9vw, 7.2rem);
}

/* the round mark */
.de-loader__mark {
	position: relative;
	flex: 0 0 auto;
	width: var(--mark);
	height: var(--mark);
	border-radius: 50%;
	background: var(--de-red, #ff0000);
	display: grid;
	place-items: center;
	transform: scale(0);
	animation:
		de-dot 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards,
		de-settle 0.9s ease-in-out 0.65s forwards;
}

.de-loader__mark img {
	width: 62%;
	height: auto;
	display: block;
	clip-path: inset(0 100% 0 0);
	animation: de-reveal 0.55s cubic-bezier(0.65, 0, 0.35, 1) 0.45s forwards;
}

/* the name: its box opens from 0 width, which pushes the mark to the left while the pair stays centred */
.de-loader__name {
	display: grid;
	grid-template-columns: 0fr;
	animation: de-open 0.7s cubic-bezier(0.65, 0, 0.35, 1) 1.15s forwards;
}

.de-loader__name > div {
	min-width: 0;
	overflow: hidden;
	padding-left: clamp(0.9rem, 2vw, 1.6rem);
	padding-block: 0.2em;
}

.de-loader__text {
	display: block;
	white-space: nowrap;
	transform: translateY(115%);
	animation: de-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.25s forwards;
}

.de-loader__text strong {
	display: block;
	font-family: var(--de-display, "Montserrat", sans-serif);
	font-weight: 900;
	font-size: clamp(1.25rem, 3.1vw, 2.5rem);
	line-height: 1.02;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.de-loader__text span {
	display: block;
	margin-top: 0.35em;
	font-family: var(--de-display, "Montserrat", sans-serif);
	font-weight: 700;
	font-size: clamp(0.62rem, 1.2vw, 0.95rem);
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--de-red, #ff0000);
}

@keyframes de-dot {
	from { transform: scale(0); }
	to { transform: scale(1); }
}

@keyframes de-settle {
	0% { transform: scale(1); }
	55% { transform: scale(0.92); }
	100% { transform: scale(1); }
}

@keyframes de-reveal {
	to { clip-path: inset(0 0 0 0); }
}

@keyframes de-open {
	to { grid-template-columns: 1fr; }
}

@keyframes de-rise {
	to { transform: translateY(0); }
}

@keyframes de-lift {
	to { transform: translateY(-100%); visibility: hidden; }
}

@media (max-width: 560px) {
	.de-loader__text strong { font-size: 1.15rem; }
}