/* =========================================================
   LUDOPANDA AAA WEB MOTION SYSTEM V1
   Mirrors the public LudoPanda motion language:
   controlled lift, sheen, glow, press response, icon movement.
   CSS-only. No functional JavaScript is changed.
   ========================================================= */

:root{
  --lp-motion-ease:cubic-bezier(.22,.8,.24,1);
  --lp-motion-spring:cubic-bezier(.16,1,.3,1);
  --lp-motion-fast:.18s;
  --lp-motion-normal:.25s;
  --lp-motion-slow:.58s;
}

/* ---------- PAGE ENTRANCE ---------- */

.hero,
.auth-card,
.panel,
.form-card,
.service-nav,
.info-strip,
.footer,
footer{
  animation:lpAaaEnterV1 .56s var(--lp-motion-ease) both;
}

.actions-grid > *,
.service-grid > *,
.usage-grid > *,
.card-grid > *,
.orders-list > *{
  animation:lpAaaEnterV1 .52s var(--lp-motion-ease) both;
}

.actions-grid > *:nth-child(2),
.service-grid > *:nth-child(2),
.usage-grid > *:nth-child(2),
.card-grid > *:nth-child(2),
.orders-list > *:nth-child(2){animation-delay:45ms}

.actions-grid > *:nth-child(3),
.service-grid > *:nth-child(3),
.card-grid > *:nth-child(3),
.orders-list > *:nth-child(3){animation-delay:90ms}

.actions-grid > *:nth-child(4),
.service-grid > *:nth-child(4),
.card-grid > *:nth-child(4),
.orders-list > *:nth-child(4){animation-delay:135ms}

@keyframes lpAaaEnterV1{
  from{opacity:0;filter:blur(3px);transform:translate3d(0,16px,0)}
  to{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}
}

/* ---------- BUTTONS ---------- */

:is(
  .primary,
  .primary-btn,
  .secondary,
  .secondary-btn,
  .ghost,
  .ghost-btn,
  .nav-btn,
  .back,
  .support-link,
  .choice-row button,
  .danger,
  .danger-actions button,
  .order-action,
  .back-page,
  .link-card a,
  .official-links a,
  .bottom-actions a,
  .bottom-actions button
){
  position:relative;
  isolation:isolate;
  transition:
    transform .20s var(--lp-motion-spring),
    box-shadow .22s ease,
    border-color .22s ease,
    filter .22s ease,
    background .22s ease,
    color .22s ease !important;
  will-change:transform;
}

/* Website-style controlled sheen on principal CTAs. */
:is(.primary,.primary-btn,.link-card a,.sticky-return){
  overflow:hidden;
}

:is(.primary,.primary-btn,.link-card a,.sticky-return)::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-90%;
  left:-44%;
  width:28%;
  height:280%;
  pointer-events:none;
  opacity:0;
  background:rgba(255,255,255,.24);
  transform:rotate(22deg);
}

@keyframes lpButtonSheenV1{
  from{left:-44%}
  to{left:126%}
}

@media (hover:hover) and (pointer:fine){
  :is(
    .primary,
    .primary-btn,
    .secondary,
    .secondary-btn,
    .ghost,
    .ghost-btn,
    .nav-btn,
    .back,
    .support-link,
    .choice-row button,
    .danger,
    .danger-actions button,
    .order-action,
    .back-page,
    .link-card a,
    .official-links a,
    .bottom-actions a,
    .bottom-actions button
  ):hover{
    transform:translateY(-2px);
    filter:brightness(1.055);
  }

  :is(.primary,.primary-btn,.link-card a,.sticky-return):hover{
    box-shadow:
      0 14px 30px rgba(0,0,0,.26),
      0 0 26px rgba(255,212,0,.10) !important;
  }

  :is(.primary,.primary-btn,.link-card a,.sticky-return):hover::before{
    opacity:1;
    animation:lpButtonSheenV1 .58s var(--lp-motion-ease);
  }

  :is(.secondary,.secondary-btn,.ghost,.ghost-btn,.back,.support-link,.back-page):hover{
    border-color:rgba(255,212,0,.30) !important;
    box-shadow:
      0 10px 24px rgba(0,0,0,.20),
      0 0 22px rgba(255,212,0,.055) !important;
  }
}

:is(
  .primary,
  .primary-btn,
  .secondary,
  .secondary-btn,
  .ghost,
  .ghost-btn,
  .nav-btn,
  .back,
  .support-link,
  .choice-row button,
  .danger,
  .danger-actions button,
  .order-action,
  .back-page,
  .link-card a,
  .official-links a,
  .bottom-actions a,
  .bottom-actions button
):active{
  transform:translateY(0) scale(.97) !important;
}

/* ---------- INTERACTIVE CARDS ---------- */

:is(
  .action-card,
  .service-card,
  .topic-card,
  .ticket-row,
  .order-card,
  .usage-card,
  .content-card,
  .faq-list details,
  .public-help details,
  .info-strip,
  .authority
){
  transition:
    transform .26s var(--lp-motion-spring),
    border-color .26s ease,
    box-shadow .26s ease,
    filter .26s ease,
    background .26s ease !important;
  will-change:transform;
}

@media (hover:hover) and (pointer:fine){
  :is(
    .action-card,
    .service-card,
    .topic-card,
    .ticket-row,
    .order-card,
    .usage-card,
    .content-card
  ):hover{
    transform:translateY(-6px);
    border-color:rgba(255,212,0,.29) !important;
    box-shadow:
      0 24px 58px rgba(0,0,0,.29),
      0 0 0 1px rgba(255,212,0,.05),
      0 0 34px rgba(255,212,0,.065) !important;
    filter:brightness(1.035);
  }

  :is(.faq-list details,.public-help details):hover{
    transform:translateY(-2px);
    border-color:rgba(255,212,0,.22) !important;
    background:#141414 !important;
  }

  :is(.info-strip,.authority):hover{
    transform:translateY(-2px);
    border-color:rgba(255,212,0,.19) !important;
  }
}

:is(.action-card,.service-card,.topic-card,.ticket-row):active{
  transform:translateY(0) scale(.985) !important;
}

/* ---------- ICON RESPONSE ---------- */

:is(
  .service-icon,
  .action-card .icon,
  .topic-icon,
  .panda-avatar,
  .shield,
  .auth-icon
){
  transform-origin:center;
  transition:
    transform .34s var(--lp-motion-spring),
    filter .34s ease,
    box-shadow .34s ease !important;
}

@media (hover:hover) and (pointer:fine){
  .service-card:hover .service-icon,
  .action-card:hover .icon,
  .topic-card:hover .topic-icon{
    transform:translate3d(0,-5px,0) scale(1.07) rotate(-3deg);
    filter:brightness(1.10) drop-shadow(0 10px 14px rgba(0,0,0,.28));
  }

  .service-card:hover strong,
  .action-card:hover strong,
  .topic-card:hover strong,
  .ticket-row:hover strong{
    transform:translateX(3px);
  }
}

:is(
  .service-card strong,
  .action-card strong,
  .topic-card strong,
  .ticket-row strong
){
  display:block;
  transition:transform .28s var(--lp-motion-spring);
}

/* ---------- PANDA BOT ---------- */

.pandabot-card{
  animation:lpPandaBotFloatV1 4.2s ease-in-out infinite;
  transition:
    transform .25s var(--lp-motion-spring),
    filter .25s ease,
    box-shadow .25s ease,
    border-color .25s ease !important;
}

@keyframes lpPandaBotFloatV1{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

@media (hover:hover) and (pointer:fine){
  .pandabot-card:hover{
    filter:brightness(1.07);
    border-color:rgba(255,212,0,.34) !important;
    box-shadow:
      0 22px 48px rgba(0,0,0,.38),
      0 0 32px rgba(255,212,0,.14) !important;
  }
}

/* ---------- PANDA PAY PREMIUM MOTION ---------- */

.balance-card{
  transition:
    transform .28s var(--lp-motion-spring),
    box-shadow .28s ease,
    filter .28s ease !important;
}

@media (hover:hover) and (pointer:fine){
  .balance-card:hover{
    transform:translateY(-4px) rotate(.35deg);
    filter:brightness(1.025);
    box-shadow:
      0 26px 58px rgba(0,0,0,.24),
      0 0 36px rgba(255,199,0,.12) !important;
  }
}

.nav-btn.active{
  animation:lpActiveTabV1 .30s var(--lp-motion-spring);
}

@keyframes lpActiveTabV1{
  0%{transform:scale(.96)}
  100%{transform:scale(1)}
}

/* ---------- ACCORDIONS ---------- */

.faq-list summary,
.public-help summary{
  transition:
    color .20s ease,
    background .20s ease,
    transform .20s var(--lp-motion-spring);
}

@media (hover:hover) and (pointer:fine){
  .faq-list summary:hover,
  .public-help summary:hover{
    color:#fff;
    transform:translateX(3px);
  }
}

/* ---------- MODALS / SHEETS ---------- */

.modal,
.modal-backdrop{
  animation:lpBackdropInV1 .18s ease both;
}

.modal-card,
.modal-backdrop > .modal{
  animation:lpModalInV1 .25s var(--lp-motion-spring) both;
}

@keyframes lpBackdropInV1{
  from{opacity:0}
  to{opacity:1}
}

@keyframes lpModalInV1{
  from{opacity:0;transform:translate3d(0,16px,0) scale(.985)}
  to{opacity:1;transform:none}
}

/* ---------- STATUS / BADGE MICRO-MOTION ---------- */

:is(.hero-badge,.status-pill,.pandabot-status,.status,.pill){
  transition:
    transform .20s var(--lp-motion-spring),
    filter .20s ease,
    border-color .20s ease !important;
}

@media (hover:hover) and (pointer:fine){
  :is(.hero-badge,.status-pill,.pandabot-status,.status,.pill):hover{
    transform:translateY(-1px);
    filter:brightness(1.08);
  }
}

/* ---------- TOP BAR / BRAND ---------- */

.brand-mark img,
.mark img{
  transition:
    transform .32s var(--lp-motion-spring),
    filter .32s ease !important;
}

@media (hover:hover) and (pointer:fine){
  .brand:hover :is(.brand-mark img,.mark img){
    transform:scale(1.06) rotate(-2deg);
    filter:brightness(1.05);
  }
}

/* ---------- TOUCH DEVICES ---------- */

@media (hover:none), (pointer:coarse){
  :is(
    .action-card,
    .service-card,
    .topic-card,
    .ticket-row,
    .order-card,
    .usage-card,
    .content-card,
    .balance-card
  ):hover{
    transform:none !important;
    filter:none !important;
  }

  .pandabot-card{
    animation-duration:5.2s;
  }
}

/* ---------- ACCESSIBILITY ---------- */

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }

  :is(
    .hero,
    .auth-card,
    .panel,
    .form-card,
    .service-nav,
    .info-strip,
    .footer,
    footer,
    .actions-grid > *,
    .service-grid > *,
    .usage-grid > *,
    .card-grid > *,
    .orders-list > *
  ){
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
  }
}
/* END LUDOPANDA AAA WEB MOTION SYSTEM V1 */