/**
 * ======================================
 * GLOWING CRACKS BACKGROUND
 * Fixed full-screen background with animated crack overlay
 * ======================================
 */

/* ===== WRAPPER ===== */
.bg-wrapper {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* ===== BASE BACKGROUND ===== */
.bg-base {
  position: absolute;
  inset: 0;
  background: url('../assets/Page-Background.png') center center / cover no-repeat;
  background-color: var(--bg-primary);
}

/* ===== CRACKS OVERLAY ===== */
.bg-cracks {
  position: absolute;
  inset: 0;
  background: url('../assets/extracted-cracks.png') center center / cover no-repeat;
  mix-blend-mode: screen;
  animation: crackGlow 3.5s ease-in-out infinite;
  will-change: filter, opacity;
}

/* ===== GLOW PULSE ANIMATION ===== */
/* DEBUG: Bright green glow to verify cracks are visible */
@keyframes crackGlow {
  0%, 100% {
    opacity: 1;
    filter:
      drop-shadow(0 0 8px rgba(0, 255, 0, 0.9))
      drop-shadow(0 0 20px rgba(0, 255, 0, 0.6))
      drop-shadow(0 0 50px rgba(0, 255, 0, 0.3));
  }
  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 14px rgba(0, 255, 0, 1))
      drop-shadow(0 0 40px rgba(0, 255, 0, 0.7))
      drop-shadow(0 0 80px rgba(0, 255, 0, 0.4));
  }
}

/* ===== DUST PARTICLES ===== */
.bg-dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bg-dust::before,
.bg-dust::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(231, 223, 207, 0.4) 50%, transparent 100%),
    radial-gradient(1px 1px at 25% 55%, rgba(231, 223, 207, 0.3) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 15%, rgba(184, 154, 87, 0.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 55% 70%, rgba(231, 223, 207, 0.25) 50%, transparent 100%),
    radial-gradient(1px 1px at 70% 35%, rgba(184, 154, 87, 0.3) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 80%, rgba(231, 223, 207, 0.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 15% 85%, rgba(184, 154, 87, 0.25) 50%, transparent 100%),
    radial-gradient(1px 1px at 60% 40%, rgba(231, 223, 207, 0.3) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 10%, rgba(231, 223, 207, 0.3) 50%, transparent 100%),
    radial-gradient(1px 1px at 35% 90%, rgba(184, 154, 87, 0.2) 50%, transparent 100%),
    radial-gradient(1px 1px at 5% 50%, rgba(231, 223, 207, 0.25) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 60%, rgba(184, 154, 87, 0.3) 50%, transparent 100%);
  background-size: 100% 100%;
  animation: dustFloat1 18s linear infinite;
}

.bg-dust::after {
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(231, 223, 207, 0.3) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 75%, rgba(184, 154, 87, 0.25) 50%, transparent 100%),
    radial-gradient(1px 1px at 65% 10%, rgba(231, 223, 207, 0.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 80% 50%, rgba(231, 223, 207, 0.2) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 30% 65%, rgba(184, 154, 87, 0.3) 50%, transparent 100%),
    radial-gradient(1px 1px at 50% 25%, rgba(231, 223, 207, 0.25) 50%, transparent 100%),
    radial-gradient(1px 1px at 95% 45%, rgba(184, 154, 87, 0.2) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 10% 70%, rgba(231, 223, 207, 0.3) 50%, transparent 100%),
    radial-gradient(1px 1px at 72% 88%, rgba(184, 154, 87, 0.25) 50%, transparent 100%),
    radial-gradient(1px 1px at 42% 5%, rgba(231, 223, 207, 0.3) 50%, transparent 100%);
  animation: dustFloat2 24s linear infinite;
  opacity: 0.8;
}

@keyframes dustFloat1 {
  0%   { transform: translateY(0) translateX(0); }
  25%  { transform: translateY(-3%) translateX(1.5%); }
  50%  { transform: translateY(-1%) translateX(-1%); }
  75%  { transform: translateY(-4%) translateX(0.5%); }
  100% { transform: translateY(0) translateX(0); }
}

@keyframes dustFloat2 {
  0%   { transform: translateY(0) translateX(0); }
  25%  { transform: translateY(2%) translateX(-1%); }
  50%  { transform: translateY(-2%) translateX(1.5%); }
  75%  { transform: translateY(1%) translateX(-0.5%); }
  100% { transform: translateY(0) translateX(0); }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .bg-cracks {
    animation: none;
    opacity: 0.9;
    filter:
      drop-shadow(0 0 8px rgba(184, 154, 87, 0.6))
      drop-shadow(0 0 20px rgba(184, 154, 87, 0.4));
  }
  .bg-dust::before,
  .bg-dust::after {
    animation: none;
  }
}