/* Hero orbit carousel - fills the max-w-7xl hero container on the right */

.carousel-section {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4%;
  pointer-events: none;
  background: transparent;
}

.carousel-section .card-3d {
  pointer-events: auto;
}

@keyframes orbitBottomToTop {
  from {
    transform: perspective(1000px) rotateX(0deg);
  }
  to {
    transform: perspective(1000px) rotateX(360deg);
  }
}

@keyframes dimAtBack {
  10% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(0.15);
  }
  90% {
    filter: brightness(1);
  }
}

.carousel-section .card-3d {
  position: relative;
  width: 300px;
  height: 200px;
  margin-right: min(8%, 4rem);
  transform-style: preserve-3d;
  transform: perspective(1000px);
  animation: orbitBottomToTop 22s linear infinite;
  will-change: transform;
}

.carousel-section .card-3d:hover {
  animation-play-state: paused !important;
}

.carousel-section .card-3d:hover .frame {
  animation-play-state: paused !important;
}

.carousel-section .card-3d .frame {
  position: absolute;
  width: 300px;
  height: 200px;
  top: 50%;
  left: 50%;
  border-radius: 6px;
  border: 1px solid rgba(245, 244, 240, 0.28);
  box-shadow: 0 20px 45px -16px rgba(0, 0, 0, 0.6);
  background-size: cover;
  background-position: center;
  transform-origin: center center;
  animation: dimAtBack 22s linear infinite;
  will-change: transform, filter;
}

/* Placeholder visuals - swap with background-image: url(...) later */
.carousel-section .card-3d .frame:nth-child(1) {
  background: url("../img/sliders/petronas.jpg") center / cover no-repeat;
}
.carousel-section .card-3d .frame:nth-child(2) {
  background: url("../img/sliders/nurmart.jpg") center / cover no-repeat;
}
.carousel-section .card-3d .frame:nth-child(3) {
  background: url("../img/sliders/sherlock.png") center / cover no-repeat;
}
.carousel-section .card-3d .frame:nth-child(4) {
  background: url("../img/sliders/nuratek-team1.jpeg") center / cover no-repeat;
}
.carousel-section .card-3d .frame:nth-child(5) {
  background: url("../img/sliders/present.webp") center / cover no-repeat;
}
.carousel-section .card-3d .frame:nth-child(6) {
  background: url("../img/sliders/sapx.png") center / cover no-repeat;
}
.carousel-section .card-3d .frame:nth-child(7) {
  background: url("../img/sliders/team-at-nurmart.jpeg") center / cover no-repeat;
}

/* 7 cards → 360deg / 7 ≈ 51.428571deg; delay step 22s / 7 ≈ 3.142857s */
.carousel-section .card-3d .frame:nth-child(1) {
  transform: translate(-50%, -50%) rotateX(0deg) translateZ(270px) rotateZ(15deg);
  animation-delay: 0s;
}
.carousel-section .card-3d .frame:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(51.428571deg) translateZ(270px) rotateZ(15deg);
  animation-delay: -3.142857s;
}
.carousel-section .card-3d .frame:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(102.857143deg) translateZ(270px) rotateZ(15deg);
  animation-delay: -6.285714s;
}
.carousel-section .card-3d .frame:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(154.285714deg) translateZ(270px) rotateZ(15deg);
  animation-delay: -9.428571s;
}
.carousel-section .card-3d .frame:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(205.714286deg) translateZ(270px) rotateZ(15deg);
  animation-delay: -12.571429s;
}
.carousel-section .card-3d .frame:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(257.142857deg) translateZ(270px) rotateZ(15deg);
  animation-delay: -15.714286s;
}
.carousel-section .card-3d .frame:nth-child(7) {
  transform: translate(-50%, -50%) rotateX(308.571429deg) translateZ(270px) rotateZ(15deg);
  animation-delay: -18.857143s;
}

@media (max-width: 1023px) {
  .carousel-section {
    position: relative;
    inset: auto;
    min-height: 360px;
    justify-content: center;
    padding-right: 0;
    margin-top: 2.5rem;
    pointer-events: auto;
  }

  .carousel-section .card-3d {
    margin-right: 0;
  }

  .carousel-section .card-3d,
  .carousel-section .card-3d .frame {
    width: 240px;
    height: 160px;
  }

  .carousel-section .card-3d .frame:nth-child(1) {
    transform: translate(-50%, -50%) rotateX(0deg) translateZ(210px) rotateZ(15deg);
  }
  .carousel-section .card-3d .frame:nth-child(2) {
    transform: translate(-50%, -50%) rotateX(51.428571deg) translateZ(210px) rotateZ(15deg);
  }
  .carousel-section .card-3d .frame:nth-child(3) {
    transform: translate(-50%, -50%) rotateX(102.857143deg) translateZ(210px) rotateZ(15deg);
  }
  .carousel-section .card-3d .frame:nth-child(4) {
    transform: translate(-50%, -50%) rotateX(154.285714deg) translateZ(210px) rotateZ(15deg);
  }
  .carousel-section .card-3d .frame:nth-child(5) {
    transform: translate(-50%, -50%) rotateX(205.714286deg) translateZ(210px) rotateZ(15deg);
  }
  .carousel-section .card-3d .frame:nth-child(6) {
    transform: translate(-50%, -50%) rotateX(257.142857deg) translateZ(210px) rotateZ(15deg);
  }
  .carousel-section .card-3d .frame:nth-child(7) {
    transform: translate(-50%, -50%) rotateX(308.571429deg) translateZ(210px) rotateZ(15deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-section .card-3d,
  .carousel-section .card-3d .frame {
    animation: none;
  }
}