/* ===== Keyframes ===== */
@keyframes fade-in { from{opacity:0} to{opacity:1} }
@keyframes fade-in-up-soft { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes fade-in-up { from{transform:translateY(60px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes fade-in-right { from{transform:translateX(60px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes fade-in-left { from{transform:translateX(-60px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes fade-in-down { from{transform:translateY(-60px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ===== Base: ซ่อน element ที่มีคลาสขึ้นต้นด้วย fade-in ทั้งหมด ===== */
[class*="fade-in"]{
  opacity:0;
  will-change:transform,opacity;
  backface-visibility:hidden;
}

/* ===== เล่นแอนิเมชันเมื่อมี .show ===== */
.fade-in.show         { animation: fade-in           var(--dur,.8s) var(--ease,cubic-bezier(.22,.61,.36,1)) var(--delay,0s) both; }
.fade-in-up-soft.show { animation: fade-in-up-soft   var(--dur,.8s) var(--ease,cubic-bezier(.22,.61,.36,1)) var(--delay,0s) both; }
.fade-in-up.show      { animation: fade-in-up        var(--dur,.8s) var(--ease,cubic-bezier(.22,.61,.36,1)) var(--delay,0s) both; }
.fade-in-right.show   { animation: fade-in-right     var(--dur,.8s) var(--ease,cubic-bezier(.22,.61,.36,1)) var(--delay,0s) both; }
.fade-in-left.show    { animation: fade-in-left      var(--dur,.8s) var(--ease,cubic-bezier(.22,.61,.36,1)) var(--delay,0s) both; }
.fade-in-down.show    { animation: fade-in-down      var(--dur,.8s) var(--ease,cubic-bezier(.22,.61,.36,1)) var(--delay,0s) both; }

/* Utilities (ไม่บังคับใช้) */
.fast{--dur:.4s} .normal{--dur:.8s} .slow{--dur:1.2s}
.delay-100{--delay:.1s}
.delay-200{--delay:.2s}
.delay-300{--delay:.3s}
.delay-400{--delay:.4s}
.delay-500{--delay:.5s}
.delay-600{--delay:.6s}
.delay-700{--delay:.7s}
.delay-800{--delay:.8s}
.delay-900{--delay:.9s}
.delay-1000{--delay:1s}

@media (prefers-reduced-motion: reduce){
  [class*="fade-in"],
  [class*="fade-in"].show{
    animation:none!important;opacity:1!important;transform:none!important;
  }
}