/* Hiệu ứng tải trang cho landing: chỉ dùng transform/opacity (GPU), không chặn hiển thị.
   Ảnh hero chỉ đổi transform, không đổi opacity, để không làm chậm LCP. Tắt hết khi máy bật "giảm chuyển động". */
@keyframes fx-down  { from { transform:translateY(-100%); } }
@keyframes fx-up    { from { opacity:0; transform:translateY(26px); } }
@keyframes fx-photo { from { transform:translateX(7%) scale(1.04); } }
@keyframes fx-photo-m { from { transform:translateY(7%) scale(1.04); } }
@keyframes fx-zoom  { from { transform:scale(1.14); } }
@keyframes fx-leaf  { from { opacity:0; transform:translateX(-40px); } }
@keyframes fx-line  { from { transform:scaleX(0); } }

@media (prefers-reduced-motion:no-preference) {
  .redesign .topbar { animation:fx-down .55s cubic-bezier(.2,.7,.2,1) backwards; }

  /* Hero: ảnh trượt vào + thu nhẹ, chữ nổi lên lần lượt */
  .reference-hero-photo { animation:fx-photo 1s cubic-bezier(.2,.7,.2,1) backwards; }
  .reference-hero-photo>img { animation:fx-zoom 1.6s cubic-bezier(.2,.7,.2,1) backwards; }
  .hero-leaves i { animation:fx-leaf .9s ease-out .3s backwards; }
  .hero-leaves i:nth-child(2) { animation-delay:.45s; }
  .hero-leaves i:nth-child(3) { animation-delay:.6s; }
  .hero-copy>* { animation:fx-up .7s cubic-bezier(.2,.7,.2,1) backwards; }
  .hero-copy>:nth-child(1) { animation-delay:.2s; }
  .hero-copy>:nth-child(2) { animation-delay:.32s; }
  .hero-copy>:nth-child(3) { animation-delay:.46s; }
  .hero-copy>:nth-child(4) { animation-delay:.58s; }
  .facts-panel { animation:fx-up .75s cubic-bezier(.2,.7,.2,1) .7s backwards; }
  .facts-panel .fact { animation:fx-up .6s cubic-bezier(.2,.7,.2,1) backwards; }
  .facts-panel .fact:nth-child(1) { animation-delay:.8s; }
  .facts-panel .fact:nth-child(2) { animation-delay:.88s; }
  .facts-panel .fact:nth-child(3) { animation-delay:.96s; }
  .facts-panel .fact:nth-child(4) { animation-delay:1.04s; }
  .facts-panel .fact:nth-child(5) { animation-delay:1.12s; }

  /* Cuộn tới đâu hiện tới đó (JS thêm .fx-r rồi .fx-in) */
  .fx-r { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--fx-d,0ms); }
  .fx-r.fx-in { opacity:1; transform:none; }
  .h-section.fx-r { transform:translateY(16px); }

  @media (max-width:719px) {
    .reference-hero-photo { animation-name:fx-photo-m; }
    .fx-r { transform:translateY(20px); transition-duration:.55s,.65s; }
  }
}