/* Pentamarket Homepage Banner Carousel V1
   Focused center card + partial side cards on desktop, single card on mobile. */

.penta-home-banner-original-hidden {
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
  inset: 0 !important;
}

.penta-home-carousel {
  --banner-ratio: 2.7272727;
  position: relative;
  width: 100%;
  max-width: 1365px;
  margin: 0 auto;
  font-family: "Poppins", sans-serif;
}

.penta-home-carousel-stage {
  position: relative;
  width: 100%;
  height: clamp(210px, 21.5vw, 294px);
  perspective: 1400px;
  transform-style: preserve-3d;
  overflow: hidden;
}

.penta-home-carousel-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(760px, 60vw);
  aspect-ratio: var(--banner-ratio) / 1;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.11);
  background: #0b1020;
  box-shadow: 0 18px 42px -26px rgba(0,0,0,.88);
  transform-origin: center center;
  transition:
    transform .72s cubic-bezier(.22,.78,.22,1),
    opacity .62s ease,
    filter .62s ease,
    box-shadow .62s ease;
  will-change: transform, opacity;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.penta-home-carousel-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

.penta-home-carousel-slide[data-role="center"] {
  z-index: 4;
  opacity: 1;
  filter: none;
  transform: translate3d(-50%, -50%, 0) scale(1) rotateY(0deg);
  box-shadow:
    0 30px 62px -36px rgba(0,0,0,.94),
    0 16px 38px -30px rgba(190,36,220,.48);
  cursor: default;
}

.penta-home-carousel-slide[data-role="left"] {
  z-index: 2;
  opacity: .58;
  filter: saturate(.78) brightness(.78);
  transform: translate3d(-111%, -50%, -85px) scale(.82) rotateY(8deg);
}

.penta-home-carousel-slide[data-role="right"] {
  z-index: 2;
  opacity: .58;
  filter: saturate(.78) brightness(.78);
  transform: translate3d(11%, -50%, -85px) scale(.82) rotateY(-8deg);
}

.penta-home-carousel-slide[data-role="hidden"] {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, -160px) scale(.68);
}

.penta-home-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  min-height: 10px;
}

.penta-home-carousel-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
  transition: width .25s ease, background .25s ease, opacity .25s ease;
  cursor: pointer;
}

.penta-home-carousel-dot.is-active {
  width: 21px;
  background: #be24dc;
}

@media (max-width: 767px) {
  /* Full-bleed mobile carousel. The banner zone itself normally has horizontal
     padding for the old static banner; remove it only while this carousel is
     mounted so the 3D cards reach the real viewport edges like the devline. */
  .penta-banner-zone.penta-home-carousel-zone {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  .penta-home-carousel {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: 0;
    margin-right: 0;
    transform: translateX(-50%);
    overflow: visible;
  }

  .penta-home-carousel-stage {
    width: 100vw;
    max-width: 100vw;
    height: clamp(136px, 35.5vw, 170px);
    overflow: hidden;
    perspective: 920px;
    -webkit-perspective: 920px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }

  .penta-home-carousel-slide {
    top: 50%;
    left: 50%;
    width: calc(100% - 12px);
    max-width: none;
    height: auto;
    aspect-ratio: var(--banner-ratio) / 1;
    border-radius: 12px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition:
      transform .62s cubic-bezier(.2,.82,.2,1),
      opacity .5s ease,
      filter .5s ease,
      box-shadow .5s ease;
  }

  .penta-home-carousel-slide[data-role="center"] {
    z-index: 5;
    opacity: 1;
    filter: none;
    transform: translate3d(-50%, -50%, 0) scale(1) rotateY(0deg);
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1) rotateY(0deg);
    box-shadow:
      0 18px 30px -20px rgba(0,0,0,.82),
      0 8px 18px -16px rgba(190,36,220,.28);
  }

  .penta-home-carousel-slide[data-role="left"] {
    z-index: 2;
    opacity: .46;
    filter: saturate(.76) brightness(.72);
    transform: translate3d(-122%, -50%, -92px) scale(.80) rotateY(16deg);
    -webkit-transform: translate3d(-122%, -50%, -92px) scale(.80) rotateY(16deg);
  }

  .penta-home-carousel-slide[data-role="right"] {
    z-index: 2;
    opacity: .46;
    filter: saturate(.76) brightness(.72);
    transform: translate3d(22%, -50%, -92px) scale(.80) rotateY(-16deg);
    -webkit-transform: translate3d(22%, -50%, -92px) scale(.80) rotateY(-16deg);
  }

  .penta-home-carousel-slide[data-role="hidden"] {
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, -50%, -180px) scale(.62) rotateY(0deg);
    -webkit-transform: translate3d(-50%, -50%, -180px) scale(.62) rotateY(0deg);
  }

  .penta-home-carousel-dots {
    margin-top: 5px;
  }
}

@media (max-width: 420px) {
  .penta-home-carousel-stage {
    height: clamp(132px, 36vw, 152px);
  }

  .penta-home-carousel-slide {
    width: calc(100% - 10px);
  }

  .penta-home-carousel-slide[data-role="left"] {
    transform: translate3d(-124%, -50%, -88px) scale(.79) rotateY(17deg);
    -webkit-transform: translate3d(-124%, -50%, -88px) scale(.79) rotateY(17deg);
  }

  .penta-home-carousel-slide[data-role="right"] {
    transform: translate3d(24%, -50%, -88px) scale(.79) rotateY(-17deg);
    -webkit-transform: translate3d(24%, -50%, -88px) scale(.79) rotateY(-17deg);
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .penta-home-carousel-stage {
    height: clamp(200px, 23vw, 246px);
  }

  .penta-home-carousel-slide {
    width: min(650px, 63vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .penta-home-carousel-slide,
  .penta-home-carousel-dot {
    transition: none !important;
  }
}