/* =====================================================================
   Motion layer — small, purposeful 3D / live animations.
   Rules: transform + opacity only (compositor-friendly), no backdrop-filter,
   nothing inside .product-card gets a new filter or blur (see #345),
   everything off under prefers-reduced-motion.
   ===================================================================== */

:root {
  --mo-ease: cubic-bezier(.32, .72, 0, 1);
  --mo-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- 3D tilt (pointer-driven, desktop only; JS sets --tilt-x/--tilt-y/--glare-x/--glare-y) ---------- */
@media (hover: hover) and (pointer: fine) {
  .mo-tilt-scene { perspective: 1100px; }
  .mo-tilt {
    transform-style: preserve-3d;
    transition: transform .55s var(--mo-ease), box-shadow .55s var(--mo-ease);
  }
  .mo-tilt.is-tilting,
  .pay-method.mo-tilt.is-tilting:hover {
    transition: transform .08s linear, box-shadow .3s var(--mo-ease);
    transform:
      translateY(-4px)
      rotateX(var(--tilt-x, 0deg))
      rotateY(var(--tilt-y, 0deg));
  }
  .mo-tilt .mo-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(220px circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(124, 176, 255, .16), transparent 60%);
    transition: opacity .35s var(--mo-ease);
    z-index: 3;
  }
  .mo-tilt.is-tilting .mo-glare { opacity: 1; }
  .pay-method.mo-tilt:hover { transform: translateY(-4px); }
}

/* ---------- Payment wizard: pane flip-in, method select, amount box ---------- */
.pay-methods { perspective: 1200px; }
form .wiz-pane, .glass-card .wiz-pane {
  animation: moPaneIn .55s var(--mo-ease) both;
  transform-origin: 50% 0;
}
@keyframes moPaneIn {
  from { opacity: 0; transform: perspective(1200px) rotateX(-7deg) translateY(18px); }
  to   { opacity: 1; transform: perspective(1200px) rotateX(0) translateY(0); }
}
.pay-method { position: relative; }
.pay-method.is-selected .pay-method__icon {
  animation: moCoinFlip .7s var(--mo-spring) both;
}
@keyframes moCoinFlip {
  0%   { transform: perspective(400px) rotateY(0); }
  50%  { transform: perspective(400px) rotateY(180deg) scale(1.08); }
  100% { transform: perspective(400px) rotateY(360deg); }
}
.pay-method__icon { will-change: transform; }

.pay-amount-box { position: relative; overflow: hidden; }
.pay-amount-box::before {
  content: '';
  position: absolute;
  inset: -40% -60%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(124, 176, 255, .14) 50%, transparent 60%);
  transform: translateX(-60%);
  animation: moSheen 4.2s var(--mo-ease) 1s infinite;
}
@keyframes moSheen {
  0%, 55% { transform: translateX(-60%); }
  100%    { transform: translateX(60%); }
}
.pay-amount-box__value {
  animation: moValueIn .7s var(--mo-spring) both;
}
@keyframes moValueIn {
  from { opacity: 0; transform: perspective(600px) rotateX(55deg) translateY(10px); }
  to   { opacity: 1; transform: perspective(600px) rotateX(0) translateY(0); }
}

/* Live "awaiting" ring on the active step + gateway dot */
.pay-steps__item.is-active .pay-steps__dot { position: relative; }
.pay-steps__item.is-active .pay-steps__dot::after,
.pay-hero__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(59, 130, 246, .55);
  animation: moPing 1.8s var(--mo-ease) infinite;
}
.pay-hero__dot { position: relative; }
.pay-hero__dot::after { border-color: rgba(34, 197, 94, .55); }
@keyframes moPing {
  0%   { transform: scale(.7); opacity: .9; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Verify overlay: card floats in 3D, ring keeps spinning */
.verify-overlay.is-on .verify-card {
  animation: moFloatIn .6s var(--mo-spring) both, moHover 3.2s ease-in-out 1s infinite;
}
@keyframes moFloatIn {
  from { opacity: 0; transform: perspective(900px) rotateX(18deg) translateY(30px) scale(.94); }
  to   { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0) scale(1); }
}
@keyframes moHover {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* Copy buttons: 3D tick pop */
.btn-ghost.is-copied { animation: moTick .45s var(--mo-spring); }
@keyframes moTick {
  0%   { transform: perspective(300px) rotateX(70deg) scale(.9); }
  100% { transform: perspective(300px) rotateX(0) scale(1); }
}

/* ---------- Wallet chip: coin pop when balance changes / success toast ---------- */
.header-wallet-chip, .sidebar-wallet, .stat-card-credits .stat-value { transform-style: preserve-3d; }
.mo-coin-pop {
  animation: moCoinPop .9s var(--mo-spring) both;
}
@keyframes moCoinPop {
  0%   { transform: perspective(600px) rotateY(0) scale(1); }
  35%  { transform: perspective(600px) rotateY(180deg) scale(1.08); }
  70%  { transform: perspective(600px) rotateY(360deg) scale(1.02); }
  100% { transform: perspective(600px) rotateY(360deg) scale(1); }
}

/* Success toast: check draws + card flips in */
.toast.toast-success { animation: moToastIn .55s var(--mo-spring) both; }
.toast.toast-success .toast-icon { animation: moCheckPop .6s var(--mo-spring) .1s both; }
@keyframes moToastIn {
  from { opacity: 0; transform: perspective(800px) rotateX(-40deg) translateY(-10px); }
  to   { opacity: 1; transform: perspective(800px) rotateX(0) translateY(0); }
}
@keyframes moCheckPop {
  0%   { transform: scale(.4) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* ---------- Purchase modal: product tile tilts in, confirm button breathes ---------- */
.purchase-modal.show .purchase-modal-product {
  animation: moTileIn .6s var(--mo-spring) both;
}
@keyframes moTileIn {
  from { opacity: 0; transform: perspective(800px) rotateY(-14deg) translateX(-10px); }
  to   { opacity: 1; transform: perspective(800px) rotateY(0) translateX(0); }
}
.purchase-modal.show .purchase-modal-img { animation: moFloatSlow 4s ease-in-out .6s infinite; }
@keyframes moFloatSlow {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(-1.5deg); }
}

/* ---------- Empty states: icon slowly turns in 3D ---------- */
.empty-state-icon svg, .empty-state-icon i { display: inline-block; animation: moTurn 7s ease-in-out infinite; }
@keyframes moTurn {
  0%, 100% { transform: perspective(500px) rotateY(-14deg) translateY(0); }
  50%      { transform: perspective(500px) rotateY(14deg) translateY(-4px); }
}

/* ---------- Stat values: count-up (JS) gets a soft settle ---------- */
.mo-counted { animation: moSettle .5s var(--mo-spring); }
@keyframes moSettle {
  0%   { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ---------- Product card: flat lift + cursor glare on desktop hover (no rotation, no filters) ---------- */
.product-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (hover: hover) and (pointer: fine) {
  .product-card.mo-tilt { transform-style: flat; transition: transform .3s var(--mo-ease), box-shadow .3s var(--mo-ease), border-color .3s var(--mo-ease); }
  html .product-card.mo-tilt.is-tilting,
  html[data-theme="dark"] .product-card.mo-tilt.is-tilting {
    animation: none;
    opacity: 1;
    transition: transform .3s var(--mo-ease), box-shadow .3s var(--mo-ease), border-color .3s var(--mo-ease);
    transform: translateY(-4px);
  }
}

/* ---------- Auth: submit button sheen sweep on hover ---------- */
@media (hover: hover) {
  .btn-primary-auth, .submit-btn { position: relative; overflow: hidden; }
  .btn-primary-auth::after, .submit-btn::after {
    content: '';
    position: absolute;
    inset: -50% -80%;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .22) 50%, transparent 58%);
    transform: translateX(-70%);
    transition: transform .9s var(--mo-ease);
  }
  .btn-primary-auth:hover::after, .submit-btn:hover::after { transform: translateX(70%); }
}

/* ---------- Kill switch ---------- */
@media (prefers-reduced-motion: reduce) {
  .mo-tilt, .mo-tilt.is-tilting, .product-card.mo-tilt.is-tilting { transform: none !important; transition: none !important; }
  .mo-glare { display: none !important; }
  form .wiz-pane, .glass-card .wiz-pane, .pay-method.is-selected .pay-method__icon, .pay-amount-box__value, .verify-overlay.is-on .verify-card,
  .mo-coin-pop, .toast.toast-success, .toast.toast-success .toast-icon, .purchase-modal.show .purchase-modal-product,
  .purchase-modal.show .purchase-modal-img, .empty-state-icon svg, .empty-state-icon i, .mo-counted, .btn-ghost.is-copied {
    animation: none !important;
  }
  .pay-amount-box::before, .pay-steps__item.is-active .pay-steps__dot::after, .pay-hero__dot::after { display: none; }
  .btn-primary-auth::after, .submit-btn::after { display: none; }
}