/* Login: animações (carregado só nas telas de autenticação) */
.art-inner > * { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.art-inner > :nth-child(2) { animation-delay: .08s; }
.art-inner > :nth-child(3) { animation-delay: .16s; }
.art-inner > :nth-child(4) { animation-delay: .26s; }
.art-inner > :nth-child(5) { animation-delay: .36s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.login-card { animation: rise .6s .1s cubic-bezier(.2,.7,.2,1) both; }

#rotator { display: inline-block; transition: opacity .35s, transform .35s; }
#rotator.is-out { opacity: 0; transform: translateY(-10px); }
#rotator::after { content: ''; display: inline-block; width: 3px; height: .85em; margin-left: 4px; vertical-align: -.05em; background: var(--brand-3-soft); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.mock { margin: 0 0 22px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 50px rgba(8, 6, 30, .35); overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 12px; color: #c9d0e4; }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; }
.mock-bar i:nth-child(1) { background: #ff6a5f; }
.mock-bar i:nth-child(2) { background: #ffbd2e; }
.mock-bar i:nth-child(3) { background: #28c840; }
.mock-bar span { margin-left: 8px; }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 14px 4px; }
.mock-kpis small { display: block; color: #aab3cf; font-size: 11px; }
.mock-kpis strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.mock-chart { display: block; width: 100%; height: 110px; padding: 6px 14px 12px; box-sizing: border-box; }
.mock-chart .bars rect { fill: rgba(255,255,255,.16); transform-box: fill-box; transform-origin: bottom; animation: grow .9s cubic-bezier(.2,.7,.2,1) both; }
.mock-chart .bars rect:nth-child(1) { animation-delay: .5s; }
.mock-chart .bars rect:nth-child(2) { animation-delay: .6s; }
.mock-chart .bars rect:nth-child(3) { animation-delay: .7s; }
.mock-chart .bars rect:nth-child(4) { animation-delay: .8s; }
.mock-chart .bars rect:nth-child(5) { animation-delay: .9s; }
.mock-chart .bars rect:nth-child(6) { animation-delay: 1s; }
.mock-chart .bars rect:nth-child(7) { animation-delay: 1.1s; }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.mock-chart .line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2s .8s ease-out forwards; }
.mock-chart .area { opacity: 0; animation: fade 1s 2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

.art-list li { animation: rise .6s calc(.9s + var(--i) * .12s) cubic-bezier(.2,.7,.2,1) both; }
.float { position: absolute; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--gradient); box-shadow: 0 12px 30px rgb(var(--brand-2-rgb) / .45); animation: float 6s ease-in-out infinite; }
/* Ficam na faixa livre à direita da coluna de texto (600px centralizada), longe do conteúdo */
.float { right: calc((100% - 600px) / 2 * var(--k, .5) - 24px); }
.float-1 { top: 8%; --k: .35; }
.float-2 { top: 27%; --k: .7; animation-delay: -2s; background: linear-gradient(135deg, #ff9a3c, #ff5f6d); }
.float-3 { top: 47%; --k: .4; animation-delay: -4s; background: linear-gradient(135deg, #2dc7a3, #1a9bd7); }
.float-4 { top: 66%; --k: .72; animation-delay: -1s; background: linear-gradient(135deg, #5b8cff, var(--brand-2)); }
.float-5 { top: 84%; --k: .38; animation-delay: -3s; background: linear-gradient(135deg, var(--brand-3-soft), #ff9a3c); }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-16px) rotate(4deg); } }
.art-orb-1 { animation: drift 14s ease-in-out infinite alternate; }
.art-orb-2 { animation: drift 18s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(60px, -50px) scale(1.15); } }

.btn.is-loading { opacity: .85; pointer-events: none; }
.btn.is-loading::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid rgba(255,255,255,.5); border-top-color: var(--card); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.login-card.is-shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

@media (max-width: 1600px) { .float { display: none; } }
@media (max-height: 900px) { .art-list small { display: none; } .art-list li { padding: 10px 14px; } .login-art { padding-block: 32px; } .login-art h2 { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* Telas largas: o texto do painel da esquerda fica centralizado, sem vazio à direita */
.login-art { justify-content: center; }
@media (min-width: 1800px) { .art-inner { max-width: 600px; } .login-art h2 { font-size: 44px; } }

/* Mockup: progresso de nível e conquista */
.mock-level { padding: 6px 14px 14px; }
.lv-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: #aab3cf; margin-bottom: 8px; }
.lv-head b { color: #fff; font-size: 13px; }
.lv-track { height: 10px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.lv-track i { display: block; height: 100%; width: 75%; border-radius: 99px; background: linear-gradient(90deg, var(--brand-1-soft), var(--brand-3-soft)); transform-origin: left; animation: lvfill 1.6s .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes lvfill { from { transform: scaleX(.12); } to { transform: scaleX(1); } }
.mock-toast { display: flex; align-items: center; gap: 12px; margin: 0 14px 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); animation: toastin .7s 2.4s cubic-bezier(.2,.9,.3,1.2) both; }
.mock-toast > span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #ff9a3c, #ff5f6d); flex: none; }
.mock-toast strong { display: block; font-size: 13px; }
.mock-toast small { color: #c9d0e4; font-size: 12px; }
@keyframes toastin { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lv-track i, .mock-toast { animation: none; } }

/* Sem a calha reservada da barra de rolagem: a tela de login cabe na janela e a faixa vazia à direita aparecia branca */
html { scrollbar-gutter: auto; }