/* Global Background Manager — public runtime styles */

body.bbb-bg-managed {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

#bbb-bg-video {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	pointer-events: none;
}

#bbb-bg-overlay {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

#bbb-bg-particles {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

/* =================================================================
 * Custom HTML Background (Phase 1: Home Dashboard only) — sits above
 * the plain background (color/gradient/image/video, z-index -2/none)
 * and below the Animated Background Overlay and Blur Overlay (both
 * z-index -1, mounted after this in the DOM — see
 * background-runtime.js's applyCustomHtmlBackground()). The iframe
 * itself is built and populated by assets/js/bbb-custom-html-background.js;
 * this file only positions the outer container.
 * ================================================================= */

#bbb-bg-custom-html {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.bbb-custom-html-bg-frame {
	display: block;
}

.bbb-bg-particle {
	position: absolute;
	bottom: -10px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.55 );
	animation-name: bbb-bg-float;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes bbb-bg-float {
	0% { transform: translateY( 0 ) translateX( 0 ); opacity: 0; }
	10% { opacity: 1; }
	100% { transform: translateY( -110vh ) translateX( 20px ); opacity: 0; }
}

@keyframes bbb-bg-fade {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.85; }
}

@keyframes bbb-bg-zoom {
	0%, 100% { background-size: cover; }
	50% { background-size: 115% auto; }
}

@keyframes bbb-bg-kenburns {
	0% { background-position: 0% 0%; background-size: 100%; }
	50% { background-position: 100% 100%; background-size: 120%; }
	100% { background-position: 0% 0%; background-size: 100%; }
}

@keyframes bbb-bg-moving-gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

body.bbb-bg-anim-fade { animation: bbb-bg-fade 6s ease-in-out infinite; }
body.bbb-bg-anim-zoom { animation: bbb-bg-zoom 10s ease-in-out infinite; }
body.bbb-bg-anim-ken_burns { animation: bbb-bg-kenburns 20s ease-in-out infinite; }
body.bbb-bg-anim-moving_gradient { background-size: 200% 200%; animation: bbb-bg-moving-gradient 12s ease infinite; }

@media ( prefers-reduced-motion: reduce ) {
	body.bbb-bg-anim-fade,
	body.bbb-bg-anim-zoom,
	body.bbb-bg-anim-ken_burns,
	body.bbb-bg-anim-moving_gradient,
	.bbb-bg-particle {
		animation: none !important;
	}
}

/* =================================================================
 * Animated Background Overlay — independent premium motion layer.
 * Renders on top of the background AND on top of the existing
 * "Background Animation" above (fade/zoom/ken_burns/moving_gradient/
 * floating_particles), underneath the Blur Overlay (#bbb-bg-overlay)
 * and everything else (Hero Banner, Cards, Navigation, Dashboard).
 * Built and populated by assets/js/bg-overlay-presets.js.
 * ================================================================= */

#bbb-bg-overlay-anim {
	position: fixed;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: -1; /* same stacking context as #bbb-bg-overlay / #bbb-bg-particles; DOM order (this engine mounts before the Blur Overlay) keeps it underneath */
	opacity: var( --bbb-oa-opacity, 0.6 );
	will-change: opacity;
}

/* Speed → base duration multiplier used by every preset's animation-duration via calc(). */
.bbb-bg-oa-speed-slow { --bbb-oa-speed: 1; }
.bbb-bg-oa-speed-medium { --bbb-oa-speed: 0.62; }
.bbb-bg-oa-speed-fast { --bbb-oa-speed: 0.38; }

/* Intensity mainly drives element COUNT (JS), but also nudges visual weight slightly. */
.bbb-bg-oa-intensity-low { --bbb-oa-weight: 0.75; }
.bbb-bg-oa-intensity-medium { --bbb-oa-weight: 1; }
.bbb-bg-oa-intensity-high { --bbb-oa-weight: 1.3; }

/* Performance Mode: Battery Saver strips the expensive filters first. */
.bbb-bg-oa-perf-battery .bbb-oa-glow-blob,
.bbb-bg-oa-perf-battery .bbb-oa-heartbeat-glow,
.bbb-bg-oa-perf-battery .bbb-oa-drop,
.bbb-bg-oa-perf-battery .bbb-oa-cell {
	filter: none !important;
	box-shadow: none !important;
}

.bbb-bg-oa-paused * {
	animation-play-state: paused !important;
}

@media ( prefers-reduced-motion: reduce ) {
	#bbb-bg-overlay-anim * {
		animation: none !important;
	}
}

/* Dark mode: softer glow, less brightness. Light mode (default): brighter, cleaner. */
.bbb-bg-oa-dark { --bbb-oa-glow-strength: 0.55; }
#bbb-bg-overlay-anim:not( .bbb-bg-oa-dark ) { --bbb-oa-glow-strength: 1; }

/* ---- 1. Floating Blood Drops ---------------------------------- */

.bbb-oa-drop {
	position: absolute;
	top: -5%;
	width: calc( 7px * var( --bbb-oa-scale, 1 ) );
	height: calc( 10px * var( --bbb-oa-scale, 1 ) );
	background: radial-gradient( circle at 35% 30%, #ff8a93, #b3101f 70% );
	border-radius: 50% 50% 50% 0;
	transform: rotate( 45deg );
	opacity: 0;
	animation: bbb-oa-drop-fall var( --bbb-oa-dur, 14s ) linear infinite;
	animation-delay: var( --bbb-oa-delay, 0s );
	animation-duration: calc( var( --bbb-oa-dur, 14s ) * var( --bbb-oa-speed, 1 ) );
}

@keyframes bbb-oa-drop-fall {
	0% { transform: translateY( -10vh ) rotate( 45deg ); opacity: 0; }
	8% { opacity: 0.85; }
	92% { opacity: 0.6; }
	100% { transform: translateY( 110vh ) rotate( 45deg ); opacity: 0; }
}

/* ---- 2. Floating Blood Cells ------------------------------------ */

.bbb-oa-cell {
	position: absolute;
	top: 100%;
	width: calc( 12px * var( --bbb-oa-scale, 1 ) );
	height: calc( 12px * var( --bbb-oa-scale, 1 ) );
	border-radius: 50%;
	background: radial-gradient( circle at 40% 35%, #ff5b6b, #8f0d1a 75% );
	opacity: calc( 0.15 + 0.35 * var( --bbb-oa-depth, 0.6 ) );
	filter: blur( calc( 1.5px * ( 1 - var( --bbb-oa-depth, 0.6 ) ) ) );
	animation: bbb-oa-cell-drift var( --bbb-oa-dur, 24s ) ease-in-out infinite;
	animation-delay: var( --bbb-oa-delay, 0s );
	animation-duration: calc( var( --bbb-oa-dur, 24s ) * var( --bbb-oa-speed, 1 ) );
}

@keyframes bbb-oa-cell-drift {
	0% { transform: translateY( 0 ) translateX( 0 ) rotate( 0deg ); }
	50% { transform: translateY( -55vh ) translateX( 3vw ) rotate( 180deg ); }
	100% { transform: translateY( -110vh ) translateX( -2vw ) rotate( 360deg ); }
}

/* ---- 3. Blood Flow (soft waves, bottom area only) --------------- */

.bbb-oa-flow-wave {
	position: absolute;
	left: -10%;
	width: 120%;
	height: 40vh;
	bottom: -20vh;
	background: linear-gradient( to top, rgba( 139, 12, 25, 0.35 ), rgba( 139, 12, 25, 0 ) );
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	animation: bbb-oa-flow-sway calc( 16s * var( --bbb-oa-speed, 1 ) ) ease-in-out infinite;
}

.bbb-oa-flow-wave-2 {
	bottom: -24vh;
	opacity: 0.6;
	animation-duration: calc( 22s * var( --bbb-oa-speed, 1 ) );
	animation-direction: reverse;
}

@keyframes bbb-oa-flow-sway {
	0%, 100% { transform: translateX( -3% ) scaleY( 1 ); }
	50% { transform: translateX( 3% ) scaleY( 1.08 ); }
}

/* ---- 4. Heartbeat Pulse (soft ECG, every 5-8s) ------------------- */

.bbb-oa-heartbeat-glow {
	position: absolute;
	left: 50%;
	top: 40%;
	width: 60vmax;
	height: 60vmax;
	transform: translate( -50%, -50% );
	border-radius: 50%;
	background: radial-gradient( circle, rgba( 214, 54, 56, calc( 0.18 * var( --bbb-oa-glow-strength, 1 ) ) ), transparent 70% );
	animation: bbb-oa-heartbeat-pulse calc( 6.5s * var( --bbb-oa-speed, 1 ) ) ease-in-out infinite;
}

.bbb-oa-heartbeat-glow-soft {
	opacity: 0.6;
}

@keyframes bbb-oa-heartbeat-pulse {
	0%, 84%, 100% { transform: translate( -50%, -50% ) scale( 1 ); opacity: 0.7; }
	88% { transform: translate( -50%, -50% ) scale( 1.06 ); opacity: 1; }
	92% { transform: translate( -50%, -50% ) scale( 1 ); opacity: 0.8; }
	95% { transform: translate( -50%, -50% ) scale( 1.03 ); opacity: 0.95; }
}

.bbb-oa-ecg {
	position: absolute;
	left: 0;
	bottom: 12%;
	width: 100%;
	height: 60px;
	opacity: calc( 0.35 * var( --bbb-oa-glow-strength, 1 ) );
}

.bbb-oa-ecg-path {
	fill: none;
	stroke: #ff4f5a;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 300;
	stroke-dashoffset: 300;
	animation: bbb-oa-ecg-draw calc( 6.5s * var( --bbb-oa-speed, 1 ) ) ease-in-out infinite;
}

@keyframes bbb-oa-ecg-draw {
	0%, 80% { stroke-dashoffset: 300; }
	95% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: -20; }
}

/* ---- 5. Medical Particles ----------------------------------------- */

.bbb-oa-mparticle {
	position: absolute;
	bottom: -5%;
	width: calc( 3px * var( --bbb-oa-scale, 1 ) );
	height: calc( 3px * var( --bbb-oa-scale, 1 ) );
	border-radius: 50%;
	background: rgba( 255, 214, 217, 0.85 );
	box-shadow: 0 0 6px rgba( 255, 178, 184, calc( 0.8 * var( --bbb-oa-glow-strength, 1 ) ) );
	animation: bbb-oa-particle-rise var( --bbb-oa-dur, 12s ) ease-in infinite;
	animation-delay: var( --bbb-oa-delay, 0s );
	animation-duration: calc( var( --bbb-oa-dur, 12s ) * var( --bbb-oa-speed, 1 ) );
}

@keyframes bbb-oa-particle-rise {
	0% { transform: translateY( 0 ); opacity: 0; }
	10% { opacity: 0.9; }
	90% { opacity: 0.5; }
	100% { transform: translateY( -100vh ); opacity: 0; }
}

/* ---- 6. DNA Glow (transparent strand, slow vertical movement) ----- */

.bbb-oa-dna-svg {
	position: absolute;
	right: 4%;
	top: -10%;
	height: 130%;
	width: 120px;
	opacity: calc( 0.4 * var( --bbb-oa-glow-strength, 1 ) );
	animation: bbb-oa-dna-drift calc( 30s * var( --bbb-oa-speed, 1 ) ) ease-in-out infinite;
}

.bbb-oa-dna-strand {
	fill: none;
	stroke-width: 2;
}

.bbb-oa-dna-strand-0 { stroke: #ff6b74; }
.bbb-oa-dna-strand-1 { stroke: #ffd7da; opacity: 0.7; }

.bbb-oa-dna-rung {
	stroke: rgba( 255, 214, 217, 0.55 );
	stroke-width: 1.5;
	animation: bbb-oa-dna-rung-fade calc( 4s * var( --bbb-oa-speed, 1 ) ) ease-in-out infinite;
	animation-delay: var( --bbb-oa-delay, 0s );
}

@keyframes bbb-oa-dna-drift {
	0%, 100% { transform: translateY( 0 ); }
	50% { transform: translateY( -6% ); }
}

@keyframes bbb-oa-dna-rung-fade {
	0%, 100% { opacity: 0.25; }
	50% { opacity: 0.75; }
}

/* ---- 7. Soft Medical Glow (ambient breathing) ---------------------- */

.bbb-oa-glow-blob {
	position: absolute;
	width: 55vmax;
	height: 55vmax;
	border-radius: 50%;
	filter: blur( 60px );
	animation: bbb-oa-glow-breathe calc( 11s * var( --bbb-oa-speed, 1 ) ) ease-in-out infinite;
}

.bbb-oa-glow-blob-1 {
	left: -10%;
	top: -15%;
	background: radial-gradient( circle, rgba( 255, 182, 193, calc( 0.35 * var( --bbb-oa-glow-strength, 1 ) ) ), transparent 70% );
}

.bbb-oa-glow-blob-2 {
	right: -15%;
	bottom: -15%;
	background: radial-gradient( circle, rgba( 214, 54, 56, calc( 0.22 * var( --bbb-oa-glow-strength, 1 ) ) ), transparent 70% );
	animation-direction: reverse;
	animation-duration: calc( 14s * var( --bbb-oa-speed, 1 ) );
}

@keyframes bbb-oa-glow-breathe {
	0%, 100% { transform: scale( 1 ); opacity: 0.7; }
	50% { transform: scale( 1.12 ); opacity: 1; }
}

/* ---- 8 & 9. Premium Blood Flow / Live Blood Stream ----------------
 * Both are combinations of the modules above; the shared classes
 * (.bbb-oa-glow-blob, .bbb-oa-flow-wave, .bbb-oa-drop, .bbb-oa-cell,
 * .bbb-oa-mparticle, .bbb-oa-heartbeat-glow) already provide every
 * rule needed — no extra selectors required here.
 * ------------------------------------------------------------------ */