/* ── slide in from left ── */
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

.animate-slide-in-left            { opacity: 0; transform: translateX(-60px); }
.animate-slide-in-left.is-visible  { animation: slide-in-left 0.6s ease-out both; }

/* ── scale / grow in ── */
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

.animate-scale-in            { opacity: 0; transform: scale(0.85); }
.animate-scale-in.is-visible  { animation: scale-in 0.65s ease-out both; }

/* ── slide in from right ── */
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

.animate-slide-in-right            { opacity: 0; transform: translateX(60px); }
.animate-slide-in-right.is-visible  { animation: slide-in-right 0.6s ease-out both; }

/* ── fade in ── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-fade-in            { opacity: 0; }
.animate-fade-in.is-visible  { animation: fade-in 0.7s ease-out both; }