/* ========================================================
   Amour Spa — Gallery / Project Card hover dinámico
   Reemplaza el wash plano (cream translúcido) por: zoom de
   imagen, scrim cálido progresivo, barrido de luz diagonal,
   texto que se eleva y botón con entrada elástica.
   ======================================================== */

.gallery .project-card {
  border-radius: 6px;
  isolation: isolate;
  box-shadow: 0 0 0 1px rgba(252, 169, 169, 0) inset;
  transition: box-shadow 450ms ease;
}

.gallery .project-card:hover {
  box-shadow: 0 0 0 1px rgba(252, 169, 169, 0.35) inset, 0 20px 45px rgba(18, 7, 10, 0.5);
}

.gallery .project-card img {
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 500ms ease;
  will-change: transform;
}

.gallery .project-card:hover img {
  transform: scale(1.09);
  filter: saturate(1.1) brightness(0.9);
}

/* Scrim cálido (reemplaza el degradé negro plano) que se intensifica en hover */
.gallery .project-card.overlay::after {
  background: linear-gradient(180deg, rgba(18, 7, 10, 0) 0%, rgba(42, 15, 22, 0.18) 45%, rgba(42, 15, 22, 0.6) 72%, rgba(18, 7, 10, 0.9) 100%);
  opacity: 0.85;
  transition: opacity 450ms ease;
}

.gallery .project-card:hover.overlay::after {
  opacity: 1;
}

/* Barrido diagonal de luz al pasar el mouse */
.gallery .project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(252, 169, 169, 0.22) 45%, rgba(255, 255, 255, 0.25) 50%, rgba(252, 169, 169, 0.22) 55%, transparent 70%);
  background-size: 250% 250%;
  background-position: -120% -120%;
  opacity: 0;
  transition: opacity 400ms ease, background-position 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery .project-card:hover::before {
  opacity: 1;
  background-position: 120% 120%;
}

/* Ya no se usa el wash plano de color sobre .info */
.gallery .project-card:hover .info {
  background-color: transparent;
}

/* Bloque de texto: se eleva ligeramente al hacer hover */
.gallery .project-card .info > div:last-child {
  transform: translateY(6px);
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery .project-card:hover .info > div:last-child {
  transform: translateY(0);
}

.gallery .project-card.overlay p {
  transition: color 350ms ease, letter-spacing 350ms ease;
}

.gallery .project-card.overlay:hover p {
  color: #d9a56b;
  letter-spacing: 0.06em;
}

.gallery .project-card.overlay h4 {
  transition: color 350ms ease, transform 350ms ease;
}

.gallery .project-card.overlay:hover h4 {
  color: #fff;
  transform: translateX(3px);
}

/* Botón flecha: entrada elástica en vez de solo fade */
.gallery .project-card .info a {
  border-radius: 50%;
  transform: scale(0.5) rotate(-45deg);
  transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms ease, background-color 300ms ease;
}

.gallery .project-card:hover .info a {
  transform: scale(1) rotate(0deg);
  background-color: #d9a56b;
  color: #12070a;
}

.gallery .project-card .info a:hover {
  background-color: #fca9a9;
}

.gallery .project-card .info a i {
  transition: transform 350ms ease;
}

.gallery .project-card .info a:hover i {
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .gallery .project-card,
  .gallery .project-card img,
  .gallery .project-card::before,
  .gallery .project-card.overlay::after,
  .gallery .project-card .info > div:last-child,
  .gallery .project-card .info a,
  .gallery .project-card .info a i,
  .gallery .project-card.overlay p,
  .gallery .project-card.overlay h4 {
    transition: none !important;
  }
}