/* ===================================================================
   UNIFIED ANIMATED GRADIENT BACKGROUND SYSTEM
   ================================================================= */

/* Master gradient background that can be configured per section */
.gradient-background {
  position: relative;
  overflow: hidden;
  background-color: transparent;
  --scroll-position: 0 50%;
  
  /* Configurable gradient variables */
  --gradient-direction: to bottom;
  --color-1: #5512dd;
  --color-1-stop: 0%;
  --color-2: #5512dd; 
  --color-2-stop: 45%;
  --color-3: #3a0ca3;
  --color-3-stop: 48%;
  --color-4: #000000;
  --color-4-stop: 51%;
  --color-5: #000000;
  --color-5-stop: 100%;
  --gradient-size: 100% 300%;
}

.gradient-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    var(--gradient-direction), 
    var(--color-1) var(--color-1-stop),
    var(--color-2) var(--color-2-stop),
    var(--color-3) var(--color-3-stop),
    var(--color-4) var(--color-4-stop),
    var(--color-5) var(--color-5-stop)
  );
  background-size: var(--gradient-size);
  background-position: var(--scroll-position);
  z-index: -1;
}

/* Optional texture overlay */
.gradient-background.with-texture::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  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='%23ffffff' 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");
  z-index: -1;
  opacity: 0.1;
}

/* ===================================================================
   SECTION-SPECIFIC CONFIGURATIONS
   ================================================================= */

/* HOME SECTION - Purple to Black (Default) */
.home-section.gradient-background {
  min-height: 100vh;
  height: 100vh;
  --scroll-position: 0 50%; /* Start at middle */
}

/* ABOUT SECTION (Preview) - Black to Purple */
.about-section.gradient-background {
  --color-1: #000000;
  --color-1-stop: 0%;
  --color-2: #000000;
  --color-2-stop: 45%;
  --color-3: #3a0ca3;
  --color-3-stop: 48%;
  --color-4: #5512dd;
  --color-4-stop: 51%;
  --color-5: #5512dd;
  --color-5-stop: 100%;
  --scroll-position: 0 0;
}

/* SERVICES SECTION (Preview) - Purple to Black */
.services-section.gradient-background {
  /* Uses default purple to black */
  --scroll-position: 0 0;
}

/* TESTIMONIALS SECTION - Black to Purple */
.testimonials-section.gradient-background {
  --color-1: #000000;
  --color-1-stop: 0%;
  --color-2: #000000;
  --color-2-stop: 45%;
  --color-3: #3a0ca3;
  --color-3-stop: 48%;
  --color-4: #5512dd;
  --color-4-stop: 51%;
  --color-5: #5512dd;
  --color-5-stop: 100%;
  --scroll-position: 0 0;
}

/* CONTACT SECTION (Preview) - Purple to Black */
.contact-section.gradient-background {
  --color-1: #5512dd;
  --color-1-stop: 0%;
  --color-2: #5512dd;
  --color-2-stop: 49%;
  --color-3: #3a0ca3;
  --color-3-stop: 52%;
  --color-4: #000000;
  --color-4-stop: 55%;
  --color-5: #000000;
  --color-5-stop: 100%;
  --scroll-position: 0 0;
}

/* FAQ SECTION - Black to Purple */
.faq-preview-section.gradient-background,
.faq-page-section.gradient-background {
  --color-1: #000000;
  --color-1-stop: 0%;
  --color-2: #000000;
  --color-2-stop: 25%;
  --color-3: #3a0ca3;
  --color-3-stop: 30%;
  --color-4: #5512dd;
  --color-4-stop: 35%;
  --color-5: #5512dd;
  --color-5-stop: 100%;
  --scroll-position: 0 0;
}

/* FOOTER SECTION - Purple to Black */
.footer-section.gradient-background {
  --color-1: #5512dd;
  --color-1-stop: 0%;
  --color-2: #5512dd;
  --color-2-stop: 45%;
  --color-3: #3a0ca3;
  --color-3-stop: 48%;
  --color-4: #000000;
  --color-4-stop: 51%;
  --color-5: #000000;
  --color-5-stop: 100%;
  --gradient-size: 100% 300%;
  --scroll-position: 0 0;
  min-height: 600px;
}

/* ===================================================================
   FULL PAGE CONFIGURATIONS
   ================================================================= */

/* ABOUT PAGE - Black to Purple */
.about-page.gradient-background {
  min-height: 100vh;
  --color-1: #000000;
  --color-1-stop: 0%;
  --color-2: #000000;
  --color-2-stop: 45%;
  --color-3: #3a0ca3;
  --color-3-stop: 48%;
  --color-4: #5512dd;
  --color-4-stop: 51%;
  --color-5: #5512dd;
  --color-5-stop: 100%;
  --gradient-size: 100% 300%;
  --scroll-position: 0 0;
}

/* SERVICES PAGE - Purple to Black */
.services-page.gradient-background {
  min-height: 100vh;
  --color-1: #5512dd;
  --color-1-stop: 0%;
  --color-2: #5512dd;
  --color-2-stop: 45%;
  --color-3: #3a0ca3;
  --color-3-stop: 48%;
  --color-4: #000000;
  --color-4-stop: 51%;
  --color-5: #000000;
  --color-5-stop: 100%;
  --gradient-size: 100% 300%;
  --scroll-position: 0 0;
}

/* CONTACT PAGE - Black to Purple */
.contact-page.gradient-background {
  min-height: 100vh;
  --color-1: #000000;
  --color-1-stop: 0%;
  --color-2: #000000;
  --color-2-stop: 45%;
  --color-3: #3a0ca3;
  --color-3-stop: 48%;
  --color-4: #5512dd;
  --color-4-stop: 51%;
  --color-5: #5512dd;
  --color-5-stop: 100%;
  --gradient-size: 100% 300%;
  --scroll-position: 0 0;
}

/* ===================================================================
   ALTERNATIVE GRADIENT DIRECTIONS (For Future Use)
   ================================================================= */

/* Diagonal gradients */
.gradient-background.diagonal-135 {
  --gradient-direction: 135deg;
}

.gradient-background.diagonal-45 {
  --gradient-direction: 45deg;
}

/* Radial gradients */
.gradient-background.radial {
  --gradient-direction: radial-gradient(circle at center);
}

/* Horizontal gradients */
.gradient-background.horizontal {
  --gradient-direction: to right;
}

/* ===================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================= */

@media screen and (max-width: 768px) {
  .gradient-background {
    --gradient-size: 100% 300%;
  }
  
  .home-section.gradient-background {
    height: auto;
    min-height: 100vh;
  }
}

/* ===================================================================
   UTILITY CLASSES
   ================================================================= */

/* Ensure content stays above gradient */
.gradient-background .container,
.gradient-background .content-wrapper {
  position: relative;
  z-index: 1;
}