/* Animações leves do painel e da loja (27/10/2026). Só enfeite: nada muda de lugar nem de valor.
   - Entrada: motion.enter(elemento) marca a página por ~1,6 s com .m-enter; só o que aparece nesse tempo anima
     (buscar/filtrar depois não pisca a lista de novo).
   - Celular: duração menor e sem efeitos que pesam (sem blur animado). Quem pede "reduzir movimento" no aparelho não vê nada. */
:root { --m-ease: cubic-bezier(.2, .8, .2, 1); --m-d: .42s; }
@media (max-width: 767px) { :root { --m-d: .3s; } }

@keyframes mRise  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes mPop   { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mSheet { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes mDraw  { 0% { stroke-dashoffset: 1; opacity: 0; } 6% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes mRing  { 0% { box-shadow: 0 0 0 0 rgb(244 63 94 / .55); } 100% { box-shadow: 0 0 0 9px rgb(244 63 94 / 0); } }

/* ---- Entrada da página: cartões, linhas e números sobem em cascata curta (até o 8º) ---- */
.m-enter :is(.stat-card, .pr-card, .adm-row, #low-stock-list > div, #sales-list .sv-day) { animation: mRise var(--m-d) var(--m-ease) both; }
.m-enter :is(.stat-card, .pr-card, .adm-row, #low-stock-list > div, #sales-list .sv-day):nth-child(2) { animation-delay: 45ms; }
.m-enter :is(.stat-card, .pr-card, .adm-row, #low-stock-list > div, #sales-list .sv-day):nth-child(3) { animation-delay: 90ms; }
.m-enter :is(.stat-card, .pr-card, .adm-row, #low-stock-list > div, #sales-list .sv-day):nth-child(4) { animation-delay: 135ms; }
.m-enter :is(.stat-card, .pr-card, .adm-row, #low-stock-list > div, #sales-list .sv-day):nth-child(5) { animation-delay: 180ms; }
.m-enter :is(.stat-card, .pr-card, .adm-row, #low-stock-list > div, #sales-list .sv-day):nth-child(6) { animation-delay: 225ms; }
.m-enter :is(.stat-card, .pr-card, .adm-row, #low-stock-list > div, #sales-list .sv-day):nth-child(7) { animation-delay: 270ms; }
.m-enter :is(.stat-card, .pr-card, .adm-row, #low-stock-list > div, #sales-list .sv-day):nth-child(n+8) { animation-delay: 315ms; }

/* ---- Gráfico de receita: a linha se desenha e a área aparece ---- */
#sales-chart .m-line { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.m-enter #sales-chart .m-line { animation: mDraw 1.1s var(--m-ease) .15s both; }
.m-enter #sales-chart .m-area { animation: mFade .9s ease .45s both; }
.m-enter #sales-chart .chart-point { animation: mFade .4s ease 1s both; }

/* ---- Janelas e menus que abrem ---- */
#notif-dropdown:not(.hidden) { animation: mPop .18s var(--m-ease); transform-origin: top right; }
#cmd-palette:not(.hidden) > div { animation: mPop .18s var(--m-ease); }
#admin-drawer:not(.hidden) #admin-drawer-panel { animation: mPop .2s var(--m-ease); }
#product-modal:not(.hidden) > div, #purchases-modal:not(.hidden) > div { animation: mSheet .3s var(--m-ease); }
@media (min-width: 768px) { #product-modal:not(.hidden) > div, #purchases-modal:not(.hidden) > div { animation: mPop .22s var(--m-ease); } }

/* ---- Toque: o botão afunda um pouco (celular e computador) ---- */
.pr-btn:active, .nav-item:active, .adm-chip:active, .admin-tab:active, .sv-copy:active, .tab:active,
#products-grid button:active, #filter-bar button:active { transform: scale(.97); }

/* ---- Aviso novo no sino: um anel que se apaga uma vez ---- */
#notif-badge:not(.hidden), #mobile-notif-badge:not(.hidden) { animation: mRing 1.2s ease-out 2; }

/* ---- Quem pede para reduzir movimento não vê nada disso (html.m-force só existe na demo, para mostrar mesmo assim) ---- */
@media (prefers-reduced-motion: reduce) {
    html:not(.m-force) .m-enter *, html:not(.m-force) #notif-dropdown, html:not(.m-force) #cmd-palette > div, html:not(.m-force) #admin-drawer-panel,
    html:not(.m-force) #product-modal > div, html:not(.m-force) #purchases-modal > div, html:not(.m-force) #notif-badge, html:not(.m-force) #mobile-notif-badge { animation: none !important; }
    html:not(.m-force) #sales-chart .m-line { stroke-dasharray: none; }
}
html.m-off .m-enter *, html.m-off #notif-dropdown, html.m-off #cmd-palette > div, html.m-off #admin-drawer-panel,
html.m-off #product-modal > div, html.m-off #purchases-modal > div { animation: none !important; }
html.m-off #sales-chart .m-line { stroke-dasharray: none; }