/* Alliance Property Management — reusable 3D "coverflow" photo carousel.
   Built with plain CSS 3D transforms (no external library) so it stays
   consistent with the rest of the site and doesn't need any change to
   the CSP's script-src. Only a small window of cards around the active
   one is ever positioned/visible, so this scales fine to a large photo
   count — the rest sit at display:none until they're scrolled near. */

.carousel3d {
  position: relative;
  padding: 20px 64px 8px;
}

.carousel3d__stage {
  position: relative;
  height: 576px;
  perspective: 1920px;
  perspective-origin: 50% 50%;
}

.carousel3d__track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.carousel3d__card {
  position: absolute;
  top: 50%; left: 50%;
  width: 480px;
  height: 544px;
  margin: -272px 0 0 -240px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .45s cubic-bezier(.22,.68,0,1), opacity .45s ease, box-shadow .45s ease;
  will-change: transform, opacity;
  background: #1a1a1a;
}
.carousel3d__card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none;
}
.carousel3d__card--active { cursor: default; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.carousel3d__card--hidden { display: none; }

.carousel3d__arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  transition: background .15s ease, border-color .15s ease;
}
.carousel3d__arrow:hover { background: var(--color-bg-muted); border-color: var(--color-accent); }
.carousel3d__arrow svg { width: 20px; height: 20px; color: var(--color-text); }
.carousel3d__arrow--prev { left: 0; }
.carousel3d__arrow--next { right: 0; }

.carousel3d__counter {
  text-align: center;
  margin-top: 14px;
  font-size: .82rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.carousel3d__empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 60px 0;
}

@media (max-width: 640px) {
  .carousel3d { padding: 16px 44px 8px; }
  .carousel3d__stage { height: 336px; }
  .carousel3d__card { width: 240px; height: 280px; margin: -140px 0 0 -120px; }
  .carousel3d__arrow { width: 38px; height: 38px; }
}