/* =========================================
   DOLLY BEATRIZ | LUXURY REAL ESTATE
   ARCHITECTURAL COLLAGE

   2 fotografías principales rotativas
   2 fotografías accesorias por residencia
   ========================================= */

.project-card {
  --collage-width: 35%;
  --collage-gap: 5px;
  --collage-split: 53%;
  --collage-offset-x: 12px;
  --collage-offset-y: 0px;
  --collage-duration: 850ms;
}

.project-card .project-media {
  isolation: isolate;
}

/* Las fotografías principales permanecen
   dentro de su espacio, a la izquierda. */

.project-card.is-active
.project-image {
  width: calc(100% - var(--collage-width));
}

/* Sombra sobre todo el conjunto */

.project-card .project-media::after {
  z-index: 4;
  pointer-events: none;
}

/* CONTENEDOR DEL COLLAGE */

.project-collage {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;

  z-index: 2;

  width: var(--collage-width);

  display: grid;
  grid-template-rows:
    var(--collage-split)
    minmax(0, 1fr);

  gap: var(--collage-gap);

  overflow: hidden;

  opacity: 0;
  visibility: hidden;

  transform: translate3d(
    var(--collage-offset-x),
    var(--collage-offset-y),
    0
  );

  transition:
    opacity var(--collage-duration) ease,
    transform var(--collage-duration)
      var(--projects-ease),
    visibility var(--collage-duration);

  pointer-events: none;
}

.project-card.is-active .project-collage {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}

/* FOTOGRAFÍAS ACCESORIAS */

.project-collage-photo {
  position: relative;

  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;

  margin: 0;
  overflow: hidden;

  background: var(--crema, #eee9df);
}

.project-collage-photo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.12);

  filter: saturate(0.88);

  transition:
    transform 1400ms var(--projects-ease),
    filter 1000ms ease;
}

.project-card.is-active
.project-collage-photo img {
  transform: scale(1.02);
  filter: saturate(1);
}

/* FOTOGRAFÍAS PENDIENTES

   No se solicitan recursos hasta que
   cambies data-src por src.
*/

.project-collage-photo:has(
  img[data-pendiente="true"]
) {
  visibility: hidden;
}

/* WALDORF ASTORIA */

.project-card[data-project="waldorf"] {
  --collage-width: 30%;
  --collage-split: 62%;
  --collage-offset-y: -20px;
}

.project-card[data-project="waldorf"]
.project-collage-photo--one img {
  object-position: 50% 20%;
}

/* DELANO */

.project-card[data-project="delano"] {
  --collage-width: 39%;
  --collage-split: 46%;
  --collage-offset-x: 25px;
}

.project-card[data-project="delano"]
.project-collage-photo--two img {
  object-position: 70% center;
}

/* BENTLEY */

.project-card[data-project="bentley"] {
  --collage-width: 36%;
  --collage-split: 56%;
  --collage-gap: 7px;
}

.project-card[data-project="bentley"]
.project-collage-photo--one img {
  object-position: 65% center;
}

/* VICEROY */

.project-card[data-project="viceroy"] {
  --collage-width: 33%;
  --collage-split: 50%;
  --collage-offset-y: 18px;
}

.project-card[data-project="viceroy"]
.project-collage-photo img {
  object-position: center 35%;
}

/* FAENA */

.project-card[data-project="faena"] {
  --collage-width: 42%;
  --collage-split: 63%;
  --collage-offset-x: -15px;
}

.project-card[data-project="faena"]
.project-collage-photo--one img {
  object-position: 35% center;
}

/* MILLUX PLACE */

.project-card[data-project="millux"] {
  --collage-width: 38%;
  --collage-split: 43%;
  --collage-gap: 9px;
}

.project-card[data-project="millux"]
.project-collage-photo--two img {
  object-position: 65% center;
}

/* TABLET */

@media (max-width: 1024px) {

  .project-card {
    --collage-gap: 4px;
  }

  .project-card.is-active
  .project-collage {
    transform: translate3d(0, 0, 0);
  }

}

/* MOVIMIENTO REDUCIDO */

@media (prefers-reduced-motion: reduce) {

  .project-collage,
  .project-collage-photo img {
    transition: none !important;
    transform: none !important;
  }

}
/* =========================================
   RENDIMIENTO VISUAL DEL CARRUSEL
   ========================================= */

.projects-track,
.project-card,
.project-media,
.project-image,
.project-collage,
.project-panel {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.project-image,
.project-collage-photo img {
  image-rendering: auto;
}

.project-card {
  contain: layout paint style;
}

.projects-viewport {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}