/* Animacoes globais: brilho animado colorido, page-transition, micro-interacoes.
Importado por index.css apos legacy.css. */
/* =====================================================
Brilho animado colorido (halo only)
----
Halo difuso rotacionando atras do elemento. Sem borda visivel,
so a luz vazando. Cores: azul -> teal -> verde (e volta) — a mesma
dupla azul/teal da marca, com o verde de sucesso no meio do giro.
Uso: ...
===================================================== */
@property --glow-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
@keyframes glow-spin {
to { --glow-angle: 360deg; }
}
.glow-animated {
position: relative;
isolation: isolate;
}
/* halo difuso atras do elemento, com blur */
.glow-animated::after {
content: "";
position: absolute;
inset: -8px;
z-index: -1;
border-radius: inherit;
background: conic-gradient(
from var(--glow-angle, 0deg),
var(--blue-500) 0deg,
var(--blue-500) 60deg,
var(--teal-500) 120deg,
var(--teal-500) 180deg,
var(--success) 240deg,
var(--success) 300deg,
var(--blue-500) 360deg
);
filter: blur(10px);
opacity: 0.55;
animation: glow-spin 8s linear infinite;
}
/* variante mais discreta */
.glow-animated.subtle::after {
inset: -4px;
filter: blur(14px);
opacity: 0.35;
}
/* =====================================================
Ambient glow — luz VIAJANDO na borda da area de conteudo
USADO SÓ PELA TELA DE LOGIN hoje (static/js/login.js): borda azul
correndo por padrão, verde ao entrar, vermelha em usuário/senha errados.
Controlado via classes no (.glow-running/.glow-success/.glow-error)
+ a div .ambient-glow que login.js injeta.
ANTES esse mesmo mecanismo também cobria TODO o reagindo a
qualquer tarefa em background rodando no sistema (static/js/glow.js
antigo) - isso foi substituído pelo glow ESCOPADO POR ELEMENTO (ver
components/glow-el.css + window.glowEl em common.js): cada card/linha/
tabela agora liga o próprio glow, só no elemento que está rodando/
concluiu/deu erro, em vez da tela toda. O glow.js atual não usa mais
nada disto - só a tela de login ainda usa.
===================================================== */
.ambient-glow {
position: absolute;
/* cobre exatamente a area de conteudo (.main) — a sidebar fica de fora.
ANTES tinha offsets negativos (top:-24px etc) que jogavam a luz pra
FORA do .main; como o .main tem overflow:hidden, ela era recortada
inteira e nunca aparecia. */
inset: 0;
pointer-events: none;
/* acima do modal de detalhe da tarefa (z-index 60), senao a luz fica
escondida atras do modal de logs quando ele esta aberto */
z-index: 90;
opacity: 0;
transition: opacity 0.4s ease;
}
/* Duas camadas:
::before = a LINHA — recortada numa moldura fina (so a borda).
::after = o BRILHO em degrade — entra da borda pro centro (box-shadow
inset), mais forte nos cantos. Sem mascara, senao vira so um fio. */
.ambient-glow::before,
.ambient-glow::after {
content: "";
position: absolute;
inset: 0;
}
/* a linha nitida */
.ambient-glow::before {
padding: 3px;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
}
/* o brilho em degrade — fica ATRAS da linha (z-index:-1) pra ela seguir
nitida. A cor vem de currentColor, definida por estado. Esta camada PULSA. */
.ambient-glow::after {
z-index: 1;
box-shadow: inset 0 0 95px currentColor;
opacity: 0.8;
}
body.glow-running .ambient-glow,
body.glow-success .ambient-glow,
body.glow-error .ambient-glow { opacity: 1; }
/* Dois movimentos sobrepostos na mesma borda:
::before -> a linha, com um realce claro que CORRE ao redor (glow-spin)
::after -> o degrade, que PULSA de intensidade (glow-pulse) */
/* ---- RUNNING: azul, loop continuo ---- */
body.glow-running .ambient-glow::before {
background: conic-gradient(from var(--glow-angle, 0deg),
var(--blue-500) 0deg,
var(--blue-500) 200deg,
var(--blue-300) 300deg,
var(--blue-50) 340deg,
var(--blue-500) 360deg);
animation: glow-spin 3.2s linear infinite;
}
body.glow-running .ambient-glow::after {
color: var(--blue-500);
animation: glow-pulse 2s ease-in-out infinite;
}
/* ---- SUCCESS: verde, acelera e desaparece ---- */
body.glow-success .ambient-glow { animation: glow-vanish 3s ease-out forwards; }
body.glow-success .ambient-glow::before {
background: conic-gradient(from var(--glow-angle, 0deg),
var(--success) 0deg,
var(--success) 200deg,
#86EFAC 300deg,
#ECFDF5 340deg,
var(--success) 360deg);
animation: glow-spin 1.1s linear infinite;
}
body.glow-success .ambient-glow::after {
color: var(--success);
animation: glow-pulse 1.3s ease-in-out infinite;
}
/* ---- ERROR: vermelho, acelera e desaparece ---- */
body.glow-error .ambient-glow { animation: glow-vanish 3.6s ease-out forwards; }
body.glow-error .ambient-glow::before {
background: conic-gradient(from var(--glow-angle, 0deg),
var(--danger) 0deg,
var(--danger) 200deg,
#FCA5AF 300deg,
#FEF2F3 340deg,
var(--danger) 360deg);
animation: glow-spin 1.3s linear infinite;
}
body.glow-error .ambient-glow::after {
color: var(--danger);
animation: glow-pulse 1.4s ease-in-out infinite;
}
/* =====================================================
glow-pulse / glow-vanish — keyframes compartilhados entre o ambient-glow
do login (acima) e o glow ESCOPADO POR ELEMENTO (ver components/glow-el.css
+ window.glowEl em common.js), usado em todo o resto do painel.
===================================================== */
/* o degrade respira: brilho sobe e desce */
@keyframes glow-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.85; }
}
@keyframes glow-vanish {
0%, 55% { opacity: 1; }
100% { opacity: 0; }
}
/* =====================================================
Page transition: fade + slide sutil ao carregar
----
Aplica no de cada pagina. Sensacao de SPA sem ser SPA.
===================================================== */
@keyframes page-enter {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
body > main,
body .main {
animation: page-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* =====================================================
Micro-interacoes: refinamentos em panels e KPIs
===================================================== */
.panel {
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
/* leve lift no hover em panels da row-3 (cards menores, mais interativos) */
.row-3 > .panel:hover {
border-color: var(--border-strong);
box-shadow: 0 4px 24px -10px rgba(47, 107, 255, 0.18); /* --blue-500 */
}
.kpi {
transition: border-color 0.2s ease, background 0.2s ease;
}
.qa-row,
.qa-block {
transition: background 0.18s ease, border-color 0.18s ease;
}
/* focus-ring acessivel para inputs e botoes (sem virar feio) */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
outline: none;
box-shadow: var(--ring);
}