/*
 * Holding page (Figma "01 - Loading"; markup and gate in inc/loading.php).
 *
 * Enqueued only on the front page while Eleventh Space → Holding page is not
 * Off. The overlay also carries the `hidden` attribute, so it stays hidden
 * unless the pre-paint gate adds `es-holding-on` to <html>: no-JS visitors,
 * blocked storage and visitors inside the chosen interval get the site, never
 * a stuck overlay. The full 4.5s timeline is keyframes on a shared duration
 * so every phase stays in sync:
 *
 *   0.0 – 0.5s  wordmark line fades/settles in     (0% – 11%)
 *   0.5 – 1.6s  word one   INTERIORS               (to 32%, out by 36%)
 *   1.6 – 2.7s  word two   DESIGN HOUSE            (36% – 55%, out by 59%)
 *   2.7 – 3.7s  word three ARCHITECTURE            (from 59%)
 *   3.7 – 4.5s  overlay slides up to reveal hero   (83% – 100%)
 *
 * The overlay script removes `es-holding-on` and the node at 4.9s, or sooner
 * on Skip / Escape. Reduced-motion visitors are skipped by the gate; the
 * global rule in main.css is the backstop. The changing words are stacked in
 * one grid cell sized by the widest, so the fixed prefix never shifts.
 */

.es-loading {
	display: none;
}

html.es-holding-on {
	overflow: hidden;
}

html.es-holding-on .es-loading {
	position: fixed;
	inset: 0;
	/* Scale in main.css; below 9000 so the Complianz banner is always on top. */
	z-index: var( --es-z-holding );
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	height: 100dvh;
	background-color: var( --wp--preset--color--contrast, #3d251d );
	animation: es-loading-exit 4.5s linear both;
}

html.es-holding-on .es-loading__line {
	margin: 0;
	padding-inline: var( --wp--preset--spacing--sm, 1rem );
	color: var( --wp--preset--color--base-alt, #fff );
	font-family: var( --wp--preset--font-family--display, Georgia, serif );
	font-size: var( --wp--preset--font-size--lg, 1.25rem );
	font-weight: 400;
	line-height: 1.9;
	text-align: center;
	animation: es-loading-line-in 4.5s linear both;
}

html.es-holding-on .es-loading__words {
	display: inline-grid;
	justify-items: start;
	white-space: nowrap;
}

html.es-holding-on .es-loading__word {
	grid-area: 1 / 1;
	opacity: 0;
	animation-duration: 4.5s;
	animation-timing-function: linear;
	animation-fill-mode: both;
}

html.es-holding-on .es-loading__word--one {
	animation-name: es-loading-word-one;
}

html.es-holding-on .es-loading__word--two {
	animation-name: es-loading-word-two;
}

html.es-holding-on .es-loading__word--three {
	animation-name: es-loading-word-three;
}

@keyframes es-loading-line-in {
	0% {
		opacity: 0;
		transform: translateY( 0.75rem );
		animation-timing-function: cubic-bezier( 0.33, 1, 0.68, 1 );
	}

	11%,
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes es-loading-word-one {
	0%,
	32% {
		opacity: 1;
	}

	36%,
	100% {
		opacity: 0;
	}
}

@keyframes es-loading-word-two {
	0%,
	32% {
		opacity: 0;
	}

	36%,
	55% {
		opacity: 1;
	}

	59%,
	100% {
		opacity: 0;
	}
}

@keyframes es-loading-word-three {
	0%,
	55% {
		opacity: 0;
	}

	59%,
	100% {
		opacity: 1;
	}
}

@keyframes es-loading-exit {
	0% {
		transform: translateY( 0 );
	}

	83% {
		transform: translateY( 0 );
		animation-timing-function: cubic-bezier( 0.83, 0, 0.17, 1 );
	}

	100% {
		transform: translateY( -100% );
		visibility: hidden;
	}
}