/* Mạc Gia License — lớp hiệu ứng CAO CẤP (premium)
   Tinh tế, sang trọng, mượt. An toàn: chỉ ẩn phần dưới màn hình rồi hiện dần khi cuộn;
   phần đầu trang luôn hiện ngay. Tôn trọng prefers-reduced-motion. */

/* ===== Reveal khi cuộn (trồi lên + phóng nhẹ cho có chiều sâu) ===== */
.mglp-hidden { opacity: 0; transform: translateY(32px) scale(.985); }
.mglp-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity .9s cubic-bezier(.16,.8,.3,1), transform .95s cubic-bezier(.16,.8,.3,1);
}

/* ===== Đường kẻ trang trí "vẽ ra" khi cuộn tới ===== */
.mglp-line { transform: scaleX(0); transform-origin: center; transition: transform .85s cubic-bezier(.16,.8,.3,1); }
.mglp-line.mglp-line-in { transform: scaleX(1); }

/* ===== Nút chính: ánh sáng lướt qua khi hover ===== */
a[data-fx-magnetic] { position: relative; overflow: hidden; }
a[data-fx-magnetic]::after {
  content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
a[data-fx-magnetic]:hover::after { left: 140%; transition: left .75s ease; }

/* ===== Thẻ sản phẩm: nâng + đổ bóng sang trọng + zoom ảnh ===== */
[data-mgl-idx] {
  transition: transform .45s cubic-bezier(.16,.8,.3,1), box-shadow .45s cubic-bezier(.16,.8,.3,1) !important;
  will-change: transform;
}
[data-mgl-idx]:hover {
  transform: translateY(-9px) !important;
  box-shadow: 0 36px 64px -30px rgba(104,20,20,.55) !important;
}
[data-mgl-idx] img { transition: transform .6s cubic-bezier(.16,.8,.3,1); }
[data-mgl-idx]:hover img { transform: scale(1.07); }

/* thẻ case-study / decision cũng nâng nhẹ */
.mgl-case-studies article, .mgl-product-decision article {
  transition: transform .4s cubic-bezier(.16,.8,.3,1), box-shadow .4s cubic-bezier(.16,.8,.3,1);
}
.mgl-case-studies article:hover, .mgl-product-decision article:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 52px -30px rgba(104,20,20,.5);
}

/* ===== Badge nổi ở hero: trôi nhẹ (idle float) ===== */
@keyframes mglpFloatA { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes mglpFloatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
.mglp-float-a { animation: mglpFloatA 5.5s ease-in-out infinite; }
.mglp-float-b { animation: mglpFloatB 6.5s ease-in-out infinite; }

/* ===== Ảnh hero: bồng bềnh rất nhẹ ===== */
@keyframes mglpDrift { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-7px) rotate(-.4deg)} }
.mglp-drift { animation: mglpDrift 9s ease-in-out infinite; }

/* ===== Kicker ánh vàng chạy nhẹ ===== */
@keyframes mglpShimmer { to { background-position: 200% center; } }
.mglp-shimmer {
  background: linear-gradient(90deg, currentColor 0%, currentColor 38%, #e7c877 50%, currentColor 62%, currentColor 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mglpShimmer 4.5s linear infinite;
}

/* ===== Nút chính: đổ bóng chiều sâu khi hover ===== */
a[data-fx-magnetic] { transition: transform .18s ease, box-shadow .3s ease, background .18s ease; }
a[data-fx-magnetic]:hover { box-shadow: 0 18px 34px -16px rgba(104,20,20,.6); }

/* ===== Chỉ báo "cuộn xuống" nảy nhẹ ===== */
@keyframes mglpBob { 0%,100%{transform:translateY(0);opacity:.7} 50%{transform:translateY(6px);opacity:1} }
.mglp-bob { animation: mglpBob 1.8s ease-in-out infinite; }

/* ===== HERO cao cấp (trang chủ) ===== */
/* Nghiêng 3D theo chuột trên khối sản phẩm */
.mglp-tilt { transition: transform .4s cubic-bezier(.16,.8,.3,1); will-change: transform; }

/* Bụi vàng bay lên nhẹ trong hero */
.mglp-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mglp-particle {
  position: absolute; bottom: -14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(231,200,119,.95), rgba(231,200,119,0) 70%);
  opacity: 0;
  animation-name: mglpRiseUp; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes mglpRiseUp {
  0%   { transform: translate3d(0,0,0) scale(.6); opacity: 0; }
  12%  { opacity: .75; }
  85%  { opacity: .4; }
  100% { transform: translate3d(26px,-86vh,0) scale(1); opacity: 0; }
}

/* Ánh vàng quét qua chữ nhấn "an tâm" */
@keyframes mglpAccent { to { background-position: 200% center; } }
.mglp-accent {
  background: linear-gradient(100deg, currentColor 0%, currentColor 42%, #f0d68a 50%, #e7c877 54%, currentColor 64%, currentColor 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mglpAccent 5s ease-in-out infinite;
}

/* ===== Tôn trọng người dùng tắt chuyển động ===== */
@media (prefers-reduced-motion: reduce) {
  .mglp-particles { display: none !important; }
  .mglp-tilt { transform: none !important; }
  .mglp-line { transform: none !important; }
  .mglp-accent { -webkit-text-fill-color: currentColor; animation: none !important; }
  .mglp-hidden { opacity: 1 !important; transform: none !important; }
  .mglp-float-a, .mglp-float-b, .mglp-drift, .mglp-shimmer, .mglp-bob { animation: none !important; }
  .mglp-shimmer { -webkit-text-fill-color: currentColor; }
}