/* Hiệu ứng chuyển động; tắt khi người dùng bật giảm chuyển động */
.js [data-reveal] {
  opacity: 0;
  transition:
    opacity 800ms var(--ease-out),
    translate 800ms var(--ease-out),
    scale 800ms var(--ease-out);
  transition-delay: var(--delay, calc(var(--i, 0) * 80ms));
}
.js [data-reveal="fade-up"]  { translate: 0 28px; }
.js [data-reveal="slide-up"] { translate: 0 56px; }
.js [data-reveal="scale"]    { scale: 0.96; }
.js [data-reveal].is-visible,
.reveal-fallback [data-reveal] {
  opacity: 1;
  translate: none;
  scale: none;
}

.hero__grid { animation: grid-pan 22s linear infinite; }
@keyframes grid-pan {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 64px, 0); }
}

.hero__glow--a { animation: glow-drift 18s var(--ease-in-out) infinite alternate; }
.hero__glow--b { animation: glow-drift 22s var(--ease-in-out) -6s infinite alternate-reverse; }
@keyframes glow-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-60px, 40px, 0) scale(1.08); }
}

.hero__particles span { animation: particle-rise 10s linear infinite; }
.hero__particles span:nth-child(2) { animation-delay: -2s;  animation-duration: 12s; }
.hero__particles span:nth-child(3) { animation-delay: -4s; }
.hero__particles span:nth-child(4) { animation-delay: -6s;  animation-duration: 13s; }
.hero__particles span:nth-child(5) { animation-delay: -1s;  animation-duration: 11s; }
.hero__particles span:nth-child(6) { animation-delay: -7s; }
.hero__particles span:nth-child(7) { animation-delay: -3s;  animation-duration: 14s; }
.hero__particles span:nth-child(8) { animation-delay: -5s; }
@keyframes particle-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  15%  { opacity: 0.8; }
  85%  { opacity: 0.5; }
  100% { transform: translate3d(12px, -260px, 0); opacity: 0; }
}

.dashboard__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-line 1.8s var(--ease-out) 0.5s both;
}
.dashboard__area { animation: fade-in 1.2s var(--ease-out) 1s both; }
.dashboard__point { animation: fade-in 0.4s linear 2.1s both, point-pulse 2.4s var(--ease-in-out) 2.5s infinite; transform-origin: 320px 8px; transform-box: view-box; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes point-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.5); }
}

.metric__bar span { animation: bar-grow 1.4s var(--ease-out) both; }
.metric:nth-child(1) .metric__bar span { animation-delay: 0.7s; }
.metric:nth-child(2) .metric__bar span { animation-delay: 0.85s; }
.metric:nth-child(3) .metric__bar span { animation-delay: 1s; }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.float-card--chat { animation: float-y 7s var(--ease-in-out) infinite alternate; }
.float-card--flow { animation: float-y 8s var(--ease-in-out) -3s infinite alternate-reverse; }
@keyframes float-y {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -10px, 0); }
}

.typing i { animation: typing 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}

.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
  75%, 100% { transform: scale(2.6); opacity: 0; }
}

.hero__scroll .icon { animation: nudge 2.4s var(--ease-in-out) infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(3px); }
}

.ai-card.is-visible .ai-chat__msg--user,
.reveal-fallback .ai-chat__msg--user { animation: msg-in 600ms var(--ease-out) 300ms both; }
.ai-card.is-visible .ai-chat__msg--bot,
.reveal-fallback .ai-chat__msg--bot { animation: msg-in 600ms var(--ease-out) 1100ms both; }
.ai-card.is-visible .ai-chat__actions li,
.reveal-fallback .ai-chat__actions li { animation: msg-in 500ms var(--ease-out) 1800ms both; }
.ai-card.is-visible .ai-chat__actions li:nth-child(2) { animation-delay: 2000ms; }
.ai-card.is-visible .ai-chat__actions li:nth-child(3) { animation-delay: 2200ms; }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.workflow__steps li:not(:last-child)::after { animation: flow-down 1.1s linear infinite; }
@keyframes flow-down {
  from { background-position: 0 0; }
  to   { background-position: 0 16px; }
}

.pipeline__node:not(:last-child)::after { animation: flow-right 2.4s linear infinite; }
.pipeline__node:nth-child(2)::after { animation-delay: 0.4s; }
.pipeline__node:nth-child(3)::after { animation-delay: 0.8s; }
.pipeline__node:nth-child(4)::after { animation-delay: 1.2s; }
.pipeline__node:nth-child(5)::after { animation-delay: 1.6s; }
@keyframes flow-right {
  from { background-position: -80% 0, 0 0; }
  to   { background-position: 180% 0, 0 0; }
}
.pipeline__node--core .pipeline__icon { animation: core-glow 3s var(--ease-in-out) infinite; }
@keyframes core-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.45); }
  50%      { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
}

.cta-panel__display .text-gold {
  background-size: 220% 100%;
  animation: gradient-shift 8s var(--ease-in-out) infinite alternate;
}
@keyframes gradient-shift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

.web-card.is-visible .sk-bars i,
.reveal-fallback .sk-bars i { animation: bar-rise 1s var(--ease-out) both; }
.sk-bars i:nth-child(2) { animation-delay: 0.08s; }
.sk-bars i:nth-child(3) { animation-delay: 0.16s; }
.sk-bars i:nth-child(4) { animation-delay: 0.24s; }
.sk-bars i:nth-child(5) { animation-delay: 0.32s; }
@keyframes bar-rise { from { transform: scaleY(0.1); } to { transform: scaleY(1); } }

.modal[open] { animation: modal-in 320ms var(--ease-out); }
.modal[open]::backdrop { animation: fade-in 320ms var(--ease-out); }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.is-paused *,
.is-paused *::before,
.is-paused *::after { animation-play-state: paused !important; }

@media (max-width: 767px) {
  .js [data-reveal] {
    transition-duration: 600ms;
    transition-delay: var(--delay, calc(var(--i, 0) * 50ms));
  }
  .js [data-reveal="fade-up"],
  .js [data-reveal="slide-up"] { translate: 0 20px; }
  .hero__glow--a { animation: none; }
  .float-card--chat,
  .float-card--flow { animation-duration: 10s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal] { opacity: 1; translate: none; scale: none; }
  .hero__particles,
  .pulse-dot::after { display: none; }
  .carousel__viewport { scroll-behavior: auto; }
}