/* ===== ANIMATION BASE ===== */
.animate {
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
  will-change: transform, opacity;
}

/* Directions */
.fade-left   { transform: translateX(-60px); }
.fade-right  { transform: translateX(60px); }
.fade-top    { transform: translateY(-60px); }
.fade-bottom { transform: translateY(60px); }

/* Active state */
.animate.show {
  opacity: 1;
  transform: translate(0, 0);
}

/* Delay helpers */
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }

/* Demo card style (optional) */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.card {
  padding: 25px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  font-weight: 600;
}

/* Mobile safe */
@media (max-width: 768px) {
  .animate {
    opacity: 1;
    transform: none;
  }
}