/* Hero Slider Zoom & Transition Effects */

#hero .carousel-item {
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: #000;
}

/* Smooth Fade Transition between slides */

#hero.carousel-fade .carousel-item {
  transition: opacity 1.5s ease-in-out;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
  transform: scale(1);
}

/* Immediate Zoom Animation on Active Slide */

#hero .carousel-item.active .hero-bg {
  animation: zoomInHero 8s linear forwards;
}

@keyframes zoomInHero {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.12);
  }
}

#hero .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
  z-index: 2;
  display: flex;
  align-items: center;
}

#hero .container {
  z-index: 3;
}

/* Text Rise Animation triggered by .active */

#hero .eyebrow-text, #hero h1, #hero .lead, #hero .btn {
  opacity: 0;
  will-change: transform, opacity;
}

#hero .carousel-item.active .eyebrow-text {
  animation: riseUp 0.8s ease-out 0.4s forwards;
}

#hero .carousel-item.active h1 {
  animation: riseUp 0.8s ease-out 0.6s forwards;
}

#hero .carousel-item.active .lead {
  animation: riseUp 0.8s ease-out 0.8s forwards;
}

#hero .carousel-item.active .btn {
  animation: riseUp 0.8s ease-out 1s forwards;
}

@keyframes riseUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}