/* ULTRA PREMIUM CAROUSEL */

.carousel{
  position:relative;
  width:100%;
  height:55vh;
  min-height:380px;
  overflow:hidden;
  font-family:Arial, sans-serif;
}

.carousel .slides,
.carousel .slider{
  width:100%;
  height:100%;
}

.carousel .slider{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.2s ease;
}

.carousel .slider.active{
  opacity:1;
  z-index:1;
}

.carousel img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1);
  transition:transform 8s ease;
}

.carousel .slider.active img{
  transform:scale(1.08);
}

/* Overlay */
.carousel .overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding-left:6%;
  pointer-events:none;
}

/* Trapezoid */
.carousel .triangle{
  position:absolute;
  inset:0;
  background:var(--accent);
  opacity:0.85;
  clip-path:polygon(0 0,32% 0,58% 100%,0 100%);
  box-shadow:inset -30px 0 40px rgba(0,0,0,0.25);
}

/* Text */
.carousel .text{
  position:relative;
  z-index:2;
  transform:translateY(0);
  transition:transform .6s ease;
}

.carousel .slider.active .text{
  transform:translateY(-4px);
}

.carousel h1{
  color:#fff;
  font-size:clamp(2.4rem,4vw,3.6rem);
  margin:0;
}

.carousel p{
  margin-top:12px;
  font-size:0.95rem;
  color:rgba(255,255,255,0.75);
  letter-spacing:.3px;
  max-width:420px;
}

/* Navigation with progress ring */
.carousel .nav{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:14px;
  z-index:5;
}

.carousel .nav span{
  width:12px;
  height:12px;
  border-radius:50%;
  border:1px solid #fff;
  position:relative;
  cursor:pointer;
}

.carousel .nav span i{
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.9);
  transform:scale(0);
}

.carousel .nav span.active i{
  animation:progress 8s linear forwards;
}

/* Mobile adaptation */
@media(max-width:768px){
  .carousel{
    height:70vh;
  }
  .carousel .triangle{
    clip-path:polygon(0 0,100% 0,100% 55%,0 70%);
  }
  .carousel .overlay{
    padding-left:8%;
  }
}

@keyframes progress{
  from{transform:scale(0);}
  to{transform:scale(1);}
}