/* ============================================================
   animations.css – Chuyển động vi mô tinh tế, mượt mà chuẩn doanh nghiệp
   ============================================================ */

/* Fade-in đơn giản */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pulse cho hotline & CTA */
@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.3;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

/* Zalo soft glow */
@keyframes zalo-glow {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.18);
  }
  50% {
    box-shadow: 0 4px 22px rgba(22, 163, 74, 0.36);
  }
}

/* Hiệu ứng nhịp tim nhẹ cho nút hotline */
@keyframes softPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* Line trượt của section divider */
@keyframes lineSlide {
  from { width: 0; opacity: 0; }
  to   { width: 100%; opacity: 1; }
}

/* Reveal từ của Hero Title */
@keyframes wordReveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- SCROLL REVEAL UTILITIES ---------- */
.fade-in {
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delays */
.delay-1 { transition-delay: 0.1s; animation-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; animation-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; animation-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; animation-delay: 0.4s; }

/* Hero title word reveal */
.word-reveal {
  display: inline-block;
  opacity: 0;
  margin-right: 0.22em;
}

.word-reveal.visible {
  animation: wordReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Section divider */
.section-divider {
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: transparent;
  padding: 0 24px;
}

.section-divider span {
  display: block;
  height: 1px;
  width: 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--border-subtle) 20%,
    var(--border-medium) 50%,
    var(--border-subtle) 80%,
    transparent 100%
  );
  opacity: 0;
}

.section-divider.visible span {
  animation: lineSlide 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stat counter */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}