/* =====================================================================
   fx.css — hiệu ứng tương tác & chuyển động (đi kèm js/fx.js)
   Mọi thứ dùng thuộc tính transform riêng lẻ (translate / rotate / scale)
   để KHÔNG đè lên transform sẵn có của phần tử.
   ===================================================================== */
:root {
  --fx-gold: #C9A46A;
  --fx-gold-2: #E3C99A;
  --fx-ivory: #F5EFE6;
  --fx-wine: #4E1219;
}

/* ---------- lớp canvas hạt (ripple + bụi vàng) ---------- */
.fx-canvas {
  position: fixed; left: 0; top: 0; z-index: 2147483000;
  width: 100vw; height: 100vh;
  pointer-events: none; contain: strict;
}

/* ---------- 3. Tilt + sheen ---------- */
.fx-sheen {
  position: absolute; inset: 0; z-index: 6;
  border-radius: inherit; overflow: hidden;
  pointer-events: none; opacity: 0;
}
.fx-sheen > i {
  position: absolute; left: -75%; top: -75%; width: 250%; height: 250%;
  background:
    radial-gradient(closest-side, rgba(255, 244, 222, .16), rgba(255, 244, 222, 0) 70%) 50% 50% / 46% 46% no-repeat,
    linear-gradient(115deg,
      rgba(255, 240, 214, 0) 40%,
      rgba(255, 240, 214, .10) 46%,
      rgba(255, 246, 228, .26) 50%,
      rgba(227, 201, 154, .10) 54%,
      rgba(255, 240, 214, 0) 60%);
  mix-blend-mode: screen;
}

/* ---------- 4. Nút nam châm ---------- */
.fx-shine {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; overflow: hidden; pointer-events: none;
}
.fx-shine > i {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 42%;
  background: linear-gradient(100deg, rgba(255, 246, 228, 0) 0%, rgba(255, 246, 228, .42) 50%, rgba(255, 246, 228, 0) 100%);
  transform: translateX(-120%); opacity: 0;
}

/* ---------- 5. Ánh lướt trên dấu sáp ---------- */
.fx-glint {
  position: absolute; z-index: 2; pointer-events: none; overflow: hidden;
  border-radius: 50%;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.fx-glint > i {
  position: absolute; top: -30%; bottom: -30%; left: 0; width: 50%;
  background: linear-gradient(90deg,
    rgba(255, 248, 230, 0) 0%, rgba(255, 248, 230, .10) 22%, rgba(255, 250, 236, .62) 50%,
    rgba(255, 240, 205, .10) 78%, rgba(255, 248, 230, 0) 100%);
  mix-blend-mode: screen;
  transform: translateX(-110%) rotate(18deg);
}

/* ---------- 6. Đếm ngược: lật số ---------- */
[data-u].fx-flip-host {
  position: relative; display: inline-block;
  overflow: hidden; perspective: 12em;
  vertical-align: top;
}
[data-u] > .fx-flip-new, [data-u] > .fx-flip-old {
  display: inline-block; margin: 0; padding: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  backface-visibility: hidden;
}
[data-u] > .fx-flip-old { position: absolute; left: 0; right: 0; top: 0; text-align: center; }

/* ---------- 7. Tiêu đề tách chữ & đường kẻ vàng ---------- */
.fx-w { display: inline-block; }
[data-fx-divider] { scale: var(--fx-sx, 1) 1; }

/* ---------- 8. Hoa đung đưa theo tốc độ cuộn ---------- */
[data-fx-sway] { rotate: calc(var(--fx-sway, 0) * var(--fx-k, 1) * 1deg); }