/**
 * Effects layer — the ANIMATED/depth knob vocabulary (hero `effect` + `surface`
 * knobs, `suds_hero_video`, and the global `suds_fx_ambient` design knob).
 * Distinct from the STATIC band-texture system (see dynamic-css.php).
 *
 * Contract:
 *  - Every rule is gated on knob-emitted state (`data-opt-*` attributes,
 *    `has-fx-video`, `data-fx-ambient`, or SSR'd .suds-fx-* elements that only
 *    exist when a knob is set) — a site with no effect knobs set renders
 *    byte-identically to before this file existed.
 *  - Colors bind to brand tokens via color-mix (never hardcoded brand hex);
 *    intensity/tempo tune per archetype via --suds-fx-* tokens.
 *  - Motion is decorative only and fully disabled under prefers-reduced-motion
 *    (the video layer is additionally removed by app.js before any bytes load).
 *  - Hero stacking (prototype-proven on SFSC): section bg photo/gradient →
 *    .suds-fx-media video (z0) → .suds-fx-glow / .suds-fx-bubbles (z1, post-wrap
 *    DOM) → .suds-hero-copy (z2). .suds-hero-media is z1 + earlier in DOM, so
 *    bubbles drift over the photo/cards but never over the copy.
 *
 * Archetype tuning tokens (defaults here, override in archetypes.css blocks):
 *  --suds-fx-opacity   peak bubble opacity (default .85)
 *  --suds-fx-tempo     bubble tempo multiplier, higher = slower (default 1)
 *  --suds-fx-glow-a/-b glow colors (default primary / accent)
 */

/* ---------- HERO VIDEO (suds_hero_video + app.js heroVideo gate) ---------- */

.suds-fx-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.suds-fx-media .suds-fx-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Brand scrim over the footage so copy stays readable on any frame — mirrors
   the .has-bg-photo scrim direction (dark left → lighter right) in brand navy. */
.suds-fx-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		95deg,
		color-mix(in srgb, var(--suds-secondary) 94%, transparent) 0%,
		color-mix(in srgb, var(--suds-secondary) 78%, transparent) 55%,
		color-mix(in srgb, color-mix(in srgb, var(--suds-secondary) 60%, var(--suds-primary)) 72%, transparent) 100%
	);
}

/* Light copy over footage (mirrors .has-bg-photo, base.css). */
.suds-hero.has-fx-video {
	--suds-hero-fg: #fff;
	--suds-hero-h1: #fff;
	--suds-hero-lead: #E7ECF4;
}

.suds-hero.has-fx-video .suds-eyebrow {
	color: #fff;
}

/* ---------- HERO BUBBLES (effect: bubbles | bubbles-glow) ----------------- */

.suds-fx-bubbles {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.suds-fx-bubbles span {
	position: absolute;
	bottom: -120px;
	border-radius: 50%;
	background: radial-gradient(
		circle at 30% 30%,
		rgba(255, 255, 255, 0.85),
		rgba(255, 255, 255, 0.18) 60%,
		rgba(255, 255, 255, 0.05) 100%
	);
	border: 1px solid rgba(255, 255, 255, 0.35);
	box-shadow: inset -2px -3px 8px rgba(255, 255, 255, 0.25);
	opacity: 0;
	animation: suds-fx-rise linear infinite;
	animation-duration: calc(var(--_d, 16s) * var(--suds-fx-tempo, 1));
}

@keyframes suds-fx-rise {
	0%   { transform: translate3d(0, 0, 0) scale(0.9); opacity: 0; }
	10%  { opacity: var(--suds-fx-opacity, 0.85); }
	50%  { transform: translate3d(20px, -55vh, 0) scale(1.05); }
	90%  { opacity: var(--suds-fx-opacity, 0.85); }
	100% { transform: translate3d(-15px, -110vh, 0) scale(0.95); opacity: 0; }
}

/* Per-bubble size / lane / tempo — organic, not a synchronized march. */
.suds-fx-bubbles span:nth-child(1)  { width: 22px; height: 22px; left:  6%; --_d: 14s; animation-delay: 0s; }
.suds-fx-bubbles span:nth-child(2)  { width: 36px; height: 36px; left: 14%; --_d: 18s; animation-delay: 3s; }
.suds-fx-bubbles span:nth-child(3)  { width: 14px; height: 14px; left: 22%; --_d: 11s; animation-delay: 6s; }
.suds-fx-bubbles span:nth-child(4)  { width: 48px; height: 48px; left: 30%; --_d: 22s; animation-delay: 1s; }
.suds-fx-bubbles span:nth-child(5)  { width: 18px; height: 18px; left: 38%; --_d: 13s; animation-delay: 9s; }
.suds-fx-bubbles span:nth-child(6)  { width: 28px; height: 28px; left: 47%; --_d: 17s; animation-delay: 4s; }
.suds-fx-bubbles span:nth-child(7)  { width: 40px; height: 40px; left: 55%; --_d: 20s; animation-delay: 7s; }
.suds-fx-bubbles span:nth-child(8)  { width: 16px; height: 16px; left: 63%; --_d: 12s; animation-delay: 2s; }
.suds-fx-bubbles span:nth-child(9)  { width: 32px; height: 32px; left: 72%; --_d: 19s; animation-delay: 5s; }
.suds-fx-bubbles span:nth-child(10) { width: 24px; height: 24px; left: 80%; --_d: 15s; animation-delay: 8s; }
.suds-fx-bubbles span:nth-child(11) { width: 44px; height: 44px; left: 88%; --_d: 21s; animation-delay: 0s; }
.suds-fx-bubbles span:nth-child(12) { width: 20px; height: 20px; left: 95%; --_d: 14s; animation-delay: 6s; }

/* ---------- HERO GLOW (effect: glow | bubbles-glow) ------------------------
   Dedicated SSR'd element: .suds-hero's own ::before/::after are taken by the
   band-edge system and the fullbleed scrim. */

.suds-fx-glow {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.suds-fx-glow::before,
.suds-fx-glow::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.suds-fx-glow::before {
	width: 480px;
	height: 480px;
	top: -220px;
	right: -140px;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--suds-fx-glow-a, var(--suds-primary)) 45%, transparent) 0%,
		transparent 70%
	);
}

.suds-fx-glow::after {
	width: 340px;
	height: 340px;
	bottom: -180px;
	left: -100px;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--suds-fx-glow-b, var(--suds-accent)) 28%, transparent) 0%,
		transparent 70%
	);
}

/* ---------- HERO GLASS (surface: glass) ------------------------------------
   Brand-NAVY glass, not white: white glass goes illegible over bright photo /
   video frames (the SFSC lesson). Meant for photo/video heroes. */

.suds-hero[data-opt-surface="glass"] .suds-hero-statpanel,
.suds-hero[data-opt-surface="glass"] .suds-hero-floatcard {
	background: color-mix(in srgb, var(--suds-secondary) 55%, transparent);
	border: 1px solid rgba(255, 255, 255, 0.26);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 18px 48px rgba(4, 10, 30, 0.35);
	color: #fff;
}

.suds-hero[data-opt-surface="glass"] .suds-eyebrow {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 1.05rem;
	background: rgba(4, 10, 30, 0.32);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
}

/* ---------- AMBIENT GLOW (design: suds_fx_ambient=glow) --------------------
   CTA band only in v1: its background is a plain color shorthand, so the glows
   ride as extra background-image layers — zero DOM, no pseudo conflicts (the
   band's ::before belongs to the texture system). Quote-band glow is deferred
   (its band bg paints on ::after via the edges system). */

html[data-fx-ambient="glow"] .suds-cta-band {
	background-image:
		radial-gradient(
			circle 420px at calc(100% + 120px) -200px,
			color-mix(in srgb, var(--suds-fx-glow-a, var(--suds-primary)) 55%, transparent) 0%,
			transparent 70%
		),
		radial-gradient(
			circle 300px at -80px calc(100% + 160px),
			color-mix(in srgb, var(--suds-fx-glow-b, var(--suds-accent)) 30%, transparent) 0%,
			transparent 70%
		);
}

/* ---------- Reduced motion -------------------------------------------------
   Bubbles and video vanish (app.js additionally never plays/loads the video);
   glows and glass stay — they are static. */

@media (prefers-reduced-motion: reduce) {
	.suds-fx-bubbles,
	.suds-fx-media {
		display: none !important;
	}
}