/*
 * lanobots-background.css
 * LanoBots — LanoVerse Background Engine: Static layers  v4
 *
 * Layer order (bottom → top):
 *   html base color                (#050509 — prevents white flash)
 *   fallback image  (.lb-bg-fallback — WebP page fallback, fades after live engine starts)
 *   atmosphere      (.lb-bg-atmosphere — radial gradient orbs, CSS animation)
 *   nebula          (.lb-bg-nebula    — central cloud, CSS pseudo-elements)
 *   overlay         (.lb-bg-overlay   — optional PNG glow overlay)
 *   texture         (.lb-bg-texture   — faint SVG page-specific grid)
 *   canvas (heads)  (.lb-bg-heads-canvas — OG LanoBot head sprites, JS-driven)
 *   canvas          (.lb-bg-canvas      — particle engine, JS-driven)
 *   hud             (.lb-bg-hud         — floating interface fragments, CSS animation)
 *   page content    (everything else, z-index: 1)
 *
 * Assets:
 *   fallbacks : assets/images/lanobots/background-engine/fallbacks/{desktop,mobile}/
 *   textures  : assets/images/lanobots/background-engine/textures/
 *   overlays  : assets/images/lanobots/background-engine/overlays/
 *   heads     : assets/images/lanobots/background-engine/heads/{png,svg}/
 *
 * html.lb-bg-live  → added by lanobots-background.js once canvas starts.
 *                    Dims the static fallback to ~22% so the live engine shows through.
 *
 * Load order in templates:
 *   tokens → homepage → typography → components → animations → background → tech → [page].css
 *
 * Depends on: lanobots-tokens.css for --font-mono, --dur-*, --ease-*
 */

/* ============================================================
   BASE — html + body
============================================================ */
html {
  background: #050509; /* prevent white flash before engine paints */
}

body[data-lb-theme] {
  background: transparent !important; /* engine canvas handles the bg */
  min-height: 100vh;
}

/* ============================================================
   ENGINE CONTAINER
============================================================ */
#lb-background-engine {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/*
 * Lift all direct body children above the fixed engine.
 * position: relative with no offset is layout-neutral for block elements.
 */
body > *:not(#lb-background-engine) {
  position: relative;
  z-index: 1;
}

/* ============================================================
   LAYER 1 — STATIC FALLBACK IMAGE
   Shows instantly via CSS before JS initialises.
   After the live canvas starts, lanobots-background.js adds
   html.lb-bg-live, which fades this layer to ~22% so the
   engine shines through without a hard cut.
============================================================ */
.lb-bg-fallback {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--lb-fallback-image, none) center / cover no-repeat;
  opacity: 1;
  transition: opacity 1.4s ease;
  will-change: opacity;
}

html.lb-bg-live .lb-bg-fallback {
  opacity: var(--lb-live-fallback-opacity, 0.22);
}

/* Mobile: swap to the compact portrait fallback */
@media (max-width: 767px) {
  .lb-bg-fallback {
    background-image: var(--lb-fallback-image-mobile, var(--lb-fallback-image, none));
  }
}

/* ============================================================
   LAYER 2 — ATMOSPHERE (two radial gradient orbs)
   Drift very slowly via CSS keyframes — no JS needed.
============================================================ */
.lb-bg-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Primary orb — top-left quadrant */
.lb-bg-atmosphere::before {
  content: '';
  position: absolute;
  width: 62vw;
  height: 62vw;
  border-radius: 50%;
  filter: blur(130px);
  opacity: 0.13;
  background: var(--lb-bg-glow, rgba(139,92,246,0.28));
  top: -12vw;
  left: -12vw;
  animation: lb-atm-a 42s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}

/* Secondary orb — bottom-right quadrant */
.lb-bg-atmosphere::after {
  content: '';
  position: absolute;
  width: 44vw;
  height: 44vw;
  border-radius: 50%;
  filter: blur(95px);
  opacity: 0.08;
  background: var(--lb-bg-accent-soft, rgba(139,92,246,0.18));
  bottom: -8vw;
  right: -8vw;
  animation: lb-atm-b 58s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}

@keyframes lb-atm-a {
  0%   { transform: translate(0, 0)           scale(1);    }
  28%  { transform: translate(5vw,  3vw)      scale(1.07); }
  62%  { transform: translate(-3vw, 7vw)      scale(0.94); }
  100% { transform: translate(7vw, -2vw)      scale(1.05); }
}

@keyframes lb-atm-b {
  0%   { transform: translate(0, 0)           scale(1);    }
  38%  { transform: translate(-7vw, -4vw)     scale(1.09); }
  74%  { transform: translate( 3vw,  2vw)     scale(0.91); }
  100% { transform: translate(-4vw,  6vw)     scale(1.05); }
}

/* ============================================================
   LAYER 3c — OPTIONAL PNG GLOW OVERLAY
   Used on Home (purple-glow-overlay.png) for extra nebula depth.
   Other themes set --lb-overlay-opacity to 0 (default) = no cost.
============================================================ */
.lb-bg-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--lb-bg-overlay-image, none) center / cover no-repeat;
  opacity: var(--lb-overlay-opacity, 0);
  mix-blend-mode: screen;
  will-change: opacity;
}

/* ============================================================
   LAYER 3 — TEXTURE (faint page-specific SVG grid)
   SVG files use stroke="currentColor"; setting `color` on this
   element makes currentColor resolve to the page accent.
============================================================ */
.lb-bg-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--lb-bg-accent, #8b5cf6); /* resolved per theme; fallback = home purple */
  background-image: var(--lb-bg-texture);
  background-repeat: repeat;
  opacity: var(--lb-texture-opacity, 0.032);
}

/* ============================================================
   LAYER 3b — NEBULA (central galaxy cloud, one per page theme)
   Injected as <div class="lb-bg-nebula"> by lanobots-background.js
============================================================ */
.lb-bg-nebula {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Primary nebula mass — sits centre-left like the reference */
.lb-bg-nebula::before {
  content: '';
  position: absolute;
  width: 72vw;
  height: 52vw;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(90px);
  opacity: var(--lb-nebula-opacity, 0.20);
  background: radial-gradient(
    ellipse 65% 55% at 42% 52%,
    var(--lb-nebula-core, rgba(100,55,210,0.55)) 0%,
    var(--lb-nebula-mid,  rgba(70, 20,160,0.30)) 38%,
    var(--lb-nebula-edge, rgba(20,  5, 55,0.10)) 72%,
    transparent 100%
  );
  animation: lb-nebula-breathe 26s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Secondary wisp — drifts independently */
.lb-bg-nebula::after {
  content: '';
  position: absolute;
  width: 48vw;
  height: 34vw;
  left: 40%;
  top: 42%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(65px);
  opacity: var(--lb-nebula-wisp-opacity, 0.12);
  background: radial-gradient(
    ellipse,
    var(--lb-nebula-core, rgba(120,70,230,0.42)) 0%,
    transparent 70%
  );
  animation: lb-nebula-drift 40s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes lb-nebula-breathe {
  0%   { opacity: var(--lb-nebula-opacity, 0.20); transform: translate(-50%,-50%) scale(1);    }
  45%  { opacity: calc(var(--lb-nebula-opacity, 0.20) * 1.18); transform: translate(-50%,-50%) scale(1.05); }
  100% { opacity: calc(var(--lb-nebula-opacity, 0.20) * 0.88); transform: translate(-50%,-50%) scale(0.96); }
}

@keyframes lb-nebula-drift {
  0%   { transform: translate(-50%,-50%) translate(0, 0);       }
  35%  { transform: translate(-50%,-50%) translate(5vw, -3vw);  }
  70%  { transform: translate(-50%,-50%) translate(-3vw, 6vw);  }
  100% { transform: translate(-50%,-50%) translate(7vw, -2vw);  }
}

/* Mobile — smaller/dimmer nebula */
@media (max-width: 767px) {
  .lb-bg-nebula::before { width: 110vw; height: 80vw; filter: blur(60px); opacity: calc(var(--lb-nebula-opacity, 0.20) * 0.6); }
  .lb-bg-nebula::after  { display: none; }
}

/* ============================================================
   LAYER 4 — CANVAS (particle system, controlled by JS)
============================================================ */
.lb-bg-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ============================================================
   LAYER 5 — HUD FRAGMENTS
============================================================ */
.lb-bg-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.lb-bg-hud__fragment {
  position: absolute;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lb-bg-accent, #8b5cf6);
  opacity: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  animation: lb-hud-cycle var(--lb-hud-dur, 9s) ease-in-out var(--lb-hud-delay, 0s) infinite;
}

@keyframes lb-hud-cycle {
  0%   { opacity: 0;    }
  12%  { opacity: 0.19; }
  40%  { opacity: 0.13; }
  68%  { opacity: 0.17; }
  90%  { opacity: 0;    }
  100% { opacity: 0;    }
}

/* ============================================================
   PER-THEME CSS CUSTOM PROPERTIES
   Applied via body[data-lb-theme="..."]
   These drive the atmosphere gradient colors + textures.
   They do NOT override --page-accent from tokens.css.
============================================================ */

/* HOME — purple portal */
body[data-lb-theme="home"] {
  --lb-bg-accent:      #8b5cf6;
  --lb-bg-accent-soft: rgba(139, 92, 246, 0.22);
  --lb-bg-glow:        rgba(164, 110, 255, 0.28);
  --lb-fallback-image:        url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/fallbacks/desktop/home-background-fallback.webp');
  --lb-fallback-image-mobile: url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/fallbacks/mobile/home-background-fallback-mobile.webp');
  --lb-bg-texture:     url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/textures/portal-grid.svg');
  --lb-texture-opacity: 0.036;
  --lb-bg-overlay-image: url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/overlays/purple-glow-overlay.png');
  --lb-overlay-opacity: 0.28;
  --lb-live-fallback-opacity: 0.20;
  --lb-nebula-core:         rgba(110, 55, 220, 0.58);
  --lb-nebula-mid:          rgba(75,  22, 165, 0.32);
  --lb-nebula-edge:         rgba(22,   5,  58, 0.12);
  --lb-nebula-opacity:      0.22;
  --lb-nebula-wisp-opacity: 0.14;
}

/* CHARACTERS — red dossier */
body[data-lb-theme="characters"] {
  --lb-bg-accent:      #ef4444;
  --lb-bg-accent-soft: rgba(239, 68, 68, 0.16);
  --lb-bg-glow:        rgba(255, 70, 70, 0.22);
  --lb-fallback-image:        url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/fallbacks/desktop/characters-background-fallback.webp');
  --lb-fallback-image-mobile: url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/fallbacks/mobile/characters-background-fallback-mobile.webp');
  --lb-bg-texture:     url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/textures/dossier-grid.svg');
  --lb-texture-opacity: 0.030;
  --lb-nebula-core:         rgba(200, 30, 30, 0.42);
  --lb-nebula-mid:          rgba(140, 10, 10, 0.24);
  --lb-nebula-edge:         rgba(50,   0,  0, 0.10);
  --lb-nebula-opacity:      0.16;
  --lb-nebula-wisp-opacity: 0.09;
}

/* COMICS — blue archive */
body[data-lb-theme="comics"] {
  --lb-bg-accent:      #3b82f6;
  --lb-bg-accent-soft: rgba(59, 130, 246, 0.17);
  --lb-bg-glow:        rgba(70, 145, 255, 0.24);
  --lb-fallback-image:        url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/fallbacks/desktop/comics-background-fallback.webp');
  --lb-fallback-image-mobile: url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/fallbacks/mobile/comics-background-fallback-mobile.webp');
  --lb-bg-texture:     url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/textures/panel-grid.svg');
  --lb-texture-opacity: 0.030;
  --lb-nebula-core:         rgba(30, 80, 210, 0.44);
  --lb-nebula-mid:          rgba(10, 40, 140, 0.26);
  --lb-nebula-edge:         rgba( 0, 10,  50, 0.10);
  --lb-nebula-opacity:      0.16;
  --lb-nebula-wisp-opacity: 0.10;
}

/* SHOP — green premium */
body[data-lb-theme="shop"] {
  --lb-bg-accent:      #22c55e;
  --lb-bg-accent-soft: rgba(34, 197, 94, 0.13);
  --lb-bg-glow:        rgba(45, 210, 100, 0.18);
  --lb-fallback-image:        url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/fallbacks/desktop/shop-background-fallback.webp');
  --lb-fallback-image-mobile: url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/fallbacks/mobile/shop-background-fallback-mobile.webp');
  --lb-bg-texture:     url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/textures/product-grid.svg');
  --lb-texture-opacity: 0.026;
  --lb-nebula-core:         rgba(10, 140, 50, 0.32);
  --lb-nebula-mid:          rgba( 5,  80, 25, 0.18);
  --lb-nebula-edge:         rgba( 0,  20,  5, 0.08);
  --lb-nebula-opacity:      0.12;
  --lb-nebula-wisp-opacity: 0.07;
}

/* BLOG — white/cream editorial */
body[data-lb-theme="blog"] {
  --lb-bg-accent:      #f4f2ec;
  --lb-bg-accent-soft: rgba(244, 242, 236, 0.10);
  --lb-bg-glow:        rgba(244, 242, 236, 0.14);
  --lb-fallback-image:        url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/fallbacks/desktop/blog-background-fallback.webp');
  --lb-fallback-image-mobile: url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/fallbacks/mobile/blog-background-fallback-mobile.webp');
  --lb-bg-texture:     url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/textures/editorial-grid.svg');
  --lb-texture-opacity: 0.016;
  --lb-nebula-core:         rgba(220, 218, 212, 0.12);
  --lb-nebula-mid:          rgba(180, 178, 172, 0.06);
  --lb-nebula-edge:         rgba( 60,  60,  58, 0.03);
  --lb-nebula-opacity:      0.07;
  --lb-nebula-wisp-opacity: 0.04;
  --lb-live-fallback-opacity: 0.18;
}

/* MEDIA — orange broadcast */
body[data-lb-theme="media"] {
  --lb-bg-accent:      #f97316;
  --lb-bg-accent-soft: rgba(249, 115, 22, 0.15);
  --lb-bg-glow:        rgba(255, 130, 40, 0.24);
  --lb-fallback-image:        url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/fallbacks/desktop/media-background-fallback.webp');
  --lb-fallback-image-mobile: url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/fallbacks/mobile/media-background-fallback-mobile.webp');
  --lb-bg-texture:     url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/textures/broadcast-grid.svg');
  --lb-texture-opacity: 0.028;
  --lb-nebula-core:         rgba(200, 80, 10, 0.38);
  --lb-nebula-mid:          rgba(140, 45,  5, 0.20);
  --lb-nebula-edge:         rgba( 50, 10,  0, 0.08);
  --lb-nebula-opacity:      0.15;
  --lb-nebula-wisp-opacity: 0.09;
}

/* CONTACT — yellow terminal */
body[data-lb-theme="contact"] {
  --lb-bg-accent:      #facc15;
  --lb-bg-accent-soft: rgba(250, 204, 21, 0.12);
  --lb-bg-glow:        rgba(255, 215, 40, 0.20);
  --lb-fallback-image:        url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/fallbacks/desktop/contact-background-fallback.webp');
  --lb-fallback-image-mobile: url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/fallbacks/mobile/contact-background-fallback-mobile.webp');
  --lb-bg-texture:     url('/wp-content/themes/teluro/assets/images/lanobots/background-engine/textures/routing-grid.svg');
  --lb-texture-opacity: 0.030;
  --lb-nebula-core:         rgba(180, 140, 5, 0.30);
  --lb-nebula-mid:          rgba(120,  90, 0, 0.16);
  --lb-nebula-edge:         rgba( 40,  30, 0, 0.07);
  --lb-nebula-opacity:      0.12;
  --lb-nebula-wisp-opacity: 0.07;
}

/* ============================================================
   READABILITY UTILITY
   Add .lb-readable-panel to any section that needs extra
   darkness behind long text (forms, article bodies, pricing).
============================================================ */
.lb-readable-panel {
  background: linear-gradient(
    180deg,
    rgba(5, 5, 9, 0.84),
    rgba(5, 5, 9, 0.72)
  );
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Automatically darken form + terminal areas */
.lb-contact-terminal__form-wrap > .lb-contact-form,
.lb-contact-terminal__info {
  background: rgba(5, 5, 9, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md, 8px);
}

/* ============================================================
   REDUCED MOTION — stop all animation, keep static atmosphere
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .lb-bg-atmosphere::before,
  .lb-bg-atmosphere::after {
    animation: none;
  }
  .lb-bg-atmosphere::before { opacity: 0.07; }
  .lb-bg-atmosphere::after  { opacity: 0.04; }

  .lb-bg-hud__fragment {
    animation: none;
    opacity: 0.09;
  }

  /* Canvas is controlled by JS (paused when prefers-reduced-motion) */
}

/* ============================================================
   MOBILE — lighter atmosphere, no HUD
============================================================ */
@media (max-width: 767px) {
  .lb-bg-atmosphere::before {
    width: 100vw;
    height: 80vw;
    filter: blur(80px);
    opacity: 0.09;
  }
  .lb-bg-atmosphere::after {
    width: 80vw;
    height: 60vw;
    filter: blur(60px);
    opacity: 0.05;
  }
  .lb-bg-hud__fragment {
    display: none;
  }
}