/**
 * Background Decorative Circles
 * Adds subtle gradient circles to the background for visual interest
 */

.layout-bg-circle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 2s ease, visibility 2s ease;
  will-change: transform;
}

.layout-bg-circle.ready {
  opacity: 1;
  visibility: visible;
}

.layout-bg-circle-1 {
  width: 30rem;
  height: 30rem;
  bottom: -15rem;
  right: -11.25rem;
  /* Default fallback to purple - will be overridden by JavaScript */
  background: radial-gradient(
    circle,
    rgba(158, 119, 237, 0.15) 0%,
    rgba(158, 119, 237, 0.08) 40%,
    transparent 70%
  );
  filter: blur(2.5rem);
  animation-timing-function: cubic-bezier(0.45, 0.0, 0.55, 1.0);
  animation-iteration-count: infinite;
  transform-origin: center center;
}

.layout-bg-circle-2 {
  width: 15.9375rem;
  height: 15.9375rem;
  bottom: 9.375rem;
  right: -6.25rem;
  background-color: rgba(255, 128, 102, 0.18);
  filter: blur(7rem);
  animation-timing-function: cubic-bezier(0.42, 0.0, 0.58, 1.0);
  animation-iteration-count: infinite;
  transform-origin: center center;
}

/* RTL Support */
[dir="rtl"] .layout-bg-circle-1,
[dir="rtl"] .layout-bg-circle-2 {
  right: auto;
  left: -11.25rem;
}

[dir="rtl"] .layout-bg-circle-2 {
  left: -6.25rem;
}

/* Dark theme adjustments */
[data-theme="dark"] .layout-bg-circle-1 {
  /* Default fallback - will be overridden by JavaScript */
  background: radial-gradient(
    circle,
    rgba(158, 119, 237, 0.10) 0%,
    rgba(158, 119, 237, 0.05) 40%,
    transparent 70%
  );
}

[data-theme="dark"] .layout-bg-circle-2 {
  background-color: rgba(255, 128, 102, 0.12);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .layout-bg-circle-1 {
    width: 20rem;
    height: 20rem;
    bottom: -10rem;
    right: -8rem;
  }

  .layout-bg-circle-2 {
    width: 10rem;
    height: 10rem;
    bottom: 5rem;
    right: -4rem;
  }

  [dir="rtl"] .layout-bg-circle-1 {
    left: -8rem;
  }

  [dir="rtl"] .layout-bg-circle-2 {
    left: -4rem;
  }
}