/* ===== Thư viện animation — port theo shared/css/main.css của milgamma_injections_2024
   Cách dùng giống hệt bản gốc:  class="<phần tử> fadeInUp dur900 del500"          ===== */

.animated,
.fadeIn, .fadeInUp, .fadeInDown, .fadeInLeft, .fadeInRight,
.fadeInUpBig, .fadeInDownBig, .zoomIn, .zoomInUp, .growY, .slideInRight, .slideInLeft {
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

@keyframes fadeIn        { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp      { from { opacity: 0; transform: translate3d(0, 50px, 0); }  to { opacity: 1; transform: none; } }
@keyframes fadeInDown    { from { opacity: 0; transform: translate3d(0, -50px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft    { from { opacity: 0; transform: translate3d(-50px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight   { from { opacity: 0; transform: translate3d(50px, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes fadeInUpBig   { from { opacity: 0; transform: translate3d(0, 200px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInDownBig { from { opacity: 0; transform: translate3d(0, -200px, 0); } to { opacity: 1; transform: none; } }
@keyframes zoomIn        { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } to { transform: none; } }
@keyframes zoomInUp      { from { opacity: 0; transform: scale3d(.3, .3, .3) translate3d(0, 60px, 0); } to { opacity: 1; transform: none; } }
@keyframes growY         { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes slideInRight  { from { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes slideInLeft   { from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes pulse         { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } to { transform: scale3d(1, 1, 1); } }

.fadeIn        { animation-name: fadeIn; }
.fadeInUp      { animation-name: fadeInUp; }
.fadeInDown    { animation-name: fadeInDown; }
.fadeInLeft    { animation-name: fadeInLeft; }
.fadeInRight   { animation-name: fadeInRight; }
.fadeInUpBig   { animation-name: fadeInUpBig; }
.fadeInDownBig { animation-name: fadeInDownBig; }
.zoomIn        { animation-name: zoomIn; }
.zoomInUp      { animation-name: zoomInUp; }
.growY         { animation-name: growY; transform-origin: 50% 100%; }
.slideInRight  { animation-name: slideInRight; }
.slideInLeft   { animation-name: slideInLeft; }

/* thời lượng */
.dur300 { animation-duration: 300ms; }
.dur500 { animation-duration: 500ms; }
.dur600 { animation-duration: 600ms; }
.dur700 { animation-duration: 700ms; }
.dur900 { animation-duration: 900ms; }
.dur1200 { animation-duration: 1200ms; }
.dur1500 { animation-duration: 1500ms; }

/* độ trễ — bước 100ms như milgamma */
.del100 { animation-delay: 100ms; }
.del200 { animation-delay: 200ms; }
.del300 { animation-delay: 300ms; }
.del400 { animation-delay: 400ms; }
.del500 { animation-delay: 500ms; }
.del600 { animation-delay: 600ms; }
.del700 { animation-delay: 700ms; }
.del800 { animation-delay: 800ms; }
.del900 { animation-delay: 900ms; }
.del1000 { animation-delay: 1000ms; }
.del1100 { animation-delay: 1100ms; }
.del1200 { animation-delay: 1200ms; }
.del1300 { animation-delay: 1300ms; }
.del1400 { animation-delay: 1400ms; }
.del1500 { animation-delay: 1500ms; }
.del1600 { animation-delay: 1600ms; }
.del1700 { animation-delay: 1700ms; }
.del1800 { animation-delay: 1800ms; }
.del1900 { animation-delay: 1900ms; }
.del2000 { animation-delay: 2000ms; }
.del2100 { animation-delay: 2100ms; }
.del2200 { animation-delay: 2200ms; }
.del2300 { animation-delay: 2300ms; }
.del2400 { animation-delay: 2400ms; }
.del2500 { animation-delay: 2500ms; }

/* lớp nội dung tách từ slide — không chặn thao tác chạm của hotspot */
.lay {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 5;
}

/* độ trễ mở rộng cho slide nhiều lớp */
.del2600 { animation-delay: 2600ms; }
.del2700 { animation-delay: 2700ms; }
.del2800 { animation-delay: 2800ms; }
.del2900 { animation-delay: 2900ms; }
.del3000 { animation-delay: 3000ms; }
.del3100 { animation-delay: 3100ms; }
.del3200 { animation-delay: 3200ms; }
.del3300 { animation-delay: 3300ms; }
.del3400 { animation-delay: 3400ms; }
.del3500 { animation-delay: 3500ms; }
.del3600 { animation-delay: 3600ms; }
.del3700 { animation-delay: 3700ms; }
.del3800 { animation-delay: 3800ms; }
.del3900 { animation-delay: 3900ms; }
.del4000 { animation-delay: 4000ms; }
.del4100 { animation-delay: 4100ms; }
.del4200 { animation-delay: 4200ms; }