/* ==========================================================================
   Blood Bank > Premium App Header Background
   ==========================================================================
   Purely decorative, purely CSS. Adds an animated deep-red gradient, a
   faint ECG heartbeat line, a slow pulsing glow, and a soft glass-shine
   sweep BEHIND the existing `.app-header` content (logo, title, theme
   toggle, notification button).

   Isolation guarantees:
   - New file, new stylesheet handle. Nothing here edits app.css or
     header-manager.css; both are untouched.
   - Every effect lives on `.app-header::before` / `.app-header::after`
     (z-index: 0, pointer-events: none), stacked strictly BEHIND the real
     header children, which get z-index:1 without changing their layout
     (position/display/flow is untouched — they already all render above
     a sticky/flex parent's ::before/::after by paint order, the
     z-index just makes it explicit and future-proof).
   - `.app-header` keeps its own padding/height/sticky/flex behavior
     exactly as defined in app.css. This file only adds a background
     layer and (if present) participates with html.bbb-hm-bg-custom by
     rendering underneath it — an admin's custom header background in
     Header Manager will simply sit on top of this animation, so nothing
     conflicts with that override system.
   - No JavaScript. No layout properties are animated — only
     background-position, opacity, and transform, so this stays on the
     compositor thread and is cheap on mobile.
   ========================================================================== */

.app-header {
	/* Establish a clipping + stacking context for the decorative layers
	   without altering the header's own sticky/flex positioning. */
	overflow: hidden;
	isolation: isolate;
}

.app-header > * {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------
   Layer 1 — Animated deep blood-red gradient
   Sits at the very back. Slides its gradient stops slowly back and
   forth using background-position (compositor-friendly, no repaint of
   geometry).
   -------------------------------------------------------------------- */
.app-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		120deg,
		#5C0008 0%,
		#7A0010 32%,
		#A30016 64%,
		#C1121F 100%
	);
	background-size: 220% 220%;
	animation: bbb-hm-gradient-shift 13s ease-in-out infinite;
	will-change: background-position;
}

@keyframes bbb-hm-gradient-shift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* --------------------------------------------------------------------
   Layer 2 — ECG heartbeat line + soft glow + glass shine
   All three combined into a single ::after so we only add one extra
   box, each as its own background image / gradient, each with its own
   independent animation. Kept strictly behind header content via
   z-index:0 (same stacking layer as ::before, painted immediately
   after it).
   -------------------------------------------------------------------- */
.app-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;

	background-image:
		/* Glass shine sweep: a soft angled white band */
		linear-gradient(
			100deg,
			transparent 0%,
			transparent 40%,
			rgba(255, 255, 255, 0.08) 48%,
			rgba(255, 255, 255, 0.08) 52%,
			transparent 60%,
			transparent 100%
		),
		/* Soft glow: large blurred radial highlight */
		radial-gradient(
			ellipse 60% 140% at 50% 50%,
			rgba(255, 40, 40, 0.25) 0%,
			rgba(255, 40, 40, 0.12) 40%,
			rgba(255, 40, 40, 0) 70%
		),
		/* ECG line, drawn as a repeating pulse pattern */
		repeating-linear-gradient(
			to right,
			transparent 0px,
			transparent 38px,
			rgba(255, 255, 255, 0.13) 39px,
			rgba(255, 255, 255, 0.13) 40px,
			transparent 41px,
			transparent 54px,
			rgba(255, 255, 255, 0.13) 58px,
			rgba(255, 255, 255, 0.05) 60px,
			transparent 64px,
			transparent 140px
		);

	background-size:
		220% 100%,
		140% 260%,
		480px 2px;
	background-position:
		0% 0%,
		50% 50%,
		0 62%;
	background-repeat: no-repeat, no-repeat, repeat-x;

	animation:
		bbb-hm-shine-sweep 6s linear infinite,
		bbb-hm-glow-pulse 4s ease-in-out infinite,
		bbb-hm-ecg-scroll 9s linear infinite;
	transform-origin: 50% 50%;
	will-change: background-position, transform, opacity;
}

/* Glass shine: slides the highlight band across the header */
@keyframes bbb-hm-shine-sweep {
	0%   { background-position: -60% 0%, 50% 50%, 0 62%; }
	100% { background-position: 160% 0%, 50% 50%, 0 62%; }
}

/* Soft glow: gentle scale pulse, transform-only (no filter/blur cost) */
@keyframes bbb-hm-glow-pulse {
	0%, 100% { transform: scale(1);    opacity: 0.85; }
	50%      { transform: scale(1.08); opacity: 1;    }
}

/* ECG heartbeat: the thin pulse pattern drifts horizontally, looping
   seamlessly (pattern tile width matches the translate distance). */
@keyframes bbb-hm-ecg-scroll {
	0%   { background-position: 0% 0%,   50% 50%, 0px 62%; }
	100% { background-position: 220% 0%, 50% 50%, -480px 62%; }
}

/* --------------------------------------------------------------------
   Respect reduced motion: freeze every layer on a single, still frame
   of the same premium look instead of disabling the effect outright.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.app-header::before,
	.app-header::after {
		animation: none !important;
	}
	.app-header::before {
		background-position: 30% 50%;
	}
	.app-header::after {
		background-position: 50% 0%, 50% 50%, 0 62%;
		transform: scale(1);
		opacity: 0.9;
	}
}

/* --------------------------------------------------------------------
   If an admin has set a custom header background via Blood Bank >
   Header Manager, that explicit choice should win — this premium
   animation steps aside rather than fighting a deliberate override.
   -------------------------------------------------------------------- */
html.bbb-hm-bg-custom .app-header::before,
html.bbb-hm-bg-custom .app-header::after {
	display: none;
}

/* --------------------------------------------------------------------
   Dark Mode fix — this animated layer is a fixed, non-theme-aware deep
   blood-red gradient. In Light Mode that is the intended premium look
   whenever nothing else is configured. In Dark Mode it must never be
   the thing that decides the header's color:

   - When Dark Mode has an explicit admin override, `bbb-hm-bg-custom`
     is already present (see assets/js/header-manager.js) and the rule
     above already hides this layer, so the override paints cleanly.
   - When Dark Mode has NO explicit override, header-manager.js's
     structural fallback intentionally clears `--bbb-hm-bg` and removes
     `bbb-hm-bg-custom` so the semantic `--header-bg` Dark surface token
     (see assets/css/app.css `.app-header`) can show through instead of
     leaking the Light-only color. Without this rule, clearing that
     class also silently re-revealed this opaque red layer, which sits
     on top of `.app-header`'s real background and painted over the
     semantic Dark surface — that was the reported "header turns red in
     Dark Mode" bug. Simply hiding this decorative layer whenever
     Dark Mode is active (regardless of the custom-bg class) fixes both
     cases at once and leaves Light Mode completely untouched. */
[data-theme="dark"] .app-header::before,
[data-theme="dark"] .app-header::after {
	display: none;
}

/* ======================================================================
   Option 2 — exact responsive double soft-wave lower edge
   ----------------------------------------------------------------------
   Uses an SVG alpha mask rather than border-radius. The mask scales to
   the actual header width, so the same two-wave silhouette is preserved
   on Android/mobile and desktop without changing header content/layout.
   ====================================================================== */
.app-header {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 240' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H1000V198C930 177 884 181 826 205C747 238 665 231 582 207C497 183 442 177 367 199C274 227 185 232 104 215C60 206 26 196 0 181V0Z'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: top left;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 240' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H1000V198C930 177 884 181 826 205C747 238 665 231 582 207C497 183 442 177 367 199C274 227 185 232 104 215C60 206 26 196 0 181V0Z'/%3E%3C/svg%3E");
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	mask-position: top left;
	/* Reserve the curved lower band inside the header so controls never
	   intersect the cut, including custom Header Manager heights. */
	padding-bottom: max(28px, var(--bbb-hm-padding-bottom-base, 28px));
}

/* Header Manager can set a radius; Option 2 intentionally owns only the
   lower silhouette, so keep the mask authoritative in both themes. */
html.bbb-hm-radius-custom .app-header {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

/* 2026-08-04 — Option 2 refinement: shallow, premium double-wave.
   Keeps the existing header controls/layout intact while reducing the
   lower cut depth so dashboard content does not get pushed down. */
.app-header {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 220' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H1000V202C930 199 885 201 824 208C748 217 672 216 594 208C511 199 444 198 365 207C277 217 190 217 108 210C61 206 28 202 0 197V0Z'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: top left;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 220' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0H1000V202C930 199 885 201 824 208C748 217 672 216 594 208C511 199 444 198 365 207C277 217 190 217 108 210C61 206 28 202 0 197V0Z'/%3E%3C/svg%3E");
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	mask-position: top left;
	padding-bottom: max(12px, var(--bbb-hm-padding-bottom-base, 12px));
}

/* The dashboard already has its own hero artwork. Remove only the small
   top-right decorative background blob that becomes exposed under the
   curved header; all other dashboard decoration remains unchanged. */
.db-page::before {
	display: none !important;
}

/* ======================================================================
   2026-08-04 — Subtle blood-drop background animation
   ----------------------------------------------------------------------
   Decorative-only overlay. It deliberately does NOT paint a header color,
   so Header Manager background/gradient changes remain visible underneath.
   The existing Option-2 mask/wave, controls, layout and spacing are untouched.
   ====================================================================== */
.app-header::before {
	/* Keep this layer transparent so the real/custom header background wins. */
	display: block !important;
	background: none !important;
	animation: none !important;
}

.app-header::after {
	display: block !important;
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .52;
	/* Six soft white blood-drop silhouettes, intentionally sparse. */
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill='white' fill-opacity='.26' d='M12 0C9.8 5.3 2 13.4 2 20.2C2 26.7 6.5 31 12 31s10-4.3 10-10.8C22 13.4 14.2 5.3 12 0Z'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill='white' fill-opacity='.18' d='M12 0C9.8 5.3 2 13.4 2 20.2C2 26.7 6.5 31 12 31s10-4.3 10-10.8C22 13.4 14.2 5.3 12 0Z'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill='white' fill-opacity='.22' d='M12 0C9.8 5.3 2 13.4 2 20.2C2 26.7 6.5 31 12 31s10-4.3 10-10.8C22 13.4 14.2 5.3 12 0Z'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill='white' fill-opacity='.16' d='M12 0C9.8 5.3 2 13.4 2 20.2C2 26.7 6.5 31 12 31s10-4.3 10-10.8C22 13.4 14.2 5.3 12 0Z'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill='white' fill-opacity='.20' d='M12 0C9.8 5.3 2 13.4 2 20.2C2 26.7 6.5 31 12 31s10-4.3 10-10.8C22 13.4 14.2 5.3 12 0Z'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill='white' fill-opacity='.14' d='M12 0C9.8 5.3 2 13.4 2 20.2C2 26.7 6.5 31 12 31s10-4.3 10-10.8C22 13.4 14.2 5.3 12 0Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 14px 19px, 20px 27px, 11px 15px, 17px 23px, 13px 18px, 19px 26px;
	background-position: 8% 112%, 25% 135%, 43% 118%, 62% 145%, 80% 125%, 94% 138%;
	animation: bbb-blood-drops-float 10s linear infinite !important;
	will-change: background-position, opacity;
}

@keyframes bbb-blood-drops-float {
	0% {
		background-position: 8% 112%, 25% 135%, 43% 118%, 62% 145%, 80% 125%, 94% 138%;
		opacity: .18;
	}
	18% { opacity: .52; }
	50% {
		background-position: 9% 48%, 24% 70%, 44% 55%, 61% 78%, 81% 62%, 93% 72%;
		opacity: .50;
	}
	82% { opacity: .38; }
	100% {
		background-position: 7% -28%, 26% -10%, 42% -22%, 63% 0%, 79% -16%, 95% -6%;
		opacity: 0;
	}
}

/* Dark mode keeps the same animation, only softer so it does not glare. */
[data-theme="dark"] .app-header::after {
	display: block !important;
	opacity: .40;
}

/* A custom Header Manager background must NOT disable the animation. */
html.bbb-hm-bg-custom .app-header::before,
html.bbb-hm-bg-custom .app-header::after {
	display: block !important;
}

@media (prefers-reduced-motion: reduce) {
	.app-header::after {
		animation: none !important;
		background-position: 8% 35%, 25% 70%, 43% 48%, 62% 78%, 80% 55%, 94% 68%;
		opacity: .28;
	}
}