/* ── Ionix Core ambient fibre background ─────────────────────────────────────
   The renderer is decorative and fixed behind the product shell. Keep this
   block scoped to the component so it cannot participate in layout sizing. */
.ionix-ambient-enabled {
  background: var(--page-bg, #f7f7f4);
}

.ionix-ambient-enabled #appRoot {
  position: relative;
  z-index: 1;
}

.ionix-ambient-background {
  --ionix-ambient-base: #030810;
  --ionix-ambient-base-mid: #07101d;
  --ionix-ambient-noise-alpha: .11;
  --ionix-ambient-atmos-left: rgba(0, 213, 165, .11);
  --ionix-ambient-atmos-right: rgba(17, 132, 255, .1);
  --ionix-ambient-atmos-warm: rgba(235, 156, 63, .035);
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  isolation: isolate;
  background: var(--ionix-ambient-base);
}

.ionix-ambient-atmosphere,
.ionix-ambient-layer,
.ionix-ambient-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ionix-ambient-atmosphere {
  background:
    radial-gradient(ellipse 42% 68% at -2% 48%, var(--ionix-ambient-atmos-left), transparent 72%),
    radial-gradient(ellipse 38% 64% at 102% 52%, var(--ionix-ambient-atmos-right), transparent 72%),
    radial-gradient(ellipse 28% 40% at 94% 50%, var(--ionix-ambient-atmos-warm), transparent 78%),
    linear-gradient(112deg, var(--ionix-ambient-base-mid) 0%, var(--ionix-ambient-base) 47%, var(--ionix-ambient-base-mid) 100%);
}

.ionix-ambient-layer {
  display: block;
  transform: translateZ(0);
  image-rendering: auto;
}

.ionix-ambient-layer-base {
  opacity: .98;
}

.ionix-ambient-layer-motion {
  opacity: .72;
  transform: translateZ(0);
}

.ionix-ambient-noise {
  opacity: var(--ionix-ambient-noise-alpha);
  mix-blend-mode: soft-light;
  contain: paint;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

[data-theme="light"] .ionix-ambient-background,
.ionix-ambient-background[data-theme="light"] {
  --ionix-ambient-base: #fbfcfd;
  --ionix-ambient-base-mid: #f5f8fb;
  --ionix-ambient-noise-alpha: .012;
}

[data-theme="light"] .ionix-ambient-layer-motion,
.ionix-ambient-background[data-theme="light"] .ionix-ambient-layer-motion {
  opacity: .52;
}

[data-theme="light"] .ionix-ambient-atmosphere,
.ionix-ambient-background[data-theme="light"] .ionix-ambient-atmosphere {
  background:
    linear-gradient(112deg, var(--ionix-ambient-base-mid) 0%, var(--ionix-ambient-base) 47%, var(--ionix-ambient-base-mid) 100%);
}

.ionix-ambient-enabled .main-content {
  /* Preserve the page surface while allowing only a low-energy trace of the
     continuous field to remain visible through the safe zone. */
  background: rgba(255, 255, 255, .94);
}

[data-theme="dark"] .ionix-ambient-enabled .main-content {
  background: rgba(24, 26, 36, .91);
}

@media (max-width: 980px) {
  .ionix-ambient-layer-motion {
    opacity: .58;
  }

  .ionix-ambient-enabled .main-content {
    background: rgba(255, 255, 255, .97);
  }

  [data-theme="dark"] .ionix-ambient-enabled .main-content {
    background: rgba(24, 26, 36, .96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ionix-ambient-layer-motion {
    opacity: 0;
  }
}

/* Touch displays use the same static artwork with a quieter low-resolution
   overlay and no noise blend. */
@media (pointer: coarse) {
  .ionix-ambient-layer-motion {
    opacity: .42;
  }

  .ionix-ambient-noise {
    display: none;
  }
}