/* Seamless Section Transitions */

/* Hero Section Transition Enhancements */
.cs_hero.cs_style_1.cs_type_2 {
  position: relative;
  z-index: 2;
  /* Create a gradient overlay at the bottom for seamless blending */
}

.cs_hero.cs_style_1.cs_type_2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Step Section Transition Enhancements */
.cs_step_section {
  position: relative;
  z-index: 1;
  /* Remove top margin/padding to eliminate gap */
  margin-top: -80px;
  padding-top: 120px;
  
  /* Create smooth fade-in effect */
  opacity: 0;
  transform: translateY(50px);
  animation: fadeInUp 1.2s ease-out forwards;
  animation-delay: 0.3s;
}

/* Fade-in animation for step section */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced fade-in for section content */
.cs_step_section .cs_section_heading {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 0.6s;
}

.cs_step_section .cs_feature_highlights {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 0.9s;
}

/* Smooth scroll behavior for better transitions */
html {
  scroll-behavior: smooth;
}

/* Intersection Observer Animation Classes */
.cs_fade_in_section {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cs_fade_in_section.cs_visible {
  opacity: 1;
  transform: translateY(0);
}

/* Enhanced blending for hero video */
.cs_hero_thumbnail {
  position: relative;
  z-index: 3;
}

.cs_hero_thumbnail::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
  z-index: 4;
  border-radius: 0 0 20px 20px;
}

/* Responsive Design Considerations */
@media (max-width: 1199px) {
  .cs_step_section {
    margin-top: -60px;
    padding-top: 100px;
  }
  
  .cs_hero.cs_style_1.cs_type_2::after {
    height: 120px;
  }
}

@media (max-width: 991px) {
  .cs_step_section {
    margin-top: -40px;
    padding-top: 80px;
  }
  
  .cs_hero.cs_style_1.cs_type_2::after {
    height: 100px;
  }
  
  .cs_hero_thumbnail::after {
    height: 80px;
  }
}

@media (max-width: 767px) {
  .cs_step_section {
    margin-top: -30px;
    padding-top: 70px;
  }
  
  .cs_hero.cs_style_1.cs_type_2::after {
    height: 80px;
  }
  
  .cs_hero_thumbnail::after {
    height: 60px;
  }
}

@media (max-width: 575px) {
  .cs_step_section {
    margin-top: -20px;
    padding-top: 60px;
  }
  
  .cs_hero.cs_style_1.cs_type_2::after {
    height: 60px;
  }
  
  .cs_hero_thumbnail::after {
    height: 40px;
  }
}

/* Enhanced Performance with GPU Acceleration */
.cs_hero.cs_style_1.cs_type_2,
.cs_step_section,
.cs_hero_thumbnail {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Smooth transition for all animated elements */
.cs_step_section * {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Additional blending for better visual continuity */
.cs_step_section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  /* background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.7) 30%,
    rgba(0, 0, 0, 0.3) 70%,
    transparent 100%
  ); */
  pointer-events: none;
  z-index: 0;
}

/* Ensure content stays above the overlay */
.cs_step_section .container {
  position: relative;
  z-index: 2;
}

/* Video Section Fade-in Animation from Bottom */
.cs_hero_thumbnail {
  opacity: 0;
  transform: translateY(80px);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cs_hero_thumbnail.cs_visible {
  opacity: 1;
  transform: translateY(0);
}

/* Video text fade-in animation */
.cs_hero_text_wrapper {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cs_hero_text_wrapper.cs_visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation delays for video section elements */
.cs_hero_text_wrapper.cs_visible {
  animation-delay: 0.2s;
}

/* Universal Div Fade-in Animation System */
.cs_div_fade_in {
  opacity: 0;
  transform: translateY(60px);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.cs_div_fade_in.cs_visible {
  opacity: 1;
  transform: translateY(0);
}

/* Enhanced fade-in for content containers */
.cs_container_fade {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.cs_container_fade.cs_visible {
  opacity: 1;
  transform: translateY(0);
}

/* Card elements fade-in */
.cs_card_fade {
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.cs_card_fade.cs_visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Feature highlights enhanced animation */
.cs_feature_fade {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.cs_feature_fade.cs_visible {
  opacity: 1;
  transform: translateY(0);
}

/* Section content fade-in */
.cs_section_fade {
  opacity: 0;
  transform: translateY(70px);
  transition: all 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.cs_section_fade.cs_visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation delays for multiple elements */
.cs_div_fade_in:nth-child(1) { transition-delay: 0.1s; }
.cs_div_fade_in:nth-child(2) { transition-delay: 0.2s; }
.cs_div_fade_in:nth-child(3) { transition-delay: 0.3s; }
.cs_div_fade_in:nth-child(4) { transition-delay: 0.4s; }
.cs_div_fade_in:nth-child(5) { transition-delay: 0.5s; }

.cs_card_fade:nth-child(1) { transition-delay: 0.15s; }
.cs_card_fade:nth-child(2) { transition-delay: 0.3s; }
.cs_card_fade:nth-child(3) { transition-delay: 0.45s; }

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .cs_div_fade_in,
  .cs_container_fade,
  .cs_card_fade,
  .cs_feature_fade,
  .cs_section_fade {
    transform: translateY(30px);
    transition-duration: 0.8s;
  }
  
  .cs_card_fade {
    transform: translateY(30px) scale(0.98);
  }
  
  .cs_card_fade.cs_visible {
    transform: translateY(0) scale(1);
  }
}

/* Performance optimization for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cs_div_fade_in,
  .cs_container_fade,
  .cs_card_fade,
  .cs_feature_fade,
  .cs_section_fade {
    transition: opacity 0.3s ease;
    transform: none;
  }
  
  .cs_div_fade_in.cs_visible,
  .cs_container_fade.cs_visible,
  .cs_card_fade.cs_visible,
  .cs_feature_fade.cs_visible,
  .cs_section_fade.cs_visible {
    transform: none;
  }
}

.cs_hero_thumbnail.cs_visible {
  animation-delay: 0.4s;
}