/* ==========================
GENERAL TRANSITIONS
========================== */

.socials a,
.whatsapp-btn,
.filter-btn,
.close-lightbox {
  transition: all 0.3s ease;
}

/* ==========================
SOCIAL HOVER
========================== */

.socials a:hover {
  background: #19d3c5;

  color: #071f22;

  transform: translateY(-5px);
}

/* ==========================
SIGNATURE
========================== */

.signature-image {
  transition: 0.3s;
}

.signature-image:hover {
  transform: scale(1.05);

  filter: drop-shadow(0 0 12px rgba(25, 211, 197, 0.5));
}

/* ==========================
WHATSAPP
========================== */

.whatsapp-btn:hover {
  transform: translateY(-5px);

  box-shadow: 0 10px 30px rgba(25, 211, 197, 0.35);
}

/* ==========================
FILTER BUTTONS
========================== */

.filter-btn:hover,
.filter-btn.active {
  background: #19d3c5;

  color: #071f22;
}

/* ==========================
PROJECT CARD ANIMATION
========================== */

.project-card img {
  transition: transform 0.6s ease, filter 0.6s ease;
}

.project-card:hover img {
  transform: scale(1.08);

  filter: brightness(0.35);
}

.project-overlay {

    position: absolute;

    inset: 0;

    padding: 20px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.85)
    );

}


.project-actions {

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity .4s ease,
        transform .4s ease;

}


.project-card:hover .project-actions {

    opacity: 1;

    transform: translateY(0);

}

/* ACTION BUTTONS */

.project-actions button,
.project-actions a {
  transition: all 0.3s ease;
}

.project-actions button:hover,
.project-actions a:hover {
  transform: translateY(-3px);

  box-shadow: 0 8px 20px rgba(25, 211, 197, 0.25);
}

/* ==========================
LIGHTBOX
========================== */

.lightbox {
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.lightbox img {
  animation: zoomImage 0.35s ease;
}

@keyframes zoomImage {
  from {
    transform: scale(0.8);

    opacity: 0;
  }

  to {
    transform: scale(1);

    opacity: 1;
  }
}

/* ==========================
FILTER FUTURE ANIMATIONS
(V1.0 READY)
========================== */

.project-card.hide {
  opacity: 0;

  transform: scale(0.95);
}

/* ==========================
PORTFOLIO TRANSITIONS
========================== */

.project-card {

    opacity: 1;
    transform: translateY(0) scale(1);

}


/* Initial animation state */

.project-card.card-enter {

    opacity: 0;
    transform: translateY(30px) scale(0.96);

}


/* Animated state */

.project-card.card-show {

    opacity: 1;
    transform: translateY(0) scale(1);

    transition:
        opacity .6s ease,
        transform .6s cubic-bezier(.22,1,.36,1);

}

/* ==========================
PROJECT ACTION BUTTONS
HOVER REVEAL
========================== */

.project-actions {

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity .4s ease,
        transform .4s ease;

}


.project-card:hover .project-actions {

    opacity: 1;

    transform: translateY(0);

}