/* =========================================================
  HIỆU ỨNG CHUYỂN ĐỘNG (NHẸ) – CẨM NANG
  - Khi cuộn: chữ/thẻ trượt vào (trái/phải/lên) + mờ dần
  - Khi rê chuột: icon/phần tử phóng nhẹ, sang và mượt
  - Tối ưu truy cập: tôn trọng prefers-reduced-motion
========================================================= */

/* 1) Hiệu ứng khi cuộn (được JS thêm lớp) */
body.hlx-cam-nang-wp .tc-main .hlx-reveal{
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 860ms cubic-bezier(.2,.8,.2,1),
    transform 860ms cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--hlx-delay, 0ms);
  will-change: transform, opacity;
}

body.hlx-cam-nang-wp .tc-main .hlx-reveal.hlx-reveal--left{
  transform: translate3d(-34px, 14px, 0);
}
body.hlx-cam-nang-wp .tc-main .hlx-reveal.hlx-reveal--right{
  transform: translate3d(34px, 14px, 0);
}
body.hlx-cam-nang-wp .tc-main .hlx-reveal.hlx-reveal--up{
  transform: translate3d(0, 26px, 0);
}

body.hlx-cam-nang-wp .tc-main .hlx-reveal.is-inview{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 2) Rê chuột: thẻ + icon phóng nhẹ (chỉ áp dụng thiết bị có chuột) */
@media (hover: hover) and (pointer: fine){
  body.hlx-cam-nang-wp .tc-main .tc-card,
  body.hlx-cam-nang-wp .tc-main .tc-video-card,
  body.hlx-cam-nang-wp .tc-main .tc-post{
    transition:
      transform 280ms cubic-bezier(.2,.8,.2,1),
      box-shadow 280ms cubic-bezier(.2,.8,.2,1),
      border-color 200ms ease;
  }

  body.hlx-cam-nang-wp .tc-main .tc-card:hover,
  body.hlx-cam-nang-wp .tc-main .tc-video-card:hover,
  body.hlx-cam-nang-wp .tc-main .tc-post:hover{
    transform: translateY(-4px);
  }

  body.hlx-cam-nang-wp .tc-main .tc-ico{
    transition:
      transform 220ms cubic-bezier(.2,.8,.2,1),
      box-shadow 220ms cubic-bezier(.2,.8,.2,1),
      filter 220ms ease;
    transform-origin: center;
  }

  body.hlx-cam-nang-wp .tc-main .tc-card:hover .tc-ico,
  body.hlx-cam-nang-wp .tc-main .tc-post:hover .tc-ico,
  body.hlx-cam-nang-wp .tc-main .tc-video-card:hover .tc-ico{
    transform: scale(1.10) rotate(-2deg);
    filter: saturate(1.05);
  }

  /* Nếu có hình/ảnh bìa trong thẻ, phóng nhẹ */
  body.hlx-cam-nang-wp .tc-main .tc-post img,
  body.hlx-cam-nang-wp .tc-main .tc-video-thumb img{
    transition: transform 260ms cubic-bezier(.2,.8,.2,1);
    transform-origin: center;
  }
  body.hlx-cam-nang-wp .tc-main .tc-post:hover img,
  body.hlx-cam-nang-wp .tc-main .tc-video-card:hover .tc-video-thumb img{
    transform: scale(1.03);
  }
}

/* 3) Tối ưu truy cập: người dùng không muốn hiệu ứng */
@media (prefers-reduced-motion: reduce){
  body.hlx-cam-nang-wp .tc-main .hlx-reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body.hlx-cam-nang-wp .tc-main *{
    scroll-behavior: auto !important;
  }
}