/* =====================================================================
   BLOUSE MINH MỸ — Hiệu ứng chuyển động
   Tệp: assets/css/animations.css
   Nguyên tắc: mọi hiệu ứng đều tắt khi người dùng bật
               "giảm chuyển động" trong hệ điều hành.
   ===================================================================== */

/* ===================================================================
   1. KHUNG HÌNH (keyframes)
   =================================================================== */

@keyframes lp-fade-up {
  from { opacity: 0; transform: translate3d(0, 34px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes lp-fade-down {
  from { opacity: 0; transform: translate3d(0, -26px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes lp-fade-left {
  from { opacity: 0; transform: translate3d(-40px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes lp-fade-right {
  from { opacity: 0; transform: translate3d(40px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes lp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes lp-zoom-in {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes lp-pop {
  0%   { opacity: 0; transform: scale(.4); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes lp-spin {
  to { transform: rotate(360deg); }
}

@keyframes lp-ripple {
  to { transform: scale(2.6); opacity: 0; }
}

@keyframes lp-toast-in {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.96); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes lp-toast-out {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0; transform: translate3d(0, 14px, 0) scale(.96); }
}

/* Nhịp đập nhẹ cho nút gọi — mời người dùng bấm */
@keyframes lp-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(23,163,74,.5); }
  70%  { box-shadow: 0 0 0 15px rgba(23,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(23,163,74,0); }
}

@keyframes lp-pulse-ring-zalo {
  0%   { box-shadow: 0 0 0 0 rgba(0,104,255,.45); }
  70%  { box-shadow: 0 0 0 15px rgba(0,104,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,104,255,0); }
}

/* Vệt sáng chạy trên nền chờ ảnh */
@keyframes lp-shimmer {
  from { background-position: -140% 0; }
  to   { background-position: 240% 0; }
}

/* Trôi rất chậm cho lớp nền trang trí */
@keyframes lp-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}

/* Nhấp nháy chấm trạng thái "đang mở cửa" */
@keyframes lp-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.8); }
}

/* ===================================================================
   2. HIỆN DẦN KHI CUỘN TỚI
   JavaScript gắn class .reveal cho phần tử và .is-visible khi lọt
   vào khung nhìn. Nếu JavaScript không chạy, .no-js sẽ hiện hết.
   =================================================================== */

.reveal {
  opacity: 0;
  will-change: opacity, transform;
}

.reveal.is-visible {
  animation: lp-fade-up .72s var(--ease-out) both;
}

.reveal[data-reveal="down"].is-visible  { animation-name: lp-fade-down; }
.reveal[data-reveal="left"].is-visible  { animation-name: lp-fade-left; }
.reveal[data-reveal="right"].is-visible { animation-name: lp-fade-right; }
.reveal[data-reveal="fade"].is-visible  { animation-name: lp-fade-in; }
.reveal[data-reveal="zoom"].is-visible  { animation-name: lp-zoom-in; }

/* Hiện lần lượt từng thẻ con trong lưới */
.reveal-group > * {
  opacity: 0;
  will-change: opacity, transform;
}
.reveal-group.is-visible > * {
  animation: lp-fade-up .66s var(--ease-out) both;
}
.reveal-group.is-visible > *:nth-child(1)  { animation-delay: .00s; }
.reveal-group.is-visible > *:nth-child(2)  { animation-delay: .06s; }
.reveal-group.is-visible > *:nth-child(3)  { animation-delay: .12s; }
.reveal-group.is-visible > *:nth-child(4)  { animation-delay: .18s; }
.reveal-group.is-visible > *:nth-child(5)  { animation-delay: .24s; }
.reveal-group.is-visible > *:nth-child(6)  { animation-delay: .30s; }
.reveal-group.is-visible > *:nth-child(7)  { animation-delay: .36s; }
.reveal-group.is-visible > *:nth-child(8)  { animation-delay: .42s; }
.reveal-group.is-visible > *:nth-child(9)  { animation-delay: .48s; }
.reveal-group.is-visible > *:nth-child(10) { animation-delay: .54s; }
.reveal-group.is-visible > *:nth-child(n+11) { animation-delay: .58s; }

/* Khi tắt JavaScript: hiện toàn bộ nội dung, không giấu gì cả */
.no-js .reveal,
.no-js .reveal-group > * { opacity: 1; animation: none; }

/* ===================================================================
   3. HIỆU ỨNG RIÊNG TỪNG KHỐI
   =================================================================== */

/* Nút gọi nổi đập nhẹ để thu hút sự chú ý */
.float-call { animation: lp-pulse-ring 2.6s var(--ease-out) infinite; }
.float-zalo { animation: lp-pulse-ring-zalo 2.6s var(--ease-out) .8s infinite; }
.floating a:hover .float-btn { animation-play-state: paused; }

/* Chấm trạng thái đang mở cửa trên thanh thông báo */
.status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #46d17f;
  margin-right: 6px;
  vertical-align: middle;
  animation: lp-blink 2s ease-in-out infinite;
}

/* Ảnh chưa tải xong: hiện nền chuyển sắc chạy */
.img-skeleton {
  background: linear-gradient(100deg, var(--mint) 28%, #dff2ef 42%, var(--mint) 58%);
  background-size: 240% 100%;
  animation: lp-shimmer 1.5s linear infinite;
}

/* Lớp nền trang trí trôi chậm trong khối hero */
.product::before {
  content: '';
  position: absolute;
  top: -90px; right: -90px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88,214,210,.22), transparent 68%);
  pointer-events: none;
  animation: lp-drift 9s ease-in-out infinite;
}

/* Con số ở thanh tin cậy đang đếm lên */
.trust-num b[data-count] { font-variant-numeric: tabular-nums; }

/* Nội dung tab đổi mượt khi bấm */
.tab-panel { animation: lp-fade-up .42s var(--ease-out) both; }

/* Hàng giải pháp hiện lần lượt từ trái sang */
.sol-list.is-visible .sol-row { animation: lp-fade-left .6s var(--ease-out) both; }
.sol-list .sol-row { opacity: 0; }
.sol-list.is-visible .sol-row:nth-child(1) { animation-delay: .00s; }
.sol-list.is-visible .sol-row:nth-child(2) { animation-delay: .08s; }
.sol-list.is-visible .sol-row:nth-child(3) { animation-delay: .16s; }
.sol-list.is-visible .sol-row:nth-child(4) { animation-delay: .24s; }
.sol-list.is-visible .sol-row:nth-child(5) { animation-delay: .32s; }
.sol-list.is-visible .sol-row:nth-child(6) { animation-delay: .40s; }
.no-js .sol-list .sol-row { opacity: 1; animation: none; }

/* Ảnh phụ trong khối xưởng vào sau ảnh chính */
.workshop-media.is-visible .workshop-main  { animation: lp-fade-left .78s var(--ease-out) both; }
.workshop-media.is-visible .workshop-inset { animation: lp-zoom-in .7s var(--ease-out) .24s both; }
.workshop-media .workshop-main,
.workshop-media .workshop-inset { opacity: 0; }
.no-js .workshop-media .workshop-main,
.no-js .workshop-media .workshop-inset { opacity: 1; animation: none; }

/* ===================================================================
   4. TÔN TRỌNG LỰA CHỌN GIẢM CHUYỂN ĐỘNG
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }

  .reveal,
  .reveal-group > *,
  .sol-list .sol-row,
  .workshop-media .workshop-main,
  .workshop-media .workshop-inset { opacity: 1 !important; transform: none !important; }

  .button:hover,
  .job-card:hover,
  .reason-card:hover,
  .route-card:hover,
  .swatch:hover,
  .thumb:hover { transform: none !important; }

  .product::before { animation: none; }
}