/* ── animate ── */
@keyframes animFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes animUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes animDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes animLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes animRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.anim-fade,
.anim-up,
.anim-down,
.anim-left,
.anim-right {
  opacity: 0;
}

.anim-fade.anim-on  { animation: animFade  0.45s ease forwards !important; }
.anim-up.anim-on    { animation: animUp    0.45s ease forwards !important; }
.anim-down.anim-on  { animation: animDown  0.45s ease forwards !important; }
.anim-left.anim-on  { animation: animLeft  0.45s ease forwards !important; }
.anim-right.anim-on { animation: animRight 0.45s ease forwards !important; }

.anim-on            { animation-delay: 0.06s !important; }
.anim-d1.anim-on    { animation-delay: 0.06s !important; }
.anim-d2.anim-on    { animation-delay: 0.12s !important; }
.anim-d3.anim-on    { animation-delay: 0.18s !important; }
.anim-d4.anim-on    { animation-delay: 0.24s !important; }
.anim-d5.anim-on    { animation-delay: 0.30s !important; }
.anim-d6.anim-on    { animation-delay: 0.36s !important; }
.anim-d7.anim-on    { animation-delay: 0.42s !important; }
.anim-d8.anim-on    { animation-delay: 0.48s !important; }