// Classy Background Utilities
// Background gradients, patterns, and visual effects

// ============================================
// Gradient Backgrounds
// ============================================
.bg-gradient-primary {
  background-image: $classy-gradient-primary !important;
  background-size: 300% 300% !important;
}

.bg-gradient-dark {
  background-image: $classy-gradient-dark !important;
  background-size: 300% 300% !important;
}

.bg-gradient-light {
  background-image: $classy-gradient-light !important;
  background-size: 300% 300% !important;
}

.bg-gradient-sunset {
  background-image: $classy-gradient-sunset !important;
  background-size: 300% 300% !important;
}

.bg-gradient-aurora {
  background-image: $classy-gradient-aurora !important;
  background-size: 300% 300% !important;
}

.bg-gradient-rainbow {
  background-image: $classy-gradient-rainbow !important;
  background-size: 300% 300% !important;
}

// Grain texture modifier - add this class alongside bg-gradient-* to add grain effect
.gradient-grain {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.6;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
  }

  // Ensure content stays above the grain overlay
  > * {
    position: relative;
    z-index: 2;
  }
}

// @keyframes gradient-shift {
//   0%, 100% {
//     background-position: 0% 50%, 0% 0%;
//   }
//   25% {
//     background-position: 100% 50%, 100% 100%;
//   }
//   50% {
//     background-position: 100% 0%, 50% 50%;
//   }
//   75% {
//     background-position: 0% 100%, 100% 0%;
//   }
// }

// .bg-gradient-rainbow {
//   position: relative;
//   background:
//     linear-gradient(
//       to bottom right,
//       rgba(0, 255, 209, 0.5),
//       rgba(170, 70, 252, 0.69)
//     ),
//     radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5)) !important;
//   background-size: 200% 200%, 200% 200% !important;
//   animation: gradient-shift 15s ease infinite;

//   &::before {
//     content: '';
//     position: absolute;
//     top: 0;
//     left: 0;
//     width: 100%;
//     height: 100%;
//     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
//     opacity: 1;
//     mix-blend-mode: overlay;
//     pointer-events: none;
//     z-index: 1;
//     filter: contrast(110%) brightness(105%);
//   }

//   // Ensure content stays above the grain overlay
//   > * {
//     position: relative;
//     z-index: 2;
//   }
// }



// ============================================
// Glass Morphism Mixin
// ============================================
@mixin glassy-effect {
  background: transparent !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  position: relative;

  // Glass effect overlay with body color using custom property
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bs-body-bg);
    opacity: var(--navbar-before-opacity, 0.25);
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  // Dark mode adjustments
  [data-bs-theme="dark"] & {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

// ============================================
// Glass Morphism Classes
// ============================================
.bg-glassy {
  @include glassy-effect;
}

// ============================================
// Pattern Overlays
// ============================================
.bg-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%235B47FB' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

// ============================================
// Blur Effects
// ============================================
.blur-sm {
  filter: blur(4px);
}

.blur-md {
  filter: blur(8px);
}

.blur-lg {
  filter: blur(16px);
}

// ============================================
// Filter Effects
// ============================================
.grayscale {
  filter: grayscale(100%);

  &:hover {
    filter: grayscale(0);
  }
}

// ============================================
// Adaptive Inverse Background
// ============================================
.bg-adaptive-inverse {
  @extend .bg-dark;
}

[data-bs-theme="dark"] .bg-adaptive-inverse {
  @extend .bg-light;
}