/* ===== FX beranda: tilt, shine, pop countdown, pulse badge =====
   Cuma dipakai di index.html. Semua gerakan mati kalau prefers-reduced-motion. */

/* ── Tilt kartu (desktop/mouse aja, diatur fx.js lewat --rx/--ry) ── */
.fx-tilting {
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px) !important;
  transition: transform 0.08s linear, border-color 0.3s, box-shadow 0.3s !important;
  will-change: transform;
}

/* Kilau putih yang ngikutin kursor dihapus (bikin kartu keliatan keruh pas hover) */
.product-card, .flash-product-card, .topup-game-card { position: relative; }

/* ── Angka countdown: pop tiap berubah ── */
.fx-pop { animation: fx-pop 0.35s ease-out; }
@keyframes fx-pop {
  0%   { transform: translateY(-35%) scale(1.12); opacity: 0.4; }
  100% { transform: none; opacity: 1; }
}

/* ── Badge PROMO HARI INI & status Top Up Cash Instan: denyut halus ── */
.flash-title-group .badge-danger { animation: fx-badge 2s ease-in-out infinite; }
@keyframes fx-badge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50%      { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
}
.topup-game-card.active-pb .topup-game-status { animation: fx-glow 2.4s ease-in-out infinite; }
@keyframes fx-glow {
  0%, 100% { text-shadow: none; }
  50%      { text-shadow: 0 0 10px rgba(251,191,36,0.75); }
}

/* ── Reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .fx-tilting { transform: none !important; }
  .fx-pop,
  .flash-title-group .badge-danger,
  .topup-game-card.active-pb .topup-game-status { animation: none !important; }
}

/* ===== Poles tahap 2: zoom gambar, reveal saat scroll, efek tombol ===== */

/* ── Zoom gambar di kartu (hover mouse aja) ── */
.product-card-header > img,
.flash-product-card img,
.topup-game-card img {
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card-header > img,
  .flash-product-card:hover img,
  .topup-game-card:hover img { transform: scale(1.07); }
}

/* ── Reveal saat scroll (kelas ditambah fx.js, jadi aman kalau JS mati) ── */
.fx-reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--fx-delay, 0s);
}
.fx-reveal.fx-in { opacity: 1; transform: none; }

/* ── Tombol: efek tekan ── */
.btn:active { transform: scale(0.97) !important; transition-duration: 0.08s; }

/* ── Reduced-motion tahap 2 ── */
@media (prefers-reduced-motion: reduce) {
  .fx-reveal { opacity: 1; transform: none; transition: none; }
  .product-card-header > img,
  .flash-product-card img,
  .topup-game-card img { transition: none; transform: none !important; }
}

/* ===== Tiket "FLASH SALE" gantung (tema oranye-merah-emas XYZ) ===== */
.flash-card-box::before {
  content: ''; position: absolute; z-index: 4; pointer-events: none;
  top: -3px; left: 10px; width: 42px; height: 60px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 60'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23ff8a3d'/><stop offset='1' stop-color='%23d1280a'/></linearGradient></defs><path d='M22 0 L22 13' stroke='%23fbbf24' stroke-width='1.6' stroke-linecap='round' fill='none'/><g transform='rotate(-7 22 36)'><path d='M12 14 H32 L39 21 V51 a3 3 0 0 1 -3 3 H8 a3 3 0 0 1 -3 -3 V21 Z' fill='url(%23g)' stroke='%23ffd8c2' stroke-width='1.3' stroke-linejoin='round'/><circle cx='22' cy='21' r='2.4' fill='%230a0405' stroke='%23ffd8c2' stroke-width='1'/><text x='22' y='34' text-anchor='middle' font-family='Arial,sans-serif' font-weight='900' font-size='7.6' letter-spacing='0.3' fill='%23ffffff'>FLASH</text><path d='M11 37.5 H33' stroke='%23fbbf24' stroke-width='1' stroke-linecap='round'/><text x='22' y='47' text-anchor='middle' font-family='Arial,sans-serif' font-weight='900' font-size='8.4' letter-spacing='0.6' fill='%23fbbf24'>SALE</text></g></svg>") no-repeat center / contain;
  transform-origin: 50% 0;
  animation: fx-swing 3.2s ease-in-out infinite;
  filter: drop-shadow(0 3px 6px rgba(255,90,30,0.55));
}
@keyframes fx-swing {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) { .flash-card-box::before { animation: none; } }