/* ========================================
   Seamless Section Transitions
   NIS-Style Gradient Flow
   ======================================== */

/* ========== HERO TO SECTION TRANSITION ========== */
/* Gradient fade at bottom of hero for seamless flow */
.tas-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 25%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.8) 75%,
    #ffffff 100%
  );
  pointer-events: none;
  z-index: 5;
}

/* Alternative: Subtle wave transition */
.hero-wave-transition {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,50 C240,100 480,0 720,50 C960,100 1200,0 1440,50 L1440,100 L0,100 Z'/%3E%3C/svg%3E") no-repeat center bottom;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 5;
}

/* ========== SECTION FLOW CONTAINER ========== */
.section-flow {
  position: relative;
}

/* Top gradient fade-in from previous section */
.section-flow::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--section-bg, #ffffff) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ========== FAST FACTS SECTION TRANSITIONS ========== */
/* Top gradient (from hero/previous section) */
.fast-facts-section {
  position: relative;
  margin-top: -50px; /* Overlap with hero gradient */
  padding-top: 100px; /* Compensate for overlap */
}

/* Bottom gradient (transition to footer) */
.fast-facts-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(31, 41, 55, 0.1) 30%,
    rgba(31, 41, 55, 0.4) 60%,
    var(--color-charcoal, #1F2937) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ========== FOOTER TRANSITION ========== */
.footer {
  margin-top: -100px; /* Overlap with fast facts gradient */
  padding-top: 150px; /* Compensate for overlap */
}

/* ========== SECTION DIVIDERS ========== */
/* Subtle line divider */
.section-divider-line {
  position: relative;
}

.section-divider-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 1200px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(26, 54, 94, 0.1) 20%,
    rgba(26, 54, 94, 0.2) 50%,
    rgba(26, 54, 94, 0.1) 80%,
    transparent 100%
  );
}

/* Decorative wave divider */
.wave-divider-top {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,80 L0,40 C240,0 480,80 720,40 C960,0 1200,80 1440,40 L1440,80 Z'/%3E%3C/svg%3E") no-repeat center;
  background-size: cover;
  pointer-events: none;
}

.wave-divider-bottom {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,0 L0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,0 Z'/%3E%3C/svg%3E") no-repeat center;
  background-size: cover;
  pointer-events: none;
}

/* Dark wave for dark sections */
.wave-divider-dark {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%231F2937' d='M0,0 L0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,0 Z'/%3E%3C/svg%3E") no-repeat center;
  background-size: cover;
  pointer-events: none;
}

/* ========== BLUR TRANSITION EFFECT ========== */
/* Soft blur transition between sections */
.blur-transition {
  position: relative;
}

.blur-transition::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.8) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  z-index: 2;
}

/* ========== NO BORDER UTILITY ========== */
/* Remove any hard borders between sections */
.section-seamless {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ========== GRADIENT BACKGROUND SECTIONS ========== */
/* Subtle gradient backgrounds for visual interest */
.bg-gradient-light {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fafafa 50%,
    #f5f5f5 100%
  );
}

.bg-gradient-navy {
  background: linear-gradient(
    180deg,
    var(--color-navy, #1A365E) 0%,
    #0f2340 100%
  );
}

.bg-gradient-warm {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fffbf5 50%,
    #fff8ed 100%
  );
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */
@media (max-width: 768px) {
  .tas-hero::after {
    height: 150px;
  }

  .fast-facts-section::after {
    height: 100px;
  }

  .wave-divider-top,
  .wave-divider-bottom,
  .wave-divider-dark {
    height: 50px;
  }

  .blur-transition::before {
    height: 60px;
    backdrop-filter: blur(5px);
  }
}

@media (max-width: 480px) {
  .tas-hero::after {
    height: 100px;
  }

  .fast-facts-section {
    margin-top: -30px;
    padding-top: 60px;
  }

  .fast-facts-section::after {
    height: 80px;
  }

  .footer {
    margin-top: -60px;
    padding-top: 100px;
  }
}