/* =========================================================
   LUDOPANDA AAA INTERACTIVE 3D MOTION V3
   Built from mobile QA recording:
   - visible 3D at rest
   - touch press + spring-back
   - desktop pointer tilt + moving light
   - stronger CTA depth
   - ambient premium motion without constant distraction
   ========================================================= */

:root{
  --lp-v3-ease:cubic-bezier(.16,1,.3,1);
}

/* Stronger static extrusion: visible at phone size, not only desktop. */
:is(.primary,.primary-btn,.link-card a,.sticky-return){
  transform:translateZ(0);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(113,72,0,.40),
    0 7px 0 #8E6200,
    0 12px 0 rgba(0,0,0,.15),
    0 18px 26px rgba(0,0,0,.42),
    0 0 28px rgba(255,212,0,.12) !important;
}

:is(.secondary,.secondary-btn,.ghost,.ghost-btn,.back,.support-link,.back-page,.nav-btn){
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.86),
    0 5px 0 #020202,
    0 11px 17px rgba(0,0,0,.38) !important;
}

:is(.action-card,.service-card,.topic-card,.ticket-row,.order-card){
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -3px 0 rgba(0,0,0,.84),
    0 8px 0 #020202,
    0 16px 26px rgba(0,0,0,.46),
    0 30px 56px rgba(0,0,0,.21) !important;
}

/* Hero gains a moving premium light rather than looking like a flat panel. */
.hero{
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  pointer-events:none;
  width:46%;
  height:180%;
  top:-40%;
  left:-58%;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(255,212,0,.075),rgba(255,255,255,.035),transparent);
  transform:rotate(14deg);
  animation:lpV3HeroSweep 7s ease-in-out infinite;
}
@keyframes lpV3HeroSweep{
  0%,22%{left:-58%;opacity:0}
  36%{opacity:1}
  62%{left:112%;opacity:.9}
  63%,100%{left:112%;opacity:0}
}

/* CTA heartbeat is mainly glow, not constant position movement. */
:is(.primary,.primary-btn,.sticky-return){
  animation:lpV3CtaAlive 4.6s ease-in-out infinite;
}
@keyframes lpV3CtaAlive{
  0%,72%,100%{
    filter:brightness(1);
  }
  82%{
    filter:brightness(1.07);
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.58),
      inset 0 -3px 0 rgba(113,72,0,.38),
      0 7px 0 #8E6200,
      0 13px 0 rgba(0,0,0,.14),
      0 21px 30px rgba(0,0,0,.43),
      0 0 38px rgba(255,212,0,.22) !important;
  }
}

/* Touch press is held for a visible moment by presentation-only JS. */
.lp-touch-press{
  transform:translateY(5px) scale(.985) !important;
  filter:brightness(.96) !important;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.22),
    0 1px 0 rgba(0,0,0,.95),
    0 5px 10px rgba(0,0,0,.34) !important;
  transition:transform .07s ease,box-shadow .07s ease,filter .07s ease !important;
}

.lp-tap-pop{
  animation:lpV3TapPop .34s var(--lp-v3-ease) both !important;
}
@keyframes lpV3TapPop{
  0%{transform:translateY(4px) scale(.985)}
  48%{transform:translateY(-3px) scale(1.018)}
  100%{transform:none}
}

/* Balance card needs life on mobile too. */
.balance-card{
  animation:lpV3WalletFloat 5.8s ease-in-out infinite;
}
@keyframes lpV3WalletFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -4px}
}

/* Pointer tilt is injected only for desktop/fine pointer. */
.lp-v3-tilt{
  --lp-rx:0deg;
  --lp-ry:0deg;
  --lp-lx:50%;
  --lp-ly:50%;
  transform:
    perspective(900px)
    translateY(-8px)
    rotateX(var(--lp-rx))
    rotateY(var(--lp-ry))
    scale(1.012) !important;
  transition:transform .12s linear,box-shadow .22s ease !important;
  z-index:4;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -3px 0 rgba(0,0,0,.84),
    0 11px 0 #020202,
    0 28px 42px rgba(0,0,0,.50),
    0 45px 78px rgba(0,0,0,.25),
    0 0 38px rgba(255,212,0,.12) !important;
}

/* JS appends this as a purely decorative moving reflection. */
.lp-v3-glare{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  background:
    radial-gradient(
      circle at var(--lp-lx,50%) var(--lp-ly,50%),
      rgba(255,255,255,.14),
      rgba(255,212,0,.065) 12%,
      transparent 38%
    ) !important;
  mix-blend-mode:screen !important;
  opacity:0 !important;
  transition:opacity .18s ease !important;
}
.lp-v3-tilt > .lp-v3-glare{opacity:1 !important}

/* Tap/click ripple. */
.lp-v3-ripple{
  position:absolute !important;
  z-index:20 !important;
  pointer-events:none !important;
  width:18px !important;
  height:18px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.38) !important;
  transform:translate(-50%,-50%) scale(0) !important;
  animation:lpV3Ripple .52s ease-out forwards !important;
  mix-blend-mode:screen !important;
}
@keyframes lpV3Ripple{
  to{
    opacity:0;
    transform:translate(-50%,-50%) scale(13);
  }
}

/* Icon physically lifts with the parent interaction. */
.lp-touch-press :is(.service-icon,.icon,.topic-icon,.panda-avatar,.shield,.auth-icon){
  transform:translateY(2px) scale(.96) !important;
}
.lp-tap-pop :is(.service-icon,.icon,.topic-icon,.panda-avatar,.shield,.auth-icon){
  animation:lpV3IconPop .38s var(--lp-v3-ease);
}
@keyframes lpV3IconPop{
  0%{transform:translateY(2px) scale(.96)}
  55%{transform:translateY(-6px) scale(1.09) rotate(-4deg)}
  100%{transform:none}
}

/* Stronger selected states. */
.nav-btn.active,.choice-row button.active{
  transform:translateY(-1px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.48),
    inset 0 -2px 3px rgba(118,72,0,.28),
    0 5px 0 #886000,
    0 11px 18px rgba(0,0,0,.34),
    0 0 24px rgba(255,212,0,.11) !important;
}

/* Touch screens: static depth + explicit tap movement remain enabled. */
@media (hover:none), (pointer:coarse){
  :is(.action-card,.service-card,.topic-card,.ticket-row,.order-card){
    transform:none !important;
  }
  :is(.action-card,.service-card,.topic-card,.ticket-row,.order-card).lp-touch-press{
    transform:translateY(5px) scale(.985) !important;
  }
  :is(.action-card,.service-card,.topic-card,.ticket-row,.order-card).lp-tap-pop{
    animation:lpV3TapPop .34s var(--lp-v3-ease) both !important;
  }
}

/* Reduced motion: keep static 3D but disable decorative continuous movement. */
@media (prefers-reduced-motion:reduce){
  .hero::after,
  :is(.primary,.primary-btn,.sticky-return),
  .balance-card{
    animation:none !important;
  }
  .lp-tap-pop{
    animation:none !important;
  }
}
/* END LUDOPANDA AAA INTERACTIVE 3D MOTION V3 */