/* =====================================================================
   ANIMAÇÕES SUAVES — valem para o app inteiro (Clássico e Aprova).
   - Tudo dentro de :where(), com especificidade zero: as regras de cada
     tema (ex.: o "mola" do Aprova) continuam valendo por cima destas.
   - Quem pediu "reduzir movimento" no sistema não vê nada disso
     (@media prefers-reduced-motion: no-preference).
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  :root { --anim-suave: cubic-bezier(.22, 1, .36, 1); --anim-mola: cubic-bezier(.34, 1.56, .64, 1); }

  /* ---------- 1. Transições de hover/foco em tudo que é clicável ---------- */
  :where(.btn, .icbtn, .side-btn, .chip, .badge.click, .tabs .tb, .nav button, .scard.click, .stcount button, .grades button, .schip, .colors span) {
    transition: background-color .22s var(--anim-suave), border-color .22s var(--anim-suave), color .2s var(--anim-suave),
      box-shadow .25s var(--anim-suave), transform .25s var(--anim-suave), opacity .2s, filter .2s;
  }
  :where(.btn, .side-btn, .stcount button, .grades button):where(:hover):where(:not(:disabled)) { transform: translateY(-1px); }
  :where(.btn, .icbtn, .side-btn, .chip, .tabs .tb, .stcount button, .grades button, .schip):where(:active):where(:not(:disabled)) { transform: scale(.96); transition-duration: .08s; }
  :where(.icbtn):where(:hover) { transform: scale(1.08); }
  :where(.nav button):where(:hover) { transform: translateX(2px); }

  /* cartões, linhas e células: borda/fundo mudam devagar; os clicáveis sobem um pouco */
  :where(.card, .top, .wcol, .task, .pc, .pin div, .sm2box, .countdown .u, .forget .col, .note, .mat, .fc-face, .banner, .scard) {
    transition: border-color .25s var(--anim-suave), background-color .25s var(--anim-suave), box-shadow .3s var(--anim-suave), transform .3s var(--anim-suave), opacity .3s;
  }
  :where(.kpi.click, .note, .scard.click, .pc):where(:hover) { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .55); }
  :where(.li.click, .tbl tr.click td, .rep-tbl tbody tr td, .bul, .band, .mrow, .ins, .forget .col .it, .sess, .fc-row, .bk-pt, .day-hd) {
    transition: background-color .2s var(--anim-suave), color .2s var(--anim-suave);
  }
  :where(.cal .d) { transition: border-color .2s var(--anim-suave), background-color .2s var(--anim-suave), transform .25s var(--anim-mola), box-shadow .25s; }
  :where(.cal .d):where(:hover) { transform: translateY(-2px); }
  :where(.task):where(:hover) { transform: translateX(2px); }
  :where(.top):where(:hover) { transform: translateY(-1px); }

  /* campos: foco acende devagar */
  :where(input, select, textarea) { transition: border-color .2s var(--anim-suave), box-shadow .25s var(--anim-suave), background-color .2s; }
  :where(input[type=checkbox]) { transition: transform .2s var(--anim-mola); }
  :where(input[type=checkbox]):where(:active) { transform: scale(.85); }
  :where(input[type=checkbox]):where(:checked) { animation: anim-check .35s var(--anim-mola); }
  @keyframes anim-check { 50% { transform: scale(1.25); } }

  /* links e ícones de gráfico */
  :where(a) { transition: color .2s, opacity .2s; }
  :where(.chart rect, .chart circle, .chart path) { transition: opacity .2s, filter .2s; }
  :where(.chart rect[data-tip]):where(:hover), :where(.chart circle[data-tip]):where(:hover) { filter: brightness(1.18); }

  /* ---------- 2. Entrada das telas (só ao trocar de tela, não a cada atualização) ---------- */
  .pg-in > * { animation: anim-entra .42s var(--anim-suave) both; }
  .pg-in > :nth-child(2) { animation-delay: .04s; }
  .pg-in > :nth-child(3) { animation-delay: .08s; }
  .pg-in > :nth-child(4) { animation-delay: .12s; }
  .pg-in > :nth-child(5) { animation-delay: .16s; }
  .pg-in > :nth-child(n+6) { animation-delay: .2s; }
  /* cartões em cascata (dashboard, grades) */
  .pg-in :is(.dash > .dw, .grid > *, .rk > *, .week > *, .gm-badges > *, .mat-grid > *) { animation: anim-entra .45s var(--anim-suave) both; }
  .pg-in :is(.dash > .dw, .grid > *, .rk > *, .week > *, .gm-badges > *, .mat-grid > *):nth-child(2) { animation-delay: .05s; }
  .pg-in :is(.dash > .dw, .grid > *, .rk > *, .week > *, .gm-badges > *, .mat-grid > *):nth-child(3) { animation-delay: .1s; }
  .pg-in :is(.dash > .dw, .grid > *, .rk > *, .week > *, .gm-badges > *, .mat-grid > *):nth-child(4) { animation-delay: .15s; }
  .pg-in :is(.dash > .dw, .grid > *, .rk > *, .week > *, .gm-badges > *, .mat-grid > *):nth-child(5) { animation-delay: .2s; }
  .pg-in :is(.dash > .dw, .grid > *, .rk > *, .week > *, .gm-badges > *, .mat-grid > *):nth-child(n+6) { animation-delay: .25s; }
  /* barras de progresso crescem da esquerda ao abrir a tela */
  .pg-in :is(.bar, .meter, .bar2, .gm-barra) > i { animation: anim-barra .9s var(--anim-suave) .15s both; transform-origin: left center; }
  @keyframes anim-entra { from { opacity: 0; transform: translateY(10px); } }
  @keyframes anim-barra { from { transform: scaleX(0); } }

  /* ---------- 3. Janelas, avisos e dica ---------- */
  :where(.modal-bg) { animation: anim-fundo .2s ease both; }
  :where(.modal-bg) > :where(.modal) { animation: anim-modal .32s var(--anim-mola) both; }
  :where(.modal-bg.sai) { animation: anim-fundo-sai .18s ease forwards; pointer-events: none; }
  :where(.modal-bg.sai) > :where(.modal) { animation: anim-modal-sai .18s ease forwards; }
  @keyframes anim-fundo { from { opacity: 0; } }
  @keyframes anim-fundo-sai { to { opacity: 0; } }
  @keyframes anim-modal { from { opacity: 0; transform: translateY(14px) scale(.96); } }
  @keyframes anim-modal-sai { to { opacity: 0; transform: translateY(8px) scale(.97); } }
  #toasts :where(.toast) { animation: anim-toast .35s var(--anim-mola) both; }
  #toasts :where(.toast.sai) { animation: anim-toast-sai .25s ease forwards; }
  @keyframes anim-toast { from { opacity: 0; transform: translateX(24px) scale(.96); } }
  @keyframes anim-toast-sai { to { opacity: 0; transform: translateX(16px); } }
  :where(#tip) { transition: opacity .15s ease, transform .15s var(--anim-suave); }

  /* menu lateral do celular: o fundo escuro também aparece suave */
  :where(.side-scrim) { transition: opacity .22s ease; }
  :where(details) > :where(summary) { transition: color .2s; }
  :where(details[open]) > :where(:not(summary)) { animation: anim-entra .3s var(--anim-suave) both; }
}