/* ETAPA 11 — Microanimações e refinamentos visuais
   Camada compartilhada entre Browser e APP. */
:root{
  --pd-motion-fast:140ms;
  --pd-motion-base:220ms;
  --pd-motion-slow:360ms;
  --pd-motion-ease:cubic-bezier(.22,.8,.24,1);
}

html{scroll-behavior:smooth}
body.pd-motion-ready .screen.active,
body.pd-motion-ready [id^="screen"].active{
  animation:pd-screen-enter var(--pd-motion-slow) var(--pd-motion-ease) both;
}
@keyframes pd-screen-enter{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

/* Botões e controles */
button,.btn,.pd-btn,[role="button"],.menu-item,.nav-item,.bottom-nav button{
  transition:transform var(--pd-motion-fast) var(--pd-motion-ease),box-shadow var(--pd-motion-base) ease,background-color var(--pd-motion-base) ease,border-color var(--pd-motion-base) ease,opacity var(--pd-motion-base) ease;
}
button:not(:disabled):active,.btn:not(:disabled):active,.pd-btn:not(:disabled):active,[role="button"]:active{
  transform:scale(.975);
}
@media(hover:hover){
  button:not(:disabled):hover,.btn:not(:disabled):hover,.pd-btn:not(:disabled):hover{
    transform:translateY(-1px);
  }
}

/* Cards e blocos financeiros */
.card,.dashboard-card,.summary-card,.report-card,.goal-card,.calendar-agenda-item,
.pd-game-medal,.pd-game-next,.pd-card,.menu-card,.list-item,.transaction-item{
  transition:transform var(--pd-motion-base) var(--pd-motion-ease),box-shadow var(--pd-motion-base) ease,border-color var(--pd-motion-base) ease,opacity var(--pd-motion-base) ease;
}
@media(hover:hover){
  .card:hover,.dashboard-card:hover,.summary-card:hover,.report-card:hover,.goal-card:hover,
  .calendar-agenda-item:hover,.pd-game-medal:hover,.pd-game-next:hover,.pd-card:hover{
    transform:translateY(-2px);
  }
}

/* Barras de progresso */
.progress span,.progress-bar span,.goal-progress span,.mission-bar span,.pd-game-progress span,
[class*="progress"] > span{
  transition:width 620ms var(--pd-motion-ease),transform var(--pd-motion-base) ease;
  transform-origin:left center;
}

/* Valores atualizados */
.pd-value-updated{animation:pd-value-pulse 520ms var(--pd-motion-ease)}
@keyframes pd-value-pulse{
  0%{transform:scale(1)}
  45%{transform:scale(1.045)}
  100%{transform:scale(1)}
}

/* Entrada progressiva de listas */
.pd-stagger-enter{animation:pd-item-enter 330ms var(--pd-motion-ease) both}
@keyframes pd-item-enter{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}

/* Modais e alertas já existentes */
.modal.active,.modal.show,.app-modal-overlay.show,.app-modal-overlay.active,
.calendar-modal.active,.calendar-modal.show{
  animation:pd-overlay-in 180ms ease both;
}
.modal.active > *,.modal.show > *,.app-modal-overlay.show .app-modal-card,
.app-modal-overlay.active .app-modal-card,.calendar-modal.active .calendar-modal-card,
.calendar-modal.show .calendar-modal-card{
  animation:pd-dialog-in 240ms var(--pd-motion-ease) both;
}
@keyframes pd-overlay-in{from{opacity:0}to{opacity:1}}
@keyframes pd-dialog-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* Feedback visual de sincronização */
[class*="sync"].online,[class*="sync"].success,.sync-status.is-online{
  animation:pd-sync-ok 440ms var(--pd-motion-ease);
}
@keyframes pd-sync-ok{0%{transform:scale(.96);opacity:.7}60%{transform:scale(1.035)}100%{transform:none;opacity:1}}

/* Gamificação */
.pd-game-level-icon,.rank-medal{animation:pd-soft-float 3.6s ease-in-out infinite}
@keyframes pd-soft-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.pd-game-medal:not(.is-locked) > span{animation:pd-medal-shine 2.8s ease-in-out infinite}
@keyframes pd-medal-shine{0%,70%,100%{transform:rotate(0) scale(1)}80%{transform:rotate(-5deg) scale(1.06)}90%{transform:rotate(5deg) scale(1.06)}}

/* Foco acessível */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid rgba(37,99,235,.28);
  outline-offset:2px;
}

/* Evita animações em dispositivos/configurações sensíveis */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}