/*
 * OmniResponse – animated hero backgrounds (mu-plugin omni-bg-visuals.php). Loaded only when a variant 1–4 is active
 * and the page has an `.omni-hero` / `.omni-bg-target` / `.omni-bg-echo` row.
 *
 * Layers inside the host row (Kadence .kb-row-layout-wrap is already position: relative; its .kt-row-column-wrap has
 * z-index 1):  host background (#072B5F + static poster)  <  .omni-bg-layer with the canvas (z 0)
 *              <  content (z 1)  <  pause button (z 2).
 * The layer is absolutely positioned (no layout shift), aria-hidden and ignores the pointer.
 * Contrast: the runtime (omni-bg-core.js) dims the animation behind the header, around and behind the hero text
 * inside the canvas itself (no overlay/mask layers to composite); measured values in BG_VARIANTS.md.
 */

.omni-bg-host { position: relative; isolation: isolate; }
.omni-bg-host > .kt-row-column-wrap { position: relative; z-index: 1; }

.omni-bg-layer {
	position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
	contain: strict;
}
.omni-bg-canvas {
	position: absolute; inset: 0; display: block; width: 100%; height: 100%;
	opacity: 0; transition: opacity 1.4s ease-out;
}
.omni-bg-layer.is-ready .omni-bg-canvas { opacity: 1; }

/* Static echo of the hero motif behind the final CTA (`.omni-bg-echo`, stage E): one still frame, no loop, no button.
   Quieter than the hero (opacity), and the runtime calms it behind the heading, text and CTA cards; contrast in
   screenshots_stageE/ECHO_CONTRAST.json. */
.omni-bg-layer-echo.is-ready .omni-bg-canvas { opacity: 0.55; }
@media (max-width: 767px) {
	.omni-bg-layer-echo.is-ready .omni-bg-canvas { opacity: 0.45; }
}

/* Pause / play (WCAG 2.2.2). 36 px target (2.5.8), icon #E4F1FC and border #7C98BC on #0B1A2E (>= 3:1, 1.4.11). */
.omni-bg-host > .omni-bg-toggle {
	position: absolute; right: 16px; bottom: 16px; z-index: 2;
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; min-height: 0; padding: 0; margin: 0;
	border: 1px solid #7C98BC; border-radius: 999px; box-shadow: none;
	background: rgba(11, 26, 46, 0.78); color: #E4F1FC; cursor: pointer; line-height: 1;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.omni-bg-host > .omni-bg-toggle:hover,
.omni-bg-host > .omni-bg-toggle:focus-visible { background: #0B1A2E; border-color: #B9D2EC; color: #F5F9FD; }
.omni-bg-host > .omni-bg-toggle[hidden] { display: none; }
.omni-bg-host > .omni-bg-toggle svg { width: 14px; height: 14px; fill: currentColor; }
@media (max-width: 767px) {
	.omni-bg-host > .omni-bg-toggle { right: 12px; bottom: 12px; }
}

/* ---------- Static posters: first paint, no-JS / no-canvas fallback (the canvas fades in over them) ---------- */
/* 1 Ribbons */
.omni-bg-v1 .omni-hero, .omni-bg-v1 .omni-bg-target {
	background-image:
		linear-gradient(162deg, rgba(3, 158, 234, 0) 52%, rgba(3, 158, 234, 0.16) 60%, rgba(10, 91, 216, 0.1) 66%, rgba(7, 43, 95, 0) 74%),
		linear-gradient(20deg, rgba(7, 43, 95, 0) 30%, rgba(10, 91, 216, 0.14) 40%, rgba(3, 158, 234, 0.08) 46%, rgba(7, 43, 95, 0) 54%);
}
/* 2 Aurora */
.omni-bg-v2 .omni-hero, .omni-bg-v2 .omni-bg-target {
	background-image:
		radial-gradient(42% 55% at 82% 22%, rgba(3, 158, 234, 0.32), rgba(3, 158, 234, 0) 70%),
		radial-gradient(45% 60% at 12% 88%, rgba(10, 91, 216, 0.38), rgba(10, 91, 216, 0) 70%),
		radial-gradient(35% 45% at 62% 78%, rgba(111, 198, 245, 0.14), rgba(111, 198, 245, 0) 70%),
		linear-gradient(180deg, #0B1A2E 0%, #072B5F 55%, #08306A 100%);
}
/* 3 Knowledge network */
.omni-bg-v3 .omni-hero, .omni-bg-v3 .omni-bg-target {
	background-image:
		radial-gradient(circle at 1px 1px, rgba(111, 198, 245, 0.12) 1px, rgba(111, 198, 245, 0) 1.6px),
		radial-gradient(50% 60% at 85% 55%, rgba(3, 158, 234, 0.18), rgba(3, 158, 234, 0) 70%);
	background-size: 34px 34px, auto;
}
/* 4 Stream */
.omni-bg-v4 .omni-hero, .omni-bg-v4 .omni-bg-target {
	background-image:
		linear-gradient(90deg, rgba(3, 158, 234, 0) 57%, rgba(3, 158, 234, 0.16) 63%, rgba(3, 158, 234, 0) 69%),
		linear-gradient(rgba(111, 198, 245, 0.05) 1px, rgba(111, 198, 245, 0) 1px),
		linear-gradient(90deg, rgba(111, 198, 245, 0.05) 1px, rgba(111, 198, 245, 0) 1px);
	background-size: auto, 48px 48px, 48px 48px;
}

@media (prefers-reduced-motion: reduce) {
	.omni-bg-canvas { transition: none; }
}

/* ---------- Ambient layer (stage F): the network motif, much calmer, behind every page without a hero ----------
   One fixed, full-viewport host created by the runtime as the first child of <body>; the page wrapper becomes a
   transparent stacking context above it (the base colour moves to <body>). Layer opacity 0.55 (0.45 on mobile) with
   the ambient renderer drawing points/glyphs at half strength -> overall ~0.35 of the hero intensity, mesh lines visible.
   Cards/forms/footer keep their own opaque backgrounds, so text in them is unaffected; "naked" text (blog, legal
   intro, page headers) sits on navy + at most ~10 % of sky blue -> measured contrast >= 4.5:1 (screenshots_account_v2/ambient). */
.omni-bg-ambient {
	position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
	background: #0B1A2E;
}
.omni-bg-ambient > .omni-bg-layer { position: absolute; inset: 0; contain: strict; }
.omni-bg-layer-ambient.is-ready .omni-bg-canvas { opacity: 0.55; }
@media (max-width: 767px) {
	.omni-bg-layer-ambient.is-ready .omni-bg-canvas { opacity: 0.45; }
}
body.omni-bg-ambient-on { background-color: #0B1A2E; }
body.omni-bg-ambient-on #wrapper { position: relative; z-index: 1; background: transparent !important; }
body.omni-bg-ambient-on.omni-account-page .site-container,
body.omni-bg-ambient-on.omni-account-page .content-bg,
body.omni-bg-ambient-on.omni-account-page .entry-content > .wp-block-kadence-column > .kt-inside-inner-col { background-color: transparent !important; }
/* pause / play for the ambient layer: bottom-left of the viewport (toasts and cookie controls use the right side) */
.omni-bg-ambient > .omni-bg-toggle { position: fixed; left: 16px; right: auto; bottom: 16px; pointer-events: auto; z-index: 2; }
@media (max-width: 767px) { .omni-bg-ambient > .omni-bg-toggle { left: 12px; bottom: 12px; } }
/* Page-header bands (navy Kadence sections, blog title band) let the motif show through at the top of every page. */
body.omni-bg-ambient-on .wp-block-kadence-column.kb-section-has-overlay > .kt-inside-inner-col { background-color: rgba(7, 43, 95, 0.62) !important; }
body.omni-bg-ambient-on .entry-hero .entry-hero-container-inner { background: rgba(7, 43, 95, 0.62) !important; }
body.omni-bg-ambient-on .site-header:not(.transparent-header) { background-color: rgba(11, 26, 46, 0.9); }
.omni-bg-ambient > .omni-bg-toggle { opacity: 0.75; }
.omni-bg-ambient > .omni-bg-toggle:hover, .omni-bg-ambient > .omni-bg-toggle:focus-visible { opacity: 1; }
/* Public subpages (contact, about, features, sales form ...): the first content row is the navy page-header band and the
   alternating rows are palette8 - both become translucent on ambient pages so the motif shows at the top of every page
   (text contrast only improves: the band darkens the layer further). Base-colour rows equal the layer base and stay. */
body.omni-bg-ambient-on .entry-content > .kb-row-layout-wrap.kt-row-has-bg:first-child,
body.omni-bg-ambient-on .entry-content > .kb-row-layout-wrap.omni-section-accent,
body.omni-bg-ambient-on .kb-row-layout-wrap.omni-section-accent { background-color: rgba(7, 43, 95, 0.62) !important; }
body.omni-bg-ambient-on .kb-row-layout-wrap.has-theme-palette8-background-color,
body.omni-bg-ambient-on .kb-row-layout-wrap.omni-section-alt { background-color: rgba(23, 41, 61, 0.8) !important; }
body.omni-bg-ambient-on .kb-row-layout-wrap.omni-section-base { background-color: transparent !important; }