/* ============================================================
   HIỆU ỨNG SANG TRỌNG (LUXURY EFFECTS)
   File này chỉ chứa hiệu ứng chuyển động/hình ảnh, không ảnh hưởng layout.
   Muốn tắt bớt hiệu ứng nào, xoá khối tương ứng bên dưới là được.
============================================================ */

/* Toàn trang: hiện dần nhẹ nhàng khi tải xong (không phụ thuộc JS, luôn an toàn) */
body{ animation: pageFadeIn .7s ease both; }
@keyframes pageFadeIn{ from{opacity:0;} to{opacity:1;} }

/* Hiệu ứng "hiện khi cuộn tới" — lớp .reveal / .in-view do js/effects.js gắn vào */
.reveal{ opacity:0; transform:translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in-view{ opacity:1; transform:none; }

/* Nút chính: ánh sáng lướt qua khi hover — cảm giác cao cấp kiểu nhãn hiệu thời trang */
.btn-solid, .btn-dark{ position:relative; overflow:hidden; }
.btn-solid::before, .btn-dark::before{
  content:''; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .7s ease; pointer-events:none;
}
.btn-solid:hover::before, .btn-dark:hover::before{ left:130%; }

/* Thẻ sản phẩm: ảnh zoom nhẹ mượt hơn khi hover */
.card-img img{ transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .4s ease; }
.card:hover .card-img img.img1, .card-img:hover img.img1{ transform:scale(1.08); }

/* Gạch chân vàng-rượu vang chạy ra dưới tiêu đề mỗi mục khi cuộn tới */
.section-head{ position:relative; }
.section-head h2{ position:relative; display:inline-block; }
.section-head h2::after{
  content:''; position:absolute; left:0; bottom:-19px; height:2px; width:0;
  background:linear-gradient(90deg, var(--wine), var(--sand));
  transition:width 1s cubic-bezier(.16,1,.3,1);
}
.section-head.in-view h2::after{ width:64px; }

/* Hero: quầng sáng mềm theo con trỏ chuột, chỉ hiện trong vùng hero */
.hero{ position:relative; }
.hero-cursor-glow{
  position:absolute; width:420px; height:420px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(216,207,192,.22), transparent 70%);
  transform:translate(-50%,-50%); opacity:0; transition:opacity .4s ease; z-index:2;
}

/* Hero: chữ xuất hiện theo từng lớp khi tải trang, tạo cảm giác điện ảnh */
.hero-eyebrow{ animation: fadeSlideUp .8s .2s cubic-bezier(.16,1,.3,1) both; }
.hero-content h1{ animation: fadeSlideUp .9s .4s cubic-bezier(.16,1,.3,1) both; }
.hero-content .btn{ animation: fadeSlideUp .9s .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes fadeSlideUp{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }

/* Hero: ảnh nền trôi nhẹ (parallax) khi cuộn — điều khiển bởi js/effects.js */
.hero img{ will-change:transform; }

/* Badge Sale: tối giản, không hiệu ứng nhấp nháy — phù hợp phong cách sang trọng đơn sắc */

/* Thanh tiện ích (freeship, đổi trả...): nhấn nhẹ khi hover */
.trustbar .item{ transition: color .25s ease, transform .25s ease; }
.trustbar .item:hover{ color:var(--ink); transform:translateY(-1px); }

/* Menu điều hướng: giãn chữ nhẹ khi hover, cảm giác thanh lịch hơn gạch chân đơn thuần */
nav.main>.navitem{ transition: letter-spacing .25s ease; }
nav.main>.navitem:hover{ letter-spacing:.04em; }

/* Nút Zalo/Messenger nổi & nút back-to-top: phản hồi mượt khi hover */
.fab-chat a, .fab-top{ transition: transform .25s ease, opacity .3s ease, box-shadow .25s ease; }
.fab-chat a:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 12px 26px rgba(0,0,0,.25); }
.fab-top:hover{ transform:translateY(-3px); }

/* Modal & drawer: easing mượt hơn khi mở/đóng */
.modal-center, .drawer, .search-panel{ transition-timing-function: cubic-bezier(.16,1,.3,1); }

/* Ảnh trong lookbook / mega menu: zoom nhẹ khi hover cả khối */
.mega-feature{ overflow:hidden; }
.mega-feature img{ transition: transform .6s cubic-bezier(.16,1,.3,1); }
.mega-feature:hover img{ transform:scale(1.05); }

/* Luôn tôn trọng người dùng muốn giảm hiệu ứng chuyển động (trợ năng) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}