/* ==========================================================================
   NAZELVO — Blue ambient background (v2.5.1)
   Loaded after motion.css. Colour + background animation only: no layout,
   copy or content changes. Everything animates transform/opacity (GPU-cheap)
   and switches off under prefers-reduced-motion.

   Palette (matches the #0B2A5B navy header):
     navy #0B2A5B · royal #1E5BFF · azure #3B8CFF · sky #6CB4FF · ice #BFDDFF
   ========================================================================== */

:root {
	--nz-blue-navy:  11, 42, 91;
	--nz-blue-royal: 30, 91, 255;
	--nz-blue-azure: 59, 140, 255;
	--nz-blue-sky:   108, 180, 255;
	--nz-blue-cyan:  14, 165, 233;
}

/* ---- 1. Recolour the existing ambient layer (violet/mint → blues) -------- */
.nz-motion-bg::before {
	background: conic-gradient(from 0deg at 50% 50%,
		rgba(var(--nz-blue-royal), .09), rgba(var(--nz-blue-cyan), .06), rgba(var(--nz-blue-azure), .09)) !important;
}
.nz-motion-orb-a {
	background: radial-gradient(circle, rgba(var(--nz-blue-royal), .34) 0%, rgba(var(--nz-blue-royal), .15) 35%, transparent 70%) !important;
}
.nz-motion-orb-b {
	background: radial-gradient(circle, rgba(var(--nz-blue-cyan), .30) 0%, rgba(var(--nz-blue-cyan), .13) 35%, transparent 70%) !important;
}
.nz-motion-orb-c {
	background: radial-gradient(circle, rgba(var(--nz-blue-azure), .28) 0%, rgba(var(--nz-blue-azure), .11) 38%, transparent 70%) !important;
}
.nz-motion-grid {
	background-image:
		linear-gradient(rgba(var(--nz-blue-royal), .12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--nz-blue-azure), .10) 1px, transparent 1px) !important;
}
.nz-motion-glow {
	background: radial-gradient(circle, rgba(var(--nz-blue-azure), .16), rgba(var(--nz-blue-sky), .05) 38%, transparent 70%) !important;
}

/* Hero: same depth scene, in blue */
.nz-hero { background: linear-gradient(180deg, #DCEBFF 0%, #EEF6FF 55%, #FFFFFF 100%) !important; }
.nz-fx-orb-1 { background: radial-gradient(circle, rgba(var(--nz-blue-royal), .30), rgba(var(--nz-blue-royal), 0) 68%) !important; }
.nz-fx-orb-2 { background: radial-gradient(circle, rgba(var(--nz-blue-cyan), .26), rgba(var(--nz-blue-cyan), 0) 68%) !important; }
.nz-fx-light { background: radial-gradient(circle, rgba(255,255,255,.95), rgba(var(--nz-blue-sky), .26) 42%, transparent 70%) !important; }
.nz-fx-lines path,
.nz-fx-lines circle { stroke: rgba(var(--nz-blue-royal), .35) !important; }

/* ---- 2. New animated layers (markup added in header.php) ----------------- */

/* Flowing aurora ribbons: wide soft bands that drift sideways and breathe. */
.nz-blue-ribbon {
	position: absolute;
	left: -30%;
	width: 160%;
	height: 38vh;
	border-radius: 50%;
	opacity: .55;
	will-change: transform, opacity;
}
.nz-blue-ribbon-1 {
	top: 6vh;
	background: linear-gradient(90deg, transparent 0%, rgba(var(--nz-blue-azure), .26) 30%, rgba(var(--nz-blue-royal), .20) 55%, rgba(var(--nz-blue-sky), .26) 78%, transparent 100%);
	transform: rotate(-8deg);
	animation: nzRibbon1 19s ease-in-out infinite alternate;
}
.nz-blue-ribbon-2 {
	top: 38vh;
	height: 32vh;
	background: linear-gradient(90deg, transparent 0%, rgba(var(--nz-blue-cyan), .20) 28%, rgba(var(--nz-blue-azure), .24) 58%, rgba(var(--nz-blue-royal), .16) 80%, transparent 100%);
	transform: rotate(6deg);
	animation: nzRibbon2 23s ease-in-out infinite alternate;
}
.nz-blue-ribbon-3 {
	top: 66vh;
	height: 30vh;
	opacity: .45;
	background: linear-gradient(90deg, transparent 0%, rgba(var(--nz-blue-royal), .18) 35%, rgba(var(--nz-blue-sky), .26) 62%, transparent 100%);
	transform: rotate(-4deg);
	animation: nzRibbon3 27s ease-in-out infinite alternate;
}
@keyframes nzRibbon1 {
	0%   { transform: translate3d(-6%, 0, 0)  rotate(-8deg) scaleY(.85); opacity: .35; }
	100% { transform: translate3d( 8%, 6vh, 0) rotate(-3deg) scaleY(1.2); opacity: .65; }
}
@keyframes nzRibbon2 {
	0%   { transform: translate3d( 7%, 0, 0)   rotate(6deg) scaleY(1.1);  opacity: .30; }
	100% { transform: translate3d(-8%, -5vh, 0) rotate(1deg) scaleY(.85); opacity: .60; }
}
@keyframes nzRibbon3 {
	0%   { transform: translate3d(-5%, 0, 0)  rotate(-4deg) scaleY(.9);  opacity: .30; }
	100% { transform: translate3d( 6%, -6vh, 0) rotate(2deg) scaleY(1.15); opacity: .55; }
}

/* Rising light motes: tiny blue bokeh dots floating upward. */
.nz-blue-motes { position: absolute; inset: 0; overflow: hidden; }
.nz-blue-motes i {
	position: absolute;
	bottom: -24px;
	left: var(--x, 50%);
	width: var(--s, 8px);
	height: var(--s, 8px);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--nz-blue-sky), .85), rgba(var(--nz-blue-azure), .25) 60%, transparent 72%);
	opacity: 0;
	will-change: transform, opacity;
	animation: nzMote var(--t, 16s) linear var(--d, 0s) infinite;
}
@keyframes nzMote {
	0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
	12%  { opacity: .75; }
	50%  { transform: translate3d(var(--dx, 24px), -55vh, 0) scale(1); }
	88%  { opacity: .55; }
	100% { transform: translate3d(calc(var(--dx, 24px) * -1), -112vh, 0) scale(.8); opacity: 0; }
}

/* A slow diagonal sheen that sweeps across the whole page every ~14s. */
.nz-blue-sheen {
	position: absolute;
	inset: -20% -50%;
	background: linear-gradient(115deg, transparent 42%, rgba(var(--nz-blue-sky), .13) 50%, transparent 58%);
	transform: translateX(-60%);
	animation: nzSheen 14s ease-in-out infinite;
	will-change: transform;
}
@keyframes nzSheen {
	0%, 55% { transform: translateX(-60%); }
	100%    { transform: translateX(60%); }
}

/* ---- 3. Lighter on phones, off for reduced motion ------------------------ */
@media (max-width: 700px) {
	.nz-blue-ribbon { height: 26vh; opacity: .4; }
	.nz-blue-ribbon-3,
	.nz-blue-motes i:nth-child(n+7),
	.nz-blue-sheen { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.nz-blue-ribbon, .nz-blue-motes i, .nz-blue-sheen { animation: none !important; }
	.nz-blue-motes { display: none; }
}