/* ============================================================
   PDA PRINT DESIGN – animations.css
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Hero entry */
.hero-badge     { animation: slide-down 0.7s cubic-bezier(0.4,0,0.2,1) 0.2s both; }
.hero-title     { animation: slide-up   0.8s cubic-bezier(0.4,0,0.2,1) 0.4s both; }
.hero-subtitle  { animation: slide-up   0.8s cubic-bezier(0.4,0,0.2,1) 0.55s both; }
.hero-cta-group { animation: slide-up   0.8s cubic-bezier(0.4,0,0.2,1) 0.7s both; }
.hero-stats     { animation: slide-up   0.8s cubic-bezier(0.4,0,0.2,1) 0.85s both; }
.hero-visual    { animation: fade-in-scale 1s cubic-bezier(0.4,0,0.2,1) 0.3s both; }

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in-scale {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Mobile menu */
.nav-links.open { transform: translateX(0) !important; opacity: 1 !important; }

.nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Portfolio filter */
.portfolio-item.hide {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.portfolio-item.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
  transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
}

/* Spinner */
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--dark5);
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
.toast {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 9999;
  background: var(--dark3);
  border: 1px solid var(--dark5);
  border-left: 4px solid var(--pink);
  border-radius: 10px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--light2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: toast-in 0.4s cubic-bezier(0.4,0,0.2,1);
  max-width: 340px;
}
.toast.toast-error   { border-left-color: #e53e3e; }
.toast.toast-success { border-left-color: #38a169; }
.toast i { font-size: 20px; color: var(--pink); flex-shrink: 0; }
.toast.toast-error i   { color: #e53e3e; }
.toast.toast-success i { color: #38a169; }

@keyframes toast-in  { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } }
@keyframes toast-out { from { opacity:1; transform:translateX(0); }    to { opacity:0; transform:translateX(30px); } }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--dark3) 25%, var(--dark4) 50%, var(--dark3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }