/*
 * nil/shop/polish.css — interactive affordance polish for /nil/shop
 * Overrides inline <style> transitions with cubic-bezier easing.
 * Scoped to html[data-route="/nil/shop"] — no bleed to other routes.
 * Polish bundle 2026-06-09.
 */

/* ── Toast entrance animation ── */
@keyframes shop-toastEnter {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

html[data-route="/nil/shop"] {

  /* PALETTE FIX (2026-07-06): script.js sets toast text color inline via
     var(--green-positive, #3DBA6E) (the sanctioned sitewide green). Override
     it locally to brand-blue so /nil/shop never renders fintech green — this
     selector's specificity beats tokens.css's bare :root, so it wins
     regardless of stylesheet load order. */
  --green-positive: var(--brand-blue, #00B7FF);

  /* ----------------------------------------------------------
     COSMETIC / BOOST SVG BADGE (SITE-AUDIT-2026-07-02, AUD-17)
     Replaces the gold-rendering '✨'/'🔥' emoji fallback with a bespoke
     rounded-square glossy badge, matching the booster PNG art's visual
     weight, in sanctioned brand red (cosmetics) / brand blue (boosts).
     ---------------------------------------------------------- */
  .shop-card-badge {
    width: 84px;
    height: 84px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 2px rgba(255,255,255,.08), 0 8px 14px rgba(0,0,0,.5);
    transition: transform .22s cubic-bezier(.16,1,.3,1);
  }
  .shop-card:hover .shop-card-badge {
    transform: scale(1.06);
  }
  .shop-card-badge svg {
    width: 44px;
    height: 44px;
  }
  .shop-card-badge--cosmetic {
    background: linear-gradient(135deg,#2a0a0a,#160404);
    border: 2px solid rgba(255,45,45,.55);
    color: #FF4D4D;
  }
  .shop-card-badge--boost {
    background: linear-gradient(135deg,#03141c,#020a0f);
    border: 2px solid rgba(0,183,255,.55);
    color: #00B7FF;
  }
  @media (prefers-reduced-motion: reduce) {
    .shop-card-badge { transition: none; }
  }

  /* ----------------------------------------------------------
     SHOP CARD PNG HOVER — remove translateY, keep scale only.
     Override the inline rule that does scale(1.06) translateY(-2px).
     Use cubic-bezier spring easing.
     ---------------------------------------------------------- */
  .shop-card-png {
    transition: transform .22s cubic-bezier(.16,1,.3,1);
  }

  .shop-card:hover .shop-card-png {
    transform: scale(1.06); /* translateY removed per spec */
  }

  /* ----------------------------------------------------------
     TOAST — cubic-bezier easing + @keyframes entrance
     ---------------------------------------------------------- */
  .toast {
    transition: opacity .25s cubic-bezier(.16,1,.3,1),
                transform .25s cubic-bezier(.16,1,.3,1);
  }

  .toast.show {
    animation: shop-toastEnter .3s cubic-bezier(.16,1,.3,1) both;
  }

}

/* prefers-reduced-motion: disable toast entrance animation */
@media (prefers-reduced-motion: reduce) {
  html[data-route="/nil/shop"] .toast.show {
    animation: none;
    transform: none;
    opacity: 1;
  }
  html[data-route="/nil/shop"] .shop-card-png {
    transition: none;
  }
}