/* =========================================================
   ANIMAÇÕES
   Entrada do login, troca de abas e resposta às ações.
   Tudo é desligado quando o aparelho pede "reduzir movimento"
   (regra global em theme.css).
========================================================= */
@keyframes ch-rise{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }
@keyframes ch-panel{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
@keyframes ch-fade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes ch-pop{ from{ opacity: 0; transform: translateY(-4px) scale(.98); } to{ opacity: 1; transform: none; } }
@keyframes ch-sheet{ from{ opacity: 0; transform: translateY(28px); } to{ opacity: 1; transform: none; } }
@keyframes ch-badge{ 0%{ transform: scale(.6); } 70%{ transform: scale(1.15); } 100%{ transform: scale(1); } }
@keyframes ch-shake{ 0%, 100%{ transform: none; } 25%{ transform: translateX(-6px); } 50%{ transform: translateX(5px); } 75%{ transform: translateX(-3px); } }
@keyframes ch-check{ 0%{ transform: scale(0); } 70%{ transform: scale(1.15); } 100%{ transform: scale(1); } }

/* Login: marca e formulário entram em sequência */
.login-brand-inner > *{ animation: ch-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.login-brand-inner > :nth-child(2){ animation-delay: .08s; }
.login-brand-inner > :nth-child(3){ animation-delay: .16s; }
.login-card{ animation: ch-rise .55s .1s cubic-bezier(.2, .7, .2, 1) both; }
.login-error:not(:empty){ animation: ch-shake .4s ease; }

/* Troca de abas: o conteúdo sobe suavemente, em cascata curta */
.tab-panel.active > *{ animation: ch-panel .42s cubic-bezier(.2, .7, .2, 1) both; }
.tab-panel.active > :nth-child(2){ animation-delay: .04s; }
.tab-panel.active > :nth-child(3){ animation-delay: .08s; }
.tab-panel.active > :nth-child(4){ animation-delay: .12s; }
.tab-panel.active > :nth-child(5){ animation-delay: .16s; }
.tab-panel.active > :nth-child(n+6){ animation-delay: .2s; }

/* Blocos que abrem e fecham */
details[open] > :not(summary){ animation: ch-panel .28s ease both; }
.publication.expanded .pub-body{ animation: ch-panel .3s ease both; }

/* Menus e janelas */
.dropdown, .notif-panel.show{ animation: ch-pop .16s ease-out both; transform-origin: top right; }
.modal-overlay.show{ animation: ch-fade .2s ease both; }
.modal-overlay.show .modal-box{ animation: ch-sheet .32s cubic-bezier(.2, .8, .2, 1) both; }

/* Contadores e confirmação */
.notif-badge, .tab-count, .ab-count{ animation: ch-badge .35s ease both; }
.report-sent-icon{ animation: ch-check .45s cubic-bezier(.2, .8, .2, 1) both; }

/* Notificações */
@keyframes ch-ring{
  0%, 100%{ transform: rotate(0); }
  15%{ transform: rotate(16deg); } 30%{ transform: rotate(-14deg); }
  45%{ transform: rotate(10deg); } 60%{ transform: rotate(-6deg); } 75%{ transform: rotate(3deg); }
}
.notif-bell.ring > svg{ animation: ch-ring .9s ease; transform-origin: 50% 10%; }
.notif-panel.show .notif-item{ animation: ch-rise .35s cubic-bezier(.2, .7, .2, 1) both; }
.notif-panel.show .notif-item:nth-of-type(2){ animation-delay: .04s; }
.notif-panel.show .notif-item:nth-of-type(3){ animation-delay: .08s; }
.notif-panel.show .notif-item:nth-of-type(n+4){ animation-delay: .12s; }
.notif-dot{ animation: ch-pulse 2s ease-in-out infinite; }
@keyframes ch-pulse{ 0%, 100%{ box-shadow: 0 0 0 3px rgba(23, 134, 252, .2); } 50%{ box-shadow: 0 0 0 6px rgba(23, 134, 252, .08); } }
.dropdown-item{ animation: ch-fade .2s ease both; }