/* Sticky Hero Content with Changing Backgrounds */
/* Hero content stays static while only background images change */

/* Hero section container - creates the sticky context */
.hero {
  position: relative;
  overflow: hidden;
  /* Make hero section stick and create overlap effect */
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 100vh;
  height: 100vh;
}

/* Static hero content - always visible and sticky */
.hero-content-static {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  /* Enable hardware acceleration */
  will-change: transform;
  transform: matrix3d(0, 0, 0);
}

/* Hero content styling */
.hero-content {
  position: relative;
  z-index: 2;
  transform: none;
}

/* Background images slider - only backgrounds change */
.hero-bg-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
}

/* Individual background slides */
.hero-bg-slide {
  position: relative;
  height: 100vh;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  will-change: opacity, transform;
}

/* First slide should be visible by default */
.hero-bg-slide:first-child {
  opacity: 1;
}

/* Fallback: ensure at least one background is visible */
.hero-bg-slider:not(.slick-initialized) .hero-bg-slide:first-child {
  opacity: 1;
}

/* Active background slide */
.hero-bg-slide.active {
  opacity: 1;
}

/* Slick slider overrides for background slides */
.hero-bg-slider .slick-slide {
  height: 100vh;
}

.hero-bg-slider .slick-list,
.hero-bg-slider .slick-track {
  height: 100vh;
}

/* Background image styling */
.hero-bg-slide .bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  /* Ensure background is visible */
  min-height: 100vh;
  /* Subtle parallax effect for background only */
  will-change: transform;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, calc(var(--scroll-offset, 0) * 0.1), 0, 1);
}

/* Hero overlay - moves slightly slower than content */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  /* Overlay moves slightly slower than content using matrix3d */
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, calc(var(--scroll-offset, 0) * 0.15), 0, 1);
}

/* CSS-only parallax using scroll-driven animations (modern browsers) */
@supports (animation-timeline: scroll()) {
  .hero-slide .bg {
    animation: parallax-bg linear;
    animation-timeline: scroll();
    animation-range: entry 0% exit 100%;
  }
  
  .hero-content {
    animation: parallax-content linear;
    animation-timeline: scroll();
    animation-range: entry 0% exit 100%;
  }
  
  .hero-overlay {
    animation: parallax-overlay linear;
    animation-timeline: scroll();
    animation-range: entry 0% exit 100%;
  }
}

/* Keyframes for scroll-driven animations using matrix3d */
@keyframes parallax-bg {
  from {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  to {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -30%, 0, 1);
  }
}

@keyframes parallax-content {
  from {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  to {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2%, 0, 1);
  }
}

@keyframes parallax-overlay {
  from {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  to {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -15%, 0, 1);
  }
}

/* Fallback for browsers without scroll-driven animations */
@supports not (animation-timeline: scroll()) {
  /* Use transform-origin and perspective for depth */
  /*.hero {*/
  /*  perspective: 1000px;*/
  /*}*/
  
  .hero-slide .bg {
    transform-origin: center center;
    /* Subtle parallax effect using matrix3d for better performance */
    transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, -100, 1);
  }
  
  .hero-content {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  
  .hero-overlay {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -50, 1);
  }
}

/* Performance optimizations */
.hero-bg-slide .bg,
.hero-content,
.hero-overlay {
  /* Enable hardware acceleration */
  will-change: transform;
  /* Force GPU rendering */
  transform: matrix3d(0, 0, 0);
  /* Optimize for smooth scrolling */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Smooth transitions for better UX */
  transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Improve rendering performance */
  contain: layout style paint;
}

/* Additional optimizations for background slides */
.hero-bg-slide {
  /* Optimize background slide transitions */
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style paint;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* Reduce parallax intensity on mobile for better performance */
  .hero-bg-slide .bg {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, calc(var(--scroll-offset, 0) * 0.05), 0, 1);
  }
  
  /* Adjust hero height on mobile */
  .hero {
    min-height: 80vh;
  }
  
  /* Ensure content is properly centered on mobile */
  .hero-content-static {
    padding: 20px 0;
  }
}

/* Disable parallax on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-slide .bg,
  .hero-content,
  .hero-overlay {
    transform: none !important;
    animation: none !important;
  }
  
  /* Disable background transitions for reduced motion */
  .hero-bg-slide {
    transition: none !important;
  }
}

/* Ensure proper stacking context */
.hero-slide {
  isolation: isolate;
}

/* Enhanced smooth scrolling with momentum */
body {
  scroll-behavior: smooth;
  /* Add momentum scrolling on supported devices */
  -webkit-overflow-scrolling: touch;
}

/* Smooth transitions for better UX with easing */
.hero-slide .bg,
.hero-content,
.hero-overlay {
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Smooth scrolling for the entire page */
html {
  scroll-behavior: smooth;
}

/* Content sections that should overlap the hero banner */
.section-spacing,
.section-spacing-mob,
.block-bg,
.stats-section,
.footer,
.partnership-section,
.tabs-section,
.vbat-main-section,
.leadership,
#divisions,
#leadership,
#testimonials,
#newsroom {
  position: relative;
  z-index: 2;
  background: var(--color-surface, #fff);
  /* Smooth transitions for content sections */
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Optimize rendering */
  will-change: transform;
  contain: layout style paint;
}


/* Ensure the first content section overlaps properly */
/*.section-spacing:first-of-type,*/
/*.section-spacing-mob:first-of-type,*/
/*.block-bg:first-of-type {*/
/*  margin-top: -50vh; */
/*  padding-top: calc(50vh + 80px);*/
/*}*/

/* Adjust hero height to create proper overlap effect */
.hero-slide {
  min-height: 100vh;
}

/* Business page specific fixes */
.partnership-section {
  background: #fff;
}

/* Video section fixes */
.vbat-main-section {
  position: relative;
  z-index: 3;
  background: var(--color-surface, #fff);
  padding: 40px;
}
 
/* Leadership section fixes */
.leadership {
  position: relative;
  z-index: 3;
  background: var(--color-surface, #fff);
  margin-top: 0;
  padding-top: 80px;
}

/* Business page video section specific fixes */
.vbat-detail-section {
  position: relative;
  z-index: 3;
  background: #000;
  margin-top: 0;
  padding-top: 0;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure video background is visible */
.product-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  background: #000;
}

/* Business page tabs section */
.tabs-section {
  position: relative;
  z-index: 3;
  background: #fff;
  margin-top: 0;
  padding-top: 0;
}

@media (max-width: 768px) {
  /*.section-spacing:first-of-type,*/
  /*.section-spacing-mob:first-of-type,*/
  /*.block-bg:first-of-type {*/
  /*  margin-top: -30vh;*/
  /*  padding-top: calc(30vh + 40px);*/
  /*}*/
  
  /* Business page mobile fixes */
  /*.partnership-section {*/
  /*  margin-top: -30vh;*/
  /*  padding-top: calc(30vh + 40px);*/
  /*}*/
  
  .leadership {
    padding-top: 40px;
  }
  
  /* Reduce transition duration on mobile for better performance */
  .hero-bg-slide .bg,
  .hero-content,
  .hero-overlay {
    transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  /* Optimize background slide transitions on mobile */
  .hero-bg-slide {
    transition: opacity 0.5s ease-in-out;
  }
}

/* Additional performance optimizations */
@media (prefers-reduced-motion: no-preference) {
  /* Enhanced smooth scrolling for users who prefer motion */
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 0;
  }
  
  /* Add subtle momentum to parallax elements */
  .hero-slide .bg {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}

/* High refresh rate displays optimization */
@media (min-resolution: 120dpi) {
  .hero-bg-slide .bg,
  .hero-content,
  .hero-overlay {
    /* Optimize for high refresh rate displays */
    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  /* Optimize background slide transitions for high refresh rate */
  .hero-bg-slide {
    transition: opacity 0.8s ease-in-out;
  }
}