/**
 * Legal Editorial - Animated Background Layers
 * Subtle, professional ambiance with scroll-based transitions
 */

/* Fixed Background Canvas */
.le-background-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.le-bg-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 1.2s var(--le-ease-elegant), transform 2s var(--le-ease-elegant);
}

/* Layer 1: Base - Warm parchment with brass accents */
.le-bg-layer-1 {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(184, 134, 11, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(30, 58, 95, 0.03) 0%, transparent 50%),
    linear-gradient(135deg, var(--le-bg-primary) 0%, var(--le-bg-secondary) 100%);
}

/* Layer 2: Mid-scroll - Intensified brass glow */
.le-bg-layer-2 {
  background:
    radial-gradient(circle at 50% 50%, rgba(184, 134, 11, 0.1) 0%, transparent 40%),
    linear-gradient(180deg, transparent 0%, rgba(30, 58, 95, 0.02) 100%);
  opacity: 0;
}

/* Layer 3: Deep scroll - Cooler, more serious tone */
.le-bg-layer-3 {
  background:
    radial-gradient(ellipse at 70% 40%, rgba(30, 58, 95, 0.05) 0%, transparent 60%),
    linear-gradient(225deg, var(--le-bg-secondary) 0%, var(--le-bg-tertiary) 100%);
  opacity: 0;
}

/* Subtle legal motif - grid pattern */
.le-legal-motif {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.012;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 80px, var(--le-primary) 80px, var(--le-primary) 81px),
    repeating-linear-gradient(90deg, transparent, transparent 80px, var(--le-primary) 80px, var(--le-primary) 81px);
  background-size: 80px 80px;
  transform: rotate(-1deg) scale(1.1);
}

/* Print: hide background layers */
@media print {
  .le-background-canvas {
    display: none;
  }
}

/* Reduced motion: disable transitions */
@media (prefers-reduced-motion: reduce) {
  .le-bg-layer {
    transition: none;
  }
}