/* ===========================
   HERO FUTURISTIC CAROUSEL
   css/11-hero-carousel.css
   =========================== */

.heroCarousel{
  --rx: 0deg;
  --ry: 0deg;

  position: relative;
  width: min(560px, 100%);
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  overflow: hidden;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 30px 90px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.05) inset;

  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .18s ease;
}

.heroCarousel__glow{
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(500px 260px at 20% 30%, rgba(255,0,200,.22), transparent 60%),
    radial-gradient(500px 260px at 80% 20%, rgba(0,190,255,.18), transparent 60%),
    radial-gradient(700px 320px at 50% 80%, rgba(160,90,255,.16), transparent 65%);
  filter: blur(18px);
  opacity: .95;
  pointer-events:none;
}

.heroCarousel__noise{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 2px, transparent 6px);
  mix-blend-mode: overlay;
  opacity: .20;
  pointer-events:none;
}

.heroCarousel__slides{
  position:absolute;
  inset:0;
}

.heroCarousel__slide{
  position:absolute;
  inset:0;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .65s ease, transform 1.2s ease;
}

.heroCarousel__slide img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: translateZ(0);
  filter: contrast(1.05) saturate(1.08);
}

.heroCarousel__slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35)),
    radial-gradient(800px 260px at 50% 10%, rgba(255,255,255,.10), transparent 60%);
  pointer-events:none;
}

.heroCarousel__slide.is-active{
  opacity: 1;
  transform: scale(1.00);
}

/* Arrows */
.heroCarousel__arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.92);
  font-size: 28px;
  line-height: 1;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index: 5;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.heroCarousel__arrow--left{ left: 12px; }
.heroCarousel__arrow--right{ right: 12px; }

@media (hover:hover){
  .heroCarousel__arrow:hover{
    transform: translateY(-50%) scale(1.05);
    background: rgba(0,0,0,.36);
    border-color: rgba(255,255,255,.22);
  }
}

/* Dots */
.heroCarousel__dots{
  position:absolute;
  left: 14px;
  bottom: 14px;
  display:flex;
  gap: 8px;
  z-index: 6;
}

.heroCarousel__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.10);
  cursor:pointer;
  transition: width .22s ease, background .22s ease, border-color .22s ease;
}

.heroCarousel__dot.is-active{
  width: 26px;
  background: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.65);
}

/* Progress bar */
.heroCarousel__progress{
  position:absolute;
  right: 14px;
  bottom: 16px;
  width: 140px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  overflow:hidden;
  z-index: 6;
}

.heroCarousel__bar{
  display:block;
  height:100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
}

/* Mobile tweaks */
@media (max-width: 900px){
  .heroCarousel{
    width: 100%;
    aspect-ratio: 16 / 11;
    border-radius: 18px;
  }
}