/* =========================================================
   Discount Effects (PSNStore) — SYNC TIMING
   - Discount %-badge pulse and Discount price block pulse
     run with the SAME duration and rhythm.
   - No extra decorations for price area (standard look).
   ========================================================= */

:root{
  --psn-discount-pulse-duration: 3s; /* synced timing for both badge and price */
}

/* ---- Discount %-badge pulse (synced) ---- */
.discount-badge:not(.d-none){
  animation: psn_discount_pulse var(--psn-discount-pulse-duration) ease-in-out infinite;
  transform-origin: center;
  will-change: transform, filter;
}

/* ---- PRICE AREA: pulse only (synced) ----
   Works if discount-fx is on .game-card or on outer container.
*/
.game-card.discount-fx .price.price-discount,
.discount-fx .price.price-discount{
  display: inline-block; /* allows transform without layout issues */
  transform-origin: center;
  animation: psn_discount_pulse var(--psn-discount-pulse-duration) ease-in-out infinite;
  will-change: transform, filter;
}

/* Shared pulse keyframes:
   - Calm most of the cycle
   - Short "pop" then return
*/
@keyframes psn_discount_pulse{
  0%, 72%, 100% { transform: scale(1); filter: none; }
  82%           { transform: scale(1.05); filter: drop-shadow(0 0 10px rgba(255,61,113,0.22)); }
  90%           { transform: scale(1); filter: none; }
}

/* Reduced motion: disable animations */
@media (prefers-reduced-motion: reduce){
  .discount-badge:not(.d-none),
  .game-card.discount-fx .price.price-discount,
  .discount-fx .price.price-discount{
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
}