/* ============================================================
   bg-animation.css — animated background layers
   FlexGrow Learning Centre
   Loaded after global / components / responsive, before motion.css.
   Visual only: it adds layers BEHIND the content and never changes
   menus, navigation or page content. Drawn by js/bg-animation.js.
   ============================================================ */

/* --- 1. Page-wide layer (rearmost, never catches clicks) --- */
#bg-layer {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(156, 48, 73, .10), transparent 60%),
    radial-gradient(900px 600px at 100% 110%, rgba(198, 156, 78, .16), transparent 60%);
}
#bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Soft light blobs that drift slowly (pure CSS) */
.bg-blob {
  position: absolute; border-radius: 50%; opacity: .6;   /* edges are already soft radial gradients: no blur filter (it was very costly) */
  will-change: transform;
}
.bg-blob.b1 { width: 46vmax; height: 46vmax; left: -14vmax; top: -12vmax;
  background: radial-gradient(circle, rgba(156,48,73,.22), transparent 68%);
  animation: bg-drift-a 38s ease-in-out infinite alternate; }
.bg-blob.b2 { width: 40vmax; height: 40vmax; right: -12vmax; top: 18vh;
  background: radial-gradient(circle, rgba(198,156,78,.26), transparent 68%);
  animation: bg-drift-b 46s ease-in-out infinite alternate; }
.bg-blob.b3 { width: 36vmax; height: 36vmax; left: 22vw; bottom: -16vmax;
  background: radial-gradient(circle, rgba(109,26,46,.16), transparent 68%);
  animation: bg-drift-c 52s ease-in-out infinite alternate; }
@keyframes bg-drift-a { to { transform: translate3d(14vw, 10vh, 0) scale(1.15); } }
@keyframes bg-drift-b { to { transform: translate3d(-16vw, 12vh, 0) scale(.9); } }
@keyframes bg-drift-c { to { transform: translate3d(12vw, -14vh, 0) scale(1.2); } }

/* Alternating sections are semi-transparent so the layer shows through */
.section-alt { background: rgba(242, 233, 222, .72); }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .section-alt { background: color-mix(in srgb, var(--paper-alt) 62%, transparent); }
}

/* --- 2. Canvases inside dark / alternating areas (hero, page titles, footer, .section-alt) --- */
.bg-host { position: relative; isolation: isolate; overflow: hidden; }
.bg-host-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}
/* All original content stays above the canvas */
.bg-host > :where(*:not(.bg-host-canvas)) { position: relative; z-index: 1; }
/* body is a flex column: without this the footer (overflow:hidden) could collapse */
.site-footer { flex-shrink: 0; }

/* --- 3. Slow colour glows + floating illustration in the dark banners --- */
.hero, .page-hero-sm { position: relative; isolation: isolate; overflow: hidden; }
.hero::before, .page-hero-sm::before {
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 40% at 18% 32%, rgba(201,162,77,.20), transparent 70%),
    radial-gradient(40% 46% at 82% 68%, rgba(176,58,92,.30), transparent 70%),
    radial-gradient(28% 34% at 58% 18%, rgba(255,255,255,.07), transparent 70%);
  animation: glowDrift 20s ease-in-out infinite alternate;
}
.page-hero-sm::before { opacity: .7; animation-duration: 26s; }
@keyframes glowDrift {
  0%   { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
  100% { transform: translate3d(5%, 4%, 0) rotate(7deg) scale(1.08); }
}
.hero-figure { animation: floatY 7s ease-in-out infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* --- Reduced motion / print --- */
@media (prefers-reduced-motion: reduce) {
  .bg-blob, .hero::before, .page-hero-sm::before, .hero-figure { animation: none !important; }
}
@media print {
  #bg-layer, .bg-host-canvas { display: none !important; }
}