/**
 * Manta — the style layer.
 *
 * ===========================================================================
 * THE COLOURS WERE SOLVED
 * ===========================================================================
 *
 * Measured, not chosen. Every pairing that carries text:
 *
 *   text   #e6eefc on ground #04070e = 17.28:1
 *   text   #e6eefc on panel  #0a1120 = 16.16:1
 *   muted  #9fb2ce on ground          =  9.34:1
 *   muted  #9fb2ce on panel           =  8.74:1
 *   accent #6ea8f0 on ground          =  8.18:1
 *   accent #6ea8f0 on panel           =  7.65:1
 *   ground #04070e on accent          =  8.18:1   (dark type on a button)
 *
 * The worst is 8.74:1, which is AAA. The margin is deliberate: this text sits
 * over a canvas that is moving, and moving contrast reads lower than the
 * number says.
 *
 * WHITE ON THE ACCENT IS 2.46:1 AND IS NEVER USED. The accent is a light
 * blue, so a button takes dark type. That is the opposite of most demos here
 * and the single easiest thing to get wrong, so the rule is written out
 * explicitly below and verify.py fails the build if it changes.
 *
 * ===========================================================================
 * EVERY SELECTOR BELOW EXISTS IN THE MARKUP
 * ===========================================================================
 *
 * 25.0.0 shipped a style layer targeting eleven class names this theme does
 * not have — .u-panel, .u-surface, .u-nav-mobile, .is-stuck and the rest.
 * Every rule matched nothing, silently, and the demo had effectively no
 * styling. The names used here come from the templates: .u-card, .u-tile,
 * .u-package, .u-person, .u-quote-card, .u-side-card, .u-acc-item,
 * .u-drawer-panel, .u-header-bar, .u-header.is-scrolled, .u-bnav-tab,
 * .u-stat, .u-eyebrow, .u-lead, .u-section-title, .u-section-text.
 *
 * verify.py fails the build if a class targeted here appears in no template.
 */

body.u-style-manta {
	--u-mt-ground: #04070e;
	--u-mt-panel: #0a1120;
	--u-mt-text: #e6eefc;
	--u-mt-muted: #9fb2ce;
	--u-mt-accent: #6ea8f0;

	/*
	 * Two border weights, answering to different rules. `rule` is a divider
	 * and carries no information, so it is allowed to be quiet. `edge` is the
	 * boundary of a control, which WCAG 1.4.11 wants at 3:1 — #4c6a96
	 * measures 3.66:1 on the ground.
	 */
	--u-mt-rule: #1b2740;
	--u-mt-edge: #4c6a96;

	background: var(--u-mt-ground);
	color: var(--u-mt-text);
}

/* --- the canvas ---------------------------------------------------------- */

/*
 * z-index: -1, BEHIND THE PAGE.
 *
 * The canvas is printed by wp_footer, so it is the last element in the body,
 * and among elements at z-index 0 or auto the last one in document order
 * paints on top. At 0 this covers every single thing on the page — which is
 * exactly what shipped in 25.0.0 and was reported as the content not working
 * on any page.
 *
 * Negative also needs no knowledge of the markup, so it cannot be broken by a
 * template rename. The alternative — lifting the content — was tried, used
 * three class names that do not exist here, and matched nothing.
 */
.u-manta-field {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--u-mt-ground);
}

.u-manta-field canvas {
	display: block;
	width: 100%;
	height: 100%;

	/*
	 * =====================================================================
	 * POSITIONED, AND THIS IS THE BUG THAT ATE FIVE VERSIONS OF THIS DEMO
	 * =====================================================================
	 *
	 * The still stand-in below is an absolutely positioned ::before. The
	 * canvas was not positioned at all. Positioned elements paint after
	 * non-positioned ones, so the CSS gradient sat ON TOP of the canvas and
	 * the scene was never visible.
	 *
	 * What made it so hard to find is that it did not fail immediately, it
	 * failed after exactly 900ms, and it looked like the scene dying:
	 *
	 *   while the fade is running, opacity is between 0 and 1, which gives
	 *   the canvas its own stacking context — and a stacking context from
	 *   opacity paints with the positioned elements, later in DOM order than
	 *   a ::before, so the canvas is on top and the scene IS visible;
	 *
	 *   the instant the transition lands on opacity: 1 exactly, that
	 *   stacking context goes away, the canvas drops back to being ordinary
	 *   in-flow content, and the ::before covers it again.
	 *
	 * So it animated beautifully for 900ms and then vanished into a static
	 * gradient. Reported, correctly and repeatedly, as the water effects not
	 * working and as everything disappearing after about a second.
	 *
	 * Every fix aimed at the JavaScript for five versions — brightness,
	 * NaN guards, refraction, creatures. All of it was drawing correctly the
	 * whole time, to a canvas nobody could see. Measuring the canvas rather
	 * than the composited page is what hid it: read back with getImageData
	 * the pixels were always there.
	 *
	 * position + z-index puts the two in an explicit order instead of an
	 * accidental one. verify.py now fails the build if a stand-in ::before
	 * can outrank the canvas it is standing in for.
	 */
	position: relative;
	z-index: 1;

	/*
	 * Fades in once the loop is actually running, rather than appearing. The
	 * CSS gradient underneath is already close to the first frame, so the
	 * crossfade is almost invisible — which is the point.
	 */
	opacity: 0;
	transition: opacity 900ms ease;
}

.u-manta-field[data-u-running] canvas { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.u-manta-field canvas { transition: none; }
}

/*
 * The still stand-in, painted in CSS.
 *
 * It has to hold up on its own: the canvas is absent for reduced motion, for
 * data saver, for a browser with no 2D context, and for the first frames of
 * every page load. This is the same gradient the canvas starts from, so a
 * visitor who never gets the canvas gets a coherent design rather than a
 * broken one.
 */
.u-manta-field::before {
	content: "";
	position: absolute;
	inset: 0;

	/* Explicitly under the canvas. See the note on the canvas rule above —
	   without this it paints over the scene the moment the fade-in ends. */
	z-index: 0;

	background:
		radial-gradient(120% 70% at 50% -10%, rgba(30, 62, 122, 0.55) 0%, rgba(24, 52, 104, 0) 62%),
		linear-gradient(to bottom, #12244a 0%, #0a1428 55%, #02040a 100%);
}

body.u-style-manta .u-main {
	position: relative;
	z-index: 1;
}

/* ===========================================================================
   SURFACES
   ===========================================================================

   NO SHADOWS. A drop shadow is a dark shape cast onto a lighter ground, and
   on a near-black page there is nothing darker for it to be — it renders as
   a smudge that makes an edge less clear rather than more. Depth here comes
   from surfaces being lighter than the ground.
   =========================================================================== */

body.u-style-manta .u-card,
body.u-style-manta .u-tile,
body.u-style-manta .u-package,
body.u-style-manta .u-person,
body.u-style-manta .u-quote-card,
body.u-style-manta .u-side-card,
body.u-style-manta .u-acc-item {
	background: rgba(10, 17, 32, 0.88);
	border: 1px solid var(--u-mt-rule);
	box-shadow: none;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

@supports not (backdrop-filter: blur(6px)) {
	body.u-style-manta .u-card,
	body.u-style-manta .u-tile,
	body.u-style-manta .u-package,
	body.u-style-manta .u-person,
	body.u-style-manta .u-quote-card,
	body.u-style-manta .u-side-card,
	body.u-style-manta .u-acc-item {
		background: var(--u-mt-panel);
	}
}

body.u-style-manta .u-card:hover,
body.u-style-manta .u-tile:hover,
body.u-style-manta .u-package:hover {
	border-color: var(--u-mt-edge);
	transform: none;
}

body.u-style-manta .u-section + .u-section {
	border-top: 1px solid var(--u-mt-rule);
}

body.u-style-manta hr { border-color: var(--u-mt-rule); }

/* --- type ---------------------------------------------------------------- */

/*
 * Headings a touch lighter than on a light ground. Light type on dark
 * optically thickens — the glyph bleeds outward rather than the background
 * bleeding in — so a weight that reads right in black on white reads heavy
 * in white on black. Standard correction, not a preference.
 */
body.u-style-manta .u-page-title,
body.u-style-manta .u-section-title,
body.u-style-manta .u-hero-title,
body.u-style-manta h1,
body.u-style-manta h2,
body.u-style-manta h3 {
	font-weight: 600;
	letter-spacing: -0.018em;
	color: var(--u-mt-text);
}

body.u-style-manta .u-page-title,
body.u-style-manta .u-hero-title { letter-spacing: -0.026em; }

body.u-style-manta .u-eyebrow { color: var(--u-mt-accent); }

body.u-style-manta .u-lead,
body.u-style-manta .u-section-text,
body.u-style-manta figcaption,
body.u-style-manta small { color: var(--u-mt-muted); }

body.u-style-manta .u-mono { color: var(--u-mt-muted); }

body.u-style-manta .u-stat strong,
body.u-style-manta .u-hero-metric strong { color: var(--u-mt-accent); }

/* --- links and buttons --------------------------------------------------- */

body.u-style-manta a { color: var(--u-mt-accent); }

body.u-style-manta .u-btn-primary {
	background: var(--u-mt-accent);
	border-color: var(--u-mt-accent);

	/*
	 * DARK TYPE ON THE BUTTON. The line to read twice.
	 *
	 * White on this accent measures 2.46:1 — below the standard and hard to
	 * read. The ground colour on it measures 8.18:1. Most demos here put
	 * white on their accent because most accents are dark enough to take it,
	 * so this is the exception and it exists to beat the shared default.
	 */
	color: var(--u-mt-ground);
	box-shadow: none;
}

body.u-style-manta .u-btn-primary:hover { filter: brightness(1.08); }

body.u-style-manta .u-btn-ghost {
	background: transparent;
	border: 1px solid var(--u-mt-edge);
	color: var(--u-mt-text);
}

body.u-style-manta .u-btn-ghost:hover {
	border-color: var(--u-mt-accent);
	color: var(--u-mt-accent);
}

body.u-style-manta .u-btn:active { transform: translateY(1px); }

/* --- forms --------------------------------------------------------------- */

body.u-style-manta input[type="text"],
body.u-style-manta input[type="email"],
body.u-style-manta input[type="tel"],
body.u-style-manta input[type="url"],
body.u-style-manta input[type="search"],
body.u-style-manta input[type="number"],
body.u-style-manta select,
body.u-style-manta textarea {
	background: rgba(4, 7, 14, 0.72);
	border: 1px solid var(--u-mt-edge);
	color: var(--u-mt-text);
}

body.u-style-manta ::placeholder { color: var(--u-mt-muted); opacity: 1; }

body.u-style-manta :focus-visible {
	outline: 2px solid var(--u-mt-accent);
	outline-offset: 2px;
}

/* --- header, footer, bottom bar ------------------------------------------ */

body.u-style-manta .u-header-bar {
	background: transparent;
	border-bottom: 1px solid transparent;
}

body.u-style-manta .u-header.is-scrolled .u-header-bar {
	background: rgba(4, 7, 14, 0.86);
	border-bottom-color: var(--u-mt-rule);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

body.u-style-manta .u-header-nav a { color: var(--u-mt-text); }
body.u-style-manta .u-header-nav a:hover { color: var(--u-mt-accent); }

body.u-style-manta .u-footer {
	background: transparent;
	border-top: 1px solid var(--u-mt-rule);
}

/*
 * The drawer is OPAQUE. A translucent panel over a full-screen animated
 * scene is a menu whose labels are moving.
 */
body.u-style-manta .u-drawer-panel {
	background: var(--u-mt-ground);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-left: 1px solid var(--u-mt-rule);
}

body.u-style-manta .u-bottomnav-inner {
	background: rgba(4, 7, 14, 0.92);
	border-top: 1px solid var(--u-mt-rule);
}

body.u-style-manta .u-bnav-tab { color: var(--u-mt-muted); }
body.u-style-manta .u-bnav-tab.is-active { color: var(--u-mt-accent); }
body.u-style-manta .u-bnav-pill { background: rgba(110, 168, 240, 0.14); }

/* --- tables, code, quotes ------------------------------------------------ */

body.u-style-manta table,
body.u-style-manta th,
body.u-style-manta td { border-color: var(--u-mt-rule); }

body.u-style-manta thead th { color: var(--u-mt-muted); }

body.u-style-manta pre,
body.u-style-manta code {
	background: rgba(4, 7, 14, 0.8);
	border: 1px solid var(--u-mt-rule);
	color: var(--u-mt-text);
}

body.u-style-manta blockquote {
	border-left: 2px solid var(--u-mt-accent);
	color: var(--u-mt-text);
}

/* --- images -------------------------------------------------------------- */

body.u-style-manta .u-card-media img,
body.u-style-manta .u-folio-media img,
body.u-style-manta .u-single-media img {
	filter: brightness(0.94);
}

/* --- the specimen list --------------------------------------------------- */

body.u-style-manta .u-specimen-row { border-color: var(--u-mt-rule); }
body.u-style-manta .u-specimen-mark { color: var(--u-mt-accent); }
body.u-style-manta .u-specimen-text { color: var(--u-mt-muted); }
body.u-style-manta .u-specimen-meta { color: var(--u-mt-muted); }

/* --- the WebGL hero ------------------------------------------------------ */

body.u-style-manta .u-volume { background: transparent; }
body.u-style-manta .u-volume-title { color: var(--u-mt-text); }
body.u-style-manta .u-volume-eyebrow { color: var(--u-mt-accent); }

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 780px) {
	/*
	 * Surfaces go fully opaque. A small screen is mostly text, and
	 * translucency over a moving background costs more legibility the less
	 * room there is.
	 */
	body.u-style-manta .u-card,
	body.u-style-manta .u-tile,
	body.u-style-manta .u-package,
	body.u-style-manta .u-person,
	body.u-style-manta .u-quote-card,
	body.u-style-manta .u-side-card,
	body.u-style-manta .u-acc-item {
		background: var(--u-mt-panel);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* --- printing ------------------------------------------------------------ */

@media print {
	.u-manta-field { display: none; }

	body.u-style-manta {
		background: #fff;
		color: #000;
	}
}