/* =============================================
   PORTFOLIO-ANIM.CSS — Bogdan Detailing
   Estados iniciales y finales para las animaciones JS.
   Complementa portfolio-anim.js sin tocar portfolio.css.
============================================= */

/* ── 1. Card Reveal — Stagger Entrada ───── */

.project-card.card--hidden {
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  /* Bloquear interacciones mientras está oculta */
  pointer-events: none;
}

.project-card.card--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    /* Mantener las transiciones hover de portfolio.css activas */
    border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── 2. Shimmer — Barrido de Luz en Hover ─ */

.project-card__img-wrap {
  /* Necesario para el pseudo-elemento shimmer */
  isolation: isolate;
}

.project-card__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 70%
  );
  transform: translateX(-110%);
  pointer-events: none;
  z-index: 3;
  /* No animar por defecto */
  transition: none;
}

.project-card:hover .project-card__img-wrap::after {
  transform: translateX(110%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── 3. Mejora del hover — resplandor rojo más premium ─ */

/* Sobreescribir el hover de portfolio.css con glow más envolvente */
.project-card:hover {
  box-shadow:
    0 20px 40px rgba(204, 0, 0, 0.25),
    0 0 0 1px var(--rojo),
    0 0 30px rgba(204, 0, 0, 0.12);
}

/* ── 4. Badge vibrante en hover ─────────── */

@keyframes badge-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.project-card:hover .project-card__badge {
  animation: badge-pulse 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── 5. Footer Columnas — Entrada en Cascada ─ */

.footer-col--hidden {
  opacity: 0;
  transform: translateY(16px);
}

.footer-col--visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── 6. Footer Bottom Line — Expansión horizontal ─ */

.footer-line--hidden {
  /* Ocultamos el borde superior de footer__bottom */
  border-top-color: transparent !important;
  padding-top: 0 !important;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
}

.footer-line--visible {
  border-top-color: var(--gris-4) !important;
  padding-top: var(--s6) !important;
  max-height: 200px;
  opacity: 1;
  transition:
    border-top-color 0.5s ease 0.2s,
    padding-top 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s ease;
}

/* ── 7. Zoom Macro mejorado en la imagen ── */

/* Reforzar la transición de scale existente en portfolio.css */
.project-card:hover .project-card__img {
  transform: scale(1.1);
  /* portfolio.css ya define la duración: 0.8s cubic-bezier(0.16,1,0.3,1) */
}

/* ── 8. Ajuste: las animaciones no interfieren con el lightbox ─ */

/* El lightbox tiene z-index: 9999; las animaciones de tarjeta están mucho más abajo */
.portfolio-lb {
  /* Asegura que el modal siempre esté por encima de cualquier animación */
  z-index: 9999 !important;
}

/* ── 9. Accessibility: sin animaciones si lo prefiere el sistema ─ */

@media (prefers-reduced-motion: reduce) {
  .project-card.card--hidden,
  .project-card.card--visible,
  .footer-col--hidden,
  .footer-col--visible,
  .footer-line--hidden,
  .footer-line--visible {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    max-height: none !important;
    border-top-color: var(--gris-4) !important;
    padding-top: var(--s6) !important;
  }

  .project-card__img-wrap::after {
    display: none;
  }
}