// Use theme variables with namespace to avoid conflicts
@use 'variables' as vars;
@use 'mixins' as mix;

// ============================================
// Background Component - Gradient Animation
// ============================================

.hi-background {
  // Fixed positioning - covers entire viewport, ignores scroll
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  // Behind all content
  z-index: -1;

  // Click-through - does not block interactions
  pointer-events: none;

  // Dynamic gradient with rotating center and breathing colors
  // Updated by JS animation loop
  background: radial-gradient(
    circle at var(--hi-bg-center-x, 50%) var(--hi-bg-center-y, 50%),
    var(--hi-bg-color-1, rgba(245, 245, 245, 0.9)) 0%,
    var(--hi-bg-color-2, rgba(255, 182, 193, 0.7)) 100%
  );

  // Smooth transition for color changes
  transition: background 0.1s ease-out;
}
