/* os-v11/background.css — hyOS v1.1
 * Aurora background system with 6-layer animated radial gradient orbs
 * Wallpaper variants: image, dark-tinted, clean light mode
 * References: Apple macOS 26 aurora desktop, hyOS visual design spec
 */

/* ──────────────────────────────────────────────────────────────
   Root Container
   ────────────────────────────────────────────────────────────── */
.v11-bg {
  position: fixed;
  inset: 0;
  z-index: var(--v11-z-bg);
  overflow: hidden;
  contain: strict;
  will-change: transform;

  /* Base gradient — deep space violet foundation */
  background:
    /* Orb 1: violet — bottom-left */
    radial-gradient(ellipse 70% 60% at 12% 85%,
      rgba(110, 40, 220, 0.65) 0%,
      rgba(80, 20, 180, 0.30) 45%,
      transparent 72%),

    /* Orb 2: magenta — top-right */
    radial-gradient(ellipse 55% 50% at 88% 12%,
      rgba(200, 30, 160, 0.60) 0%,
      rgba(160, 20, 120, 0.28) 42%,
      transparent 68%),

    /* Orb 3: electric blue — center */
    radial-gradient(ellipse 60% 55% at 30% 45%,
      rgba(30, 80, 240, 0.45) 0%,
      rgba(20, 50, 200, 0.20) 50%,
      transparent 75%),

    /* Orb 4: indigo — top-left accent */
    radial-gradient(ellipse 40% 35% at 5% 10%,
      rgba(60, 20, 200, 0.50) 0%,
      rgba(40, 10, 160, 0.22) 48%,
      transparent 70%),

    /* Orb 5: warm pink — bottom-right */
    radial-gradient(ellipse 50% 45% at 92% 90%,
      rgba(240, 60, 120, 0.55) 0%,
      rgba(200, 40, 100, 0.25) 44%,
      transparent 70%),

    /* Orb 6: center ambient — deep purple core */
    radial-gradient(ellipse 80% 70% at 50% 50%,
      rgba(90, 20, 160, 0.30) 0%,
      rgba(60, 10, 120, 0.14) 55%,
      transparent 78%),

    /* Base: rich deep space */
    linear-gradient(155deg,
      #080828 0%,
      #140830 40%,
      #100428 70%,
      #080828 100%);
}

/* ──────────────────────────────────────────────────────────────
   Animated Layer 1 (::before) — orb-1 cycle
   Morphs position and opacity over 14 seconds
   ────────────────────────────────────────────────────────────── */
.v11-bg::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;

  background:
    radial-gradient(ellipse 55% 45% at 25% 70%,
      rgba(130, 50, 255, 0.55) 0%,
      rgba(100, 30, 220, 0.22) 50%,
      transparent 72%),
    radial-gradient(ellipse 42% 38% at 75% 20%,
      rgba(220, 40, 180, 0.50) 0%,
      rgba(180, 20, 150, 0.20) 48%,
      transparent 70%),
    radial-gradient(ellipse 48% 40% at 50% 55%,
      rgba(40, 90, 255, 0.35) 0%,
      rgba(20, 60, 220, 0.14) 55%,
      transparent 74%);

  animation: v11-orb-1 14s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* ──────────────────────────────────────────────────────────────
   Animated Layer 2 (::after) — orb-2 cycle
   Counter-rotates to create depth and parallax feel over 18s
   ────────────────────────────────────────────────────────────── */
.v11-bg::after {
  content: '';
  position: absolute;
  inset: -15%;
  z-index: 2;
  pointer-events: none;

  background:
    radial-gradient(ellipse 35% 45% at 80% 65%,
      rgba(255, 50, 100, 0.42) 0%,
      rgba(220, 30, 80, 0.18) 50%,
      transparent 72%),
    radial-gradient(ellipse 50% 40% at 15% 30%,
      rgba(60, 160, 255, 0.38) 0%,
      rgba(30, 120, 240, 0.15) 52%,
      transparent 74%),
    radial-gradient(ellipse 38% 32% at 62% 85%,
      rgba(160, 60, 255, 0.45) 0%,
      rgba(120, 40, 220, 0.18) 48%,
      transparent 70%);

  animation: v11-orb-2 18s ease-in-out infinite alternate-reverse;
  will-change: transform, opacity;
}

/* ──────────────────────────────────────────────────────────────
   @keyframes — Orb 1 (14s)
   ────────────────────────────────────────────────────────────── */
@keyframes v11-orb-1 {
  0% {
    transform: translate(0%, 0%) scale(1);
    opacity: 0.90;
  }
  20% {
    transform: translate(3%, -4%) scale(1.06);
    opacity: 1;
  }
  40% {
    transform: translate(-5%, 3%) scale(0.96);
    opacity: 0.85;
  }
  60% {
    transform: translate(4%, 5%) scale(1.04);
    opacity: 0.95;
  }
  80% {
    transform: translate(-3%, -2%) scale(1.08);
    opacity: 0.88;
  }
  100% {
    transform: translate(5%, -5%) scale(0.94);
    opacity: 0.92;
  }
}

/* ──────────────────────────────────────────────────────────────
   @keyframes — Orb 2 (18s)
   ────────────────────────────────────────────────────────────── */
@keyframes v11-orb-2 {
  0% {
    transform: translate(0%, 0%) scale(1);
    opacity: 0.88;
  }
  15% {
    transform: translate(-4%, 3%) scale(1.05);
    opacity: 1;
  }
  35% {
    transform: translate(5%, -5%) scale(0.95);
    opacity: 0.80;
  }
  55% {
    transform: translate(-3%, -4%) scale(1.07);
    opacity: 0.94;
  }
  75% {
    transform: translate(4%, 4%) scale(0.98);
    opacity: 0.86;
  }
  100% {
    transform: translate(-5%, 2%) scale(1.03);
    opacity: 0.90;
  }
}

/* ──────────────────────────────────────────────────────────────
   Wallpaper: Image Mode
   When a wallpaper image URL is applied, suppress aurora orbs
   ────────────────────────────────────────────────────────────── */
.v11-bg.wp-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: none;
}

.v11-bg.wp-img::before,
.v11-bg.wp-img::after {
  display: none;
}

/* ──────────────────────────────────────────────────────────────
   Wallpaper: Dark Tint Overlay
   Semi-transparent dark overlay over wallpaper for legibility
   ────────────────────────────────────────────────────────────── */
.v11-bg.wp-dark::before {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 16, 0.55);
  animation: none;
  backdrop-filter: none;
  z-index: 3;
}

.v11-bg.wp-dark::after {
  display: none;
}

/* ──────────────────────────────────────────────────────────────
   Clean/Light Mode Override
   Softer, lighter background for the clean mode
   ────────────────────────────────────────────────────────────── */
.clean .v11-bg,
[data-theme="light"] .v11-bg {
  background:
    radial-gradient(ellipse 70% 60% at 12% 85%,
      rgba(160, 100, 255, 0.18) 0%,
      rgba(120, 60, 220, 0.08) 45%,
      transparent 72%),
    radial-gradient(ellipse 55% 50% at 88% 12%,
      rgba(220, 80, 200, 0.15) 0%,
      rgba(180, 60, 170, 0.06) 42%,
      transparent 68%),
    radial-gradient(ellipse 60% 55% at 30% 45%,
      rgba(80, 120, 255, 0.12) 0%,
      rgba(60, 90, 220, 0.05) 50%,
      transparent 75%),
    linear-gradient(155deg,
      #f5f4ff 0%,
      #ede8ff 35%,
      #f0eeff 65%,
      #f8f6ff 100%);
}

.clean .v11-bg::before,
[data-theme="light"] .v11-bg::before {
  opacity: 0.30;
}

.clean .v11-bg::after,
[data-theme="light"] .v11-bg::after {
  opacity: 0.18;
}

/* ──────────────────────────────────────────────────────────────
   Reduced Motion: Static Background
   Disable all animations for accessibility
   ────────────────────────────────────────────────────────────── */