/**
 * Homepage intro: an academy leader countdown.
 *
 * Crosshair and dial draw in, the sweep hand makes one turn per count from 3
 * down to 1, then the dial clears and the site logo lands before the panel
 * lifts away.
 *
 * The whole sequence is CSS so it still plays and still clears itself with
 * JavaScript disabled. The inline script beside the markup only handles the
 * once-per-session skip and the scroll lock.
 */

.typesee-intro-lock,
.typesee-intro-lock body {
	overflow: hidden;
}

.typesee-intro {
	--typesee-intro-tick: 600ms;
	--typesee-intro-line: rgba(245, 245, 242, 0.22);

	position: fixed;
	inset: 0;
	z-index: 999;
	display: grid;
	place-items: center;
	background: #0d0d0d;
	animation: typesee-intro-out 600ms cubic-bezier(0.76, 0, 0.24, 1) 2750ms both;
}

/* Registration crosshair spanning the frame, as on a real leader. */
.typesee-intro::before,
.typesee-intro::after {
	content: "";
	position: absolute;
	background: var(--typesee-intro-line);
}

.typesee-intro::before {
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	transform: scaleX(0);
	animation: typesee-intro-rule 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.typesee-intro::after {
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	transform: scaleY(0);
	animation: typesee-intro-rule 500ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.typesee-intro__stage {
	position: relative;
	display: grid;
	place-items: center;
	width: min(320px, 62vmin);
	aspect-ratio: 1;
}

/* --- Dial ---------------------------------------------------------------- */

.typesee-intro__dial {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border: 1px solid var(--typesee-intro-line);
	border-radius: 50%;
	animation: typesee-intro-dial-in 500ms cubic-bezier(0.16, 1, 0.3, 1) both,
		typesee-intro-dial-out 400ms ease-in 1950ms both;
}

/* Inner ring: the leader's double circle. */
.typesee-intro__dial::before {
	content: "";
	position: absolute;
	inset: 7%;
	border: 1px solid rgba(245, 245, 242, 0.12);
	border-radius: 50%;
}

/*
 * Trailing wedge behind the hand. Needs @property to interpolate the conic
 * stop; browsers without it simply show no wedge, which is a fine downgrade.
 */
@property --typesee-intro-sweep {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.typesee-intro__dial::after {
	content: "";
	position: absolute;
	inset: 7%;
	border-radius: 50%;
	background: conic-gradient(rgba(245, 245, 242, 0.09) var(--typesee-intro-sweep), transparent 0);
	animation: typesee-intro-sweep var(--typesee-intro-tick) linear 150ms 3 both;
}

.typesee-intro__hand {
	position: absolute;
	top: 7%;
	left: 50%;
	width: 1px;
	height: 43%;
	background: rgba(245, 245, 242, 0.55);
	transform-origin: bottom center;
	animation: typesee-intro-hand var(--typesee-intro-tick) linear 150ms 3 both;
}

/* --- Countdown ----------------------------------------------------------- */

.typesee-intro__count {
	position: relative;
	margin: 0;
	display: grid;
	place-items: center;
}

.typesee-intro__count i {
	grid-area: 1 / 1;
	color: #f5f5f2;
	font-size: clamp(3.5rem, 26vmin, 9rem);
	font-style: normal;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	opacity: 0;
	animation: typesee-intro-digit var(--typesee-intro-tick) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.typesee-intro__count i:nth-child(1) { animation-delay: 150ms; }
.typesee-intro__count i:nth-child(2) { animation-delay: 750ms; }
.typesee-intro__count i:nth-child(3) { animation-delay: 1350ms; }

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

/* Filling the stage rather than relying on static-position centring. */
.typesee-intro__logo {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	opacity: 0;
	animation: typesee-intro-logo 600ms cubic-bezier(0.16, 1, 0.3, 1) 2050ms both;
}

/* Same inversion the header applies, so a light-on-dark logo reads correctly. */
.typesee-intro__logo img {
	width: min(250px, 48vmin);
	height: auto;
	filter: brightness(0) invert(1);
}

/* Fallback when no logo is set in the customizer. */
.typesee-intro__logo span {
	color: #f5f5f2;
	font-size: clamp(1.75rem, 9vmin, 3rem);
	font-style: italic;
	font-weight: 900;
	letter-spacing: -0.09em;
	line-height: 0.8;
	text-transform: uppercase;
}

/* --- Keyframes ----------------------------------------------------------- */

@keyframes typesee-intro-rule {
	to { transform: scale(1); }
}

@keyframes typesee-intro-dial-in {
	from { opacity: 0; transform: scale(0.9); }
	to   { opacity: 1; transform: none; }
}

@keyframes typesee-intro-dial-out {
	to { opacity: 0; }
}

@keyframes typesee-intro-sweep {
	from { --typesee-intro-sweep: 0deg; }
	to   { --typesee-intro-sweep: 360deg; }
}

@keyframes typesee-intro-hand {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes typesee-intro-digit {
	0%   { opacity: 0; transform: scale(1.14); }
	14%  { opacity: 1; transform: scale(1); }
	80%  { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(0.97); }
}

@keyframes typesee-intro-logo {
	from { opacity: 0; transform: scale(0.94); }
	to   { opacity: 1; transform: none; }
}

@keyframes typesee-intro-out {
	from {
		transform: translateY(0);
		visibility: visible;
	}
	99% {
		visibility: visible;
	}
	to {
		transform: translateY(-100%);
		visibility: hidden;
	}
}

/*
 * Reduced motion: no countdown, just the logo. The panel still needs a
 * finishing animation so the script's animationend handler releases the
 * scroll lock.
 */
@media (prefers-reduced-motion: reduce) {
	.typesee-intro {
		animation: typesee-intro-out 1ms linear 900ms both;
	}

	.typesee-intro::before,
	.typesee-intro::after,
	.typesee-intro__dial,
	.typesee-intro__hand,
	.typesee-intro__count i {
		animation: none;
		opacity: 0;
	}

	.typesee-intro__logo {
		animation: none;
		opacity: 1;
	}
}