/**
 * @austencloud/backgrounds
 * Canvas background rendering system styles
 *
 * Provides CSS for dual-canvas crossfade transitions and container positioning.
 * Used by BackgroundController to render animated backgrounds behind app content.
 */

/* ============================================================================
   CANVAS CONTAINER - Dual-layer crossfade system
   ============================================================================

   The background system uses two canvas elements that swap during transitions:
   - One canvas renders the current background (active)
   - One canvas renders the next background (inactive, opacity: 0)
   - When transitioning, they crossfade by swapping opacity states

   This container positions both canvases as a fixed background layer.
   ============================================================================ */

.background-canvas-container {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.background-canvas-container canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ============================================================================
   CROSSFADE TRANSITIONS
   ============================================================================

   Active canvas is visible (opacity: 1), inactive is hidden (opacity: 0).
   BackgroundController swaps these classes during transitions.
   ============================================================================ */

.background-canvas.active {
  opacity: 1;
  transition: opacity 0.8s ease-in-out;
}

.background-canvas:not(.active) {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

/* ============================================================================
   ACCESSIBILITY - Respect reduced motion preference (WCAG AAA)
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .background-canvas.active,
  .background-canvas:not(.active) {
    transition: none;
  }
}