/* ===================================
   Grid Gradient Background Effects
   Unified Continuous Grid System
   =================================== */

/* Base Grid Container - Applied to sections that need grid effect */
.grid-background {
  position: relative;
  isolation: isolate;
}

/*
  UNIFIED GRID PATTERN - Key to continuity:
  - Uses consistent 80px grid size across all sections
  - background-attachment: fixed ensures grid stays aligned to viewport
  - Each section shows its portion of the same continuous grid
  - Enhanced with deeper opacity for more dramatic black-to-pink effect
*/
.grid-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 80px 80px;
  background-attachment: fixed;
  background-position: 0 0;
  mask-image: radial-gradient(
    ellipse 80% 60% at 50% 50%,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.45) 40%,
    transparent 80%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 80% 60% at 50% 50%,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.45) 40%,
    transparent 80%
  );
  pointer-events: none;
  z-index: 0;
}

/* Variant: Top Fade (for hero sections) */
.grid-background-top::before {
  background-attachment: fixed;
  background-position: 0 0;
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.15) 30%,
    transparent 70%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.15) 30%,
    transparent 70%
  );
}

/* Variant: Center Spotlight - INVERTED (Strong on sides, weak in center) */
.grid-background-center::before {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 80px 80px;
  background-attachment: fixed;
  background-position: 0 0;
  mask-image: radial-gradient(
    circle at center,
    transparent 0%,
    rgba(0, 0, 0, 0.05) 15%,
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 0.7) 70%,
    rgba(0, 0, 0, 0.85) 100%
  );
  -webkit-mask-image: radial-gradient(
    circle at center,
    transparent 0%,
    rgba(0, 0, 0, 0.05) 15%,
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 0.7) 70%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

/* Variant: Pricing Section - Lighter, More Subtle */
.grid-background-pricing::before {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  background-attachment: fixed;
  background-position: 0 0;
  mask-image: radial-gradient(
    ellipse 100% 80% at 50% 40%,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.25) 50%,
    transparent 85%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 100% 80% at 50% 40%,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.25) 50%,
    transparent 85%
  );
}

/* Variant: CTA Section - Lighter Grid on Gradient Background */
.grid-background-dark::before {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 80px 80px;
  background-attachment: fixed;
  background-position: 0 0;
  mask-image: radial-gradient(
    ellipse 90% 70% at 50% 50%,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.65) 40%,
    rgba(0, 0, 0, 0.3) 70%,
    transparent 90%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 90% 70% at 50% 50%,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.65) 40%,
    rgba(0, 0, 0, 0.3) 70%,
    transparent 90%
  );
}

/* Animated Grid - Subtle Movement (Optional Enhancement) */
@keyframes gridPulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.grid-background-animated::before {
  animation: gridPulse 8s ease-in-out infinite;
}

/* Fine Grid Variant - Denser Pattern - INVERTED (Strong on sides, weak in center) */
.grid-background-fine::before {
  background-size: 80px 80px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-attachment: fixed;
  background-position: 0 0;
  mask-image: radial-gradient(
    ellipse 100% 80% at 50% 50%,
    transparent 0%,
    rgba(0, 0, 0, 0.08) 20%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.65) 70%,
    rgba(0, 0, 0, 0.8) 100%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 100% 80% at 50% 50%,
    transparent 0%,
    rgba(0, 0, 0, 0.08) 20%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.65) 70%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

/* Grid Dots Variant - Alternative Pattern */
.grid-background-dots::before {
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 2px,
    transparent 2px
  );
  background-size: 80px 80px;
  background-attachment: fixed;
  background-position: 0 0;
  mask-image: radial-gradient(
    ellipse 85% 65% at 50% 50%,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.35) 40%,
    transparent 75%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 85% 65% at 50% 50%,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.35) 40%,
    transparent 75%
  );
}

/* Ensure content sits above grid */
.grid-background > * {
  position: relative;
  z-index: 1;
}

/* Subtle Glow Accent - Pairs beautifully with grid */
.grid-glow-accent {
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(5, 71, 42, 0.12) 0%,
    rgba(3, 69, 32, 0.08) 20%,
    rgba(3, 42, 24, 0.05) 40%,
    rgba(0, 26, 15, 0.02) 60%,
    transparent 80%
  );
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.grid-glow-top-right {
  top: -200px;
  right: -200px;
}

.grid-glow-bottom-left {
  bottom: -200px;
  left: -200px;
}

.grid-glow-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Responsive Adjustments - Maintain unified 60px grid on mobile */
@media (max-width: 768px) {
  .grid-background::before,
  .grid-background-top::before,
  .grid-background-center::before,
  .grid-background-pricing::before,
  .grid-background-dark::before,
  .grid-background-fine::before,
  .grid-background-dots::before {
    background-size: 60px 60px;
    /* Keep background-attachment: fixed for continuity */
  }

  .grid-glow-accent {
    width: 500px;
    height: 500px;
  }
}

/* Performance Optimization */
@media (prefers-reduced-motion: reduce) {
  .grid-background-animated::before {
    animation: none;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .grid-background::before {
    background-image:
      linear-gradient(to right, rgba(7, 133, 87, 0.1) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(7, 133, 87, 0.1) 1px, transparent 1px);
  }
}