/* fx.css — light motion/enhancement layer for the Aurora Market theme.
   Purely additive. Everything here is skipped on .lite / reduced-motion
   devices so phones stay lag-free (flags set by the probe in index.html). */

/* ---- product-card 3D tilt (desktop / capable devices only) ---- */
.pgrid{perspective:1400px}
.tilt{transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease;will-change:transform}
.tilt:hover{box-shadow:var(--shadow-lg),0 26px 50px rgba(26,22,66,.16)}
.pcard.tilt .pcard-imgwrap{transform:translateZ(24px);transition:transform .24s}
.pcard.tilt .pcard-deal,.pcard.tilt .pcard-fav{transform:translateZ(40px)}
.lite .tilt{transform:none !important}

/* ---- scroll-reveal entrance ---- */
.reveal{opacity:0;transform:translateY(20px) scale(.99)}
.reveal.in{animation:revealUp .55s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes revealUp{to{opacity:1;transform:none}}
.pcard.reveal{transition-delay:var(--d,0ms)}
.lite .reveal,.lite .reveal.in{opacity:1 !important;transform:none !important;animation:none !important}

/* ---- role selector on the sign-in modal ---- */
.role-seg{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  background:var(--bg-2);border-radius:14px;padding:5px;margin-bottom:18px}
.role-seg button{
  padding:10px 6px;border-radius:10px;font-size:12px;font-weight:700;color:var(--ink-2);
  transition:background .18s,color .18s,transform .15s;letter-spacing:.01em}
.role-seg button:hover{color:var(--ink);transform:translateY(-1px)}
.role-seg button.on{background:var(--brand-grad);color:#fff;box-shadow:var(--shadow-glow)}

/* ---- gentle float on hero badges ---- */
.hero-badge{animation:floaty 5s ease-in-out infinite}
.hero-badge:nth-child(2){animation-delay:.6s}
.hero-badge:nth-child(3){animation-delay:1.2s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ---- reduced motion / lite: kill all decorative animation ---- */
@media (prefers-reduced-motion:reduce){
  .tilt{transition:none !important;transform:none !important}
  .reveal,.reveal.in{opacity:1 !important;transform:none !important;animation:none !important}
  .hero-badge{animation:none !important}
}
.lite .hero-badge{animation:none}