/* =========================================
   DOLLY BEATRIZ
   ARCHITECTURAL GALLERY

   Archivo: proyectos-identidad.css

   Identidad visual individual de proyectos
   ========================================= */


/* =========================================
   01. CONFIGURACIÓN COMPARTIDA
   ========================================= */

.project-card {
  --project-scale: 1.1;
  --project-x: 0%;
  --project-y: 0%;
  --project-rotate: 0deg;
  --project-glow: rgb(215 194 161 / 14%);
}

.project-card.is-active .project-image.is-visible {
  transform:
    translate3d(
      var(--project-x),
      var(--project-y),
      0
    )
    scale(var(--project-scale))
    rotate(var(--project-rotate));
}

/* Luz individual en la tarjeta */
.project-card.is-active {
  box-shadow:
    0 24px 65px rgb(51 37 31 / 12%),
    0 0 48px var(--project-glow);
}


/* =========================================
   02. WALDORF ASTORIA
   Vertical Majesty
   ========================================= */

.project-card[data-project="waldorf"] {
  --project-scale: 1.14;
  --project-y: -1.5%;
  --project-glow: rgb(215 194 161 / 17%);
}

@media (min-width: 1025px) {
  .project-card[data-project="waldorf"].is-active {
    aspect-ratio: 3 / 4.6;
  }
}


/* =========================================
   03. DELANO RESIDENCES
   Coastal Flow
   ========================================= */

.project-card[data-project="delano"] {
  --project-scale: 1.12;
  --project-x: -1.8%;
  --project-y: 0.5%;
  --project-glow: rgb(238 233 223 / 28%);
}

@media (min-width: 1025px) {
  .project-card[data-project="delano"].is-active {
    aspect-ratio: 4 / 4.5;
  }
}


/* =========================================
   04. BENTLEY RESIDENCES
   Sculptural Motion
   ========================================= */

.project-card[data-project="bentley"] {
  --project-scale: 1.17;
  --project-y: -1%;
  --project-rotate: 0.35deg;
  --project-glow: rgb(102 84 67 / 17%);
}


/* =========================================
   05. VICEROY BRICKELL
   Urban Perspective
   ========================================= */

.project-card[data-project="viceroy"] {
  --project-scale: 1.12;
  --project-y: -2%;
  --project-glow: rgb(190 195 193 / 24%);
}

@media (min-width: 1025px) {
  .project-card[data-project="viceroy"].is-active {
    aspect-ratio: 4 / 4.8;
  }
}


/* =========================================
   06. FAENA RESIDENCES
   Artistic Atmosphere
   ========================================= */

.project-card[data-project="faena"] {
  --project-scale: 1.13;
  --project-x: 1%;
  --project-glow: rgb(185 132 101 / 20%);
}


/* =========================================
   07. MILLUX PLACE
   Boutique Motion
   ========================================= */

.project-card[data-project="millux"] {
  --project-scale: 1.16;
  --project-y: 1%;
  --project-glow: rgb(215 194 161 / 22%);
}

@media (min-width: 1025px) {
  .project-card[data-project="millux"].is-active {
    aspect-ratio: 4 / 4.4;
  }
}


/* =========================================
   08. TRANSICIONES DE COMPOSICIÓN
   ========================================= */

.project-card {
  transition:
    flex-basis 850ms var(--projects-ease),
    aspect-ratio 850ms var(--projects-ease),
    opacity 850ms var(--projects-ease),
    transform 850ms var(--projects-ease),
    box-shadow 850ms var(--projects-ease);
}

/* Evitar efectos sobre tarjetas no seleccionadas */
.project-card:not(.is-active) {
  --project-scale: 1.03;
}


/* =========================================
   09. DISPOSITIVOS TÁCTILES
   ========================================= */

@media (max-width: 1024px) {
  .project-card.is-active {
    aspect-ratio: 4 / 5;
  }
}


/* =========================================
   10. MOVIMIENTO REDUCIDO
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  .project-card {
    transition: none !important;
  }

  .project-card.is-active .project-image.is-visible {
    transform: none !important;
  }
}