/* =====================================================================
   TMD intro loader — fly through the K
   Loaded on the front page only (see intro-loader.php).
   The overlay is hidden unless the head script added html.tmd-intro.
   ===================================================================== */

.tmd-loader { display: none; }
html.tmd-intro .tmd-loader { display: block; }

/* Lock scroll while playing */
html.tmd-intro-active,
html.tmd-intro-active body { overflow: hidden; }

.tmd-loader {
	--tmd-intro-bg: #F9F9F9;      /* Glass White */
	--tmd-intro-mark: #262A34;    /* Power Black */
	--tmd-intro-accent: #8C5E58;  /* progress bar */
	--tmd-intro-bleed: 160px;     /* how far the overlay reaches past the screen edges */
	--tmd-intro-ui-lift: 0px;     /* extra space under the progress bar + counter (set for touch devices below) */

	/* The overlay box itself reaches well past the top and bottom of the screen,
	   so it also covers the area behind iOS Safari's (translucent) address bar and
	   controls, the home-indicator strip and rubber-banding. The progress bar and
	   counter are pinned back inside the visible screen below. */
	position: fixed;
	left: 0;
	right: 0;
	top: calc(-1 * var(--tmd-intro-bleed));
	bottom: calc(-1 * var(--tmd-intro-bleed));
	z-index: 100000;              /* above the WP admin bar (99999) */
	pointer-events: none;
	isolation: isolate;
	will-change: transform;       /* own compositor layer, so nothing layered below can paint over it */
}
.tmd-loader.is-blocking { pointer-events: auto; }

/* Phones and tablets: lift the progress bar + counter clear of browser controls
   that float over the bottom of the page (e.g. iOS Safari's address bar/tab bar).
   Desktop and mouse/trackpad devices keep them on the bottom edge. */
@media (hover: none) and (pointer: coarse) {
	.tmd-loader { --tmd-intro-ui-lift: 72px; }
}

.tmd-loader[data-theme="black"] { --tmd-intro-bg: #262A34; --tmd-intro-mark: #F9F9F9; }
.tmd-loader[data-theme="blue"]  { --tmd-intro-bg: #1E6BFF; --tmd-intro-mark: #F9F9F9; --tmd-intro-accent: #F9F9F9; }

.tmd-loader__svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.tmd-loader__bg { fill: var(--tmd-intro-bg); }

.tmd-loader__solid {
	fill: var(--tmd-intro-mark);
	opacity: 0;
	transition: opacity .45s cubic-bezier(.4, 0, .2, 1);
}
.tmd-loader__solid.is-in  { opacity: 1; }
.tmd-loader__solid.is-out { opacity: 0; transition-duration: .28s; }

/* Black inside a luminance mask = hole through the overlay */
.tmd-loader__knock { fill: #000; }
.tmd-loader__knock-wrap { visibility: hidden; }
.tmd-loader.is-open .tmd-loader__knock-wrap { visibility: visible; }

/* Progress */
.tmd-loader__meter {
	position: absolute;
	left: 0;
	right: 0;
	/* bottom of the visible screen, lifted clear of the home indicator / controls */
	bottom: calc(var(--tmd-intro-bleed) + var(--tmd-intro-ui-lift) + env(safe-area-inset-bottom, 0px));
	height: 3px;
}
.tmd-loader__bar {
	position: absolute;
	inset: 0;
	background: var(--tmd-intro-accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
}
.tmd-loader__count {
	position: absolute;
	right: clamp(20px, 4vw, 56px);
	bottom: calc(var(--tmd-intro-bleed) + var(--tmd-intro-ui-lift) + 20px + env(safe-area-inset-bottom, 0px));
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .08em;
	font-variant-numeric: tabular-nums;
	color: var(--tmd-intro-mark);
	opacity: .7;
}
.tmd-loader__meter,
.tmd-loader__count { transition: opacity .3s ease; }
.tmd-loader.is-open .tmd-loader__meter,
.tmd-loader.is-open .tmd-loader__count { opacity: 0; }

.tmd-loader.is-done { opacity: 0 !important; transition: opacity .25s linear; }

/* Hold the hero's looping animations while the intro plays.
   `animation: none` rather than `animation-play-state: paused` — a paused
   filter/background-clip:text animation still gets its own compositor layer in
   Chrome/Edge, and that layer can paint on top of the fixed overlay.
   The hold is released at the same moment the content starts fading in
   (.tmd-intro-reveal), so the sweep begins from its first frame while the text
   is still invisible — no jump from a static colour to the animation's start.
   (The background video keeps playing — it's what shows through the letters.) */
html.tmd-intro-active:not(.tmd-intro-reveal) .hero-2__tagline h1 .sweep,
html.tmd-intro-active:not(.tmd-intro-reveal) .hero-2__tint {
	animation: none !important;
}

/* Keep the hero's headline + description out of the way while the page shows
   through the letters, then fade them in near the end of the zoom
   (tmd-intro.js adds .tmd-intro-reveal at CFG.contentFrom, 75% by default). */
html.tmd-intro .hero-2__content {
	transition: opacity .6s cubic-bezier(.2, 0, .2, 1);
}
html.tmd-intro-active:not(.tmd-intro-reveal) .hero-2__content {
	opacity: 0;
}

/* ---------------------------------------------------------------------
   iOS Safari: the strip behind the floating address bar / controls.
   Safari draws the *page* behind its translucent toolbar but keeps fixed
   elements (this overlay) above it, however far they extend — so whatever
   sits below the hero shows through there. Desktop emulation doesn't
   reproduce this.
   Fix: while the intro plays, hide everything that comes after the hero and
   paint the page background in the overlay colour, so the strip behind the
   toolbar matches the overlay. Released when the content starts fading in.
   (Two separate rules: if a browser doesn't support :has(), only that rule
   is dropped.)
   --------------------------------------------------------------------- */
html.tmd-intro-active:not(.tmd-intro-reveal) .hero-2 ~ * {
	visibility: hidden;
}
html.tmd-intro-active:not(.tmd-intro-reveal) :has(.hero-2) ~ *:not(.tmd-loader) {
	visibility: hidden;
}
html.tmd-intro-active:not(.tmd-intro-reveal),
html.tmd-intro-active:not(.tmd-intro-reveal) body {
	background-color: #F9F9F9; /* Glass White — matches the default overlay */
}
html.tmd-intro-active:not(.tmd-intro-reveal):has(.tmd-loader[data-theme="black"]),
html.tmd-intro-active:not(.tmd-intro-reveal):has(.tmd-loader[data-theme="black"]) body {
	background-color: #262A34;
}
html.tmd-intro-active:not(.tmd-intro-reveal):has(.tmd-loader[data-theme="blue"]),
html.tmd-intro-active:not(.tmd-intro-reveal):has(.tmd-loader[data-theme="blue"]) body {
	background-color: #1E6BFF;
}