/* ==========================================================================
   MT Wood Gifts - Homepage intro (see inc/intro.php)
   ========================================================================== */

/*
 * Plays on a solid screen that covers the page from the very first paint;
 * the page only shows once the screen fades away at the end.
 *
 * Timeline (3.0s):
 *   0.20s - 0.35s  "M" fades in at the left edge, "T" at the right
 *   0.35s - 1.15s  they fly towards each other, accelerating until they
 *                  meet in the middle
 *   1.13s - 1.78s  flash where they meet; the letters burst away
 *   1.20s - 1.80s  the logo pops up in their place
 *   2.05s - 2.50s  the logo fades out
 *   2.30s - 3.00s  the screen fades, revealing the page
 */
.mtwg-intro {
	display: none;
}

/* No scrolling the hidden page underneath while it plays. */
.mtwg-intro-play {
	overflow: hidden;
}

.mtwg-intro-play .mtwg-intro {
	--mtwg-intro-blue: #0473cc;
	--mtwg-intro-blue-light: #0299ec;
	--mtwg-intro-blue-dark: #0271ca;

	display: flex;
	position: fixed;
	inset: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* Warm linen, a touch deeper towards the edges, to match the site's
	   cream/wood palette instead of reading as plain white. */
	background: radial-gradient(ellipse at center, #f5efe4 0%, #efe6d6 55%, #e5d9c4 100%);
	cursor: pointer;
	animation: mtwg-intro-lift 0.7s ease 2.3s forwards;
}

/* Letters, flash and logo all share the same centre point. */
.mtwg-intro__stage {
	display: grid;
	place-items: center;
}

.mtwg-intro__stage > * {
	grid-area: 1 / 1;
}

/* M + T ------------------------------------------------------------------- */

.mtwg-intro__letters {
	display: flex;
	animation: mtwg-intro-letters-out 0.4s ease-out 1.15s forwards;
}

.mtwg-intro__letter {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: clamp(80px, 16vw, 150px);
	line-height: 1;
	color: var(--mtwg-intro-blue);
	background: linear-gradient(180deg, var(--mtwg-intro-blue-light), var(--mtwg-intro-blue-dark));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 6px 14px rgba(3, 134, 224, 0.3));
	opacity: 0;
	animation: 0.95s 0.2s forwards;
}

.mtwg-intro__letter--m {
	animation-name: mtwg-intro-from-left;
}

.mtwg-intro__letter--t {
	animation-name: mtwg-intro-from-right;
}

/* Start just inside the screen edge so the whole flight is visible, then
   accelerate into the middle, so they "hit" rather than settle. */
@keyframes mtwg-intro-from-left {
	from {
		opacity: 0;
		transform: translateX(-40vw);
		animation-timing-function: ease-out;
	}
	16% {
		opacity: 1;
		transform: translateX(-40vw);
		animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Start just inside the screen edge so the whole flight is visible, then
   accelerate into the middle, so they "hit" rather than settle. */
@keyframes mtwg-intro-from-right {
	from {
		opacity: 0;
		transform: translateX(40vw);
		animation-timing-function: ease-out;
	}
	16% {
		opacity: 1;
		transform: translateX(40vw);
		animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes mtwg-intro-letters-out {
	to {
		opacity: 0;
		transform: scale(1.35);
		filter: blur(6px);
	}
}

/* Flash (on top of the logo, so it bursts over it as it appears) ---------- */

.mtwg-intro__flash {
	position: relative;
	z-index: 1;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: radial-gradient(circle, #ffffff 0%, #ffffff 14%, rgba(2, 153, 236, 0.85) 30%, rgba(2, 153, 236, 0.3) 50%, rgba(2, 153, 236, 0) 70%);
	opacity: 0;
	transform: scale(0.2);
	pointer-events: none;
	animation: mtwg-intro-flash 0.65s ease-out 1.13s forwards;
}

@keyframes mtwg-intro-flash {
	20% {
		opacity: 1;
		transform: scale(1.6);
	}
	to {
		opacity: 0;
		transform: scale(4.5);
	}
}

/* Logo -------------------------------------------------------------------- */

.mtwg-intro__logo {
	display: block;
	width: 240px;
	height: auto;
	opacity: 0;
	transform: scale(0.6);
	animation:
		mtwg-intro-logo-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s forwards,
		mtwg-intro-logo-out 0.45s ease-in 2.05s forwards;
}

@keyframes mtwg-intro-logo-in {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes mtwg-intro-logo-out {
	from {
		opacity: 1;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(1.08);
	}
}

@keyframes mtwg-intro-lift {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

@media (max-width: 480px) {
	.mtwg-intro__logo {
		width: 190px;
	}
}