/* ════════════════════════════════════════════════════════════════════
BRAPZ_MOTION.CSS — Camada de movimento da marca · v1.0
Brapz Gestão · Big Massas
FILOSOFIA: aditiva e inquebrável.
· Tudo prefixado .brz- (zero conflito com CSS existente)
· Só anima transform/opacity (GPU — leve no iPhone)
· Nada acontece sem (o JS liga; se o JS
falhar ou o usuário pedir menos movimento, o site fica como hoje)
· Funciona nos DOIS temas (escuro e claro) — cores via rgba da marca
A "cara" do movimento Brapz: ease-massa — começa decidido e assenta
macio, como massa caindo na bancada. Uma curva só, no site inteiro.
════════════════════════════════════════════════════════════════════ */
:root{
--brz-laranja: #F29715;
--brz-laranja-claro: #F4B037;
--brz-laranja-quente: #FF8A2A;
--brz-ease: cubic-bezier(.22, 1, .36, 1); /* ease-massa */
--brz-ease-squish: cubic-bezier(.34, 1.56, .64, 1); /* botão "fofinho" */
--brz-t-rapido: .18s;
--brz-t-base: .45s;
--brz-t-lento: .8s;
}
/* ────────────────────────────────────────────────────────────────
0) KILL-SWITCHES — acessibilidade primeiro
──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
.brz-ready *, .brz-ready *::before, .brz-ready *::after{
animation-duration: .001s !important;
animation-iteration-count: 1 !important;
transition-duration: .001s !important;
}
}
/* ────────────────────────────────────────────────────────────────
1) ENTRADA DE PÁGINA — um respiro, uma vez
──────────────────────────────────────────────────────────────── */
@keyframes brzPageIn{
from{ opacity: 0; }
to { opacity: 1; }
}
.brz-ready body{ animation: brzPageIn var(--brz-t-lento) var(--brz-ease) both; }
/* ────────────────────────────────────────────────────────────────
2) REVEAL ESCALONADO — cards entram em cascata ao aparecer
(o JS marca .brz-io nos alvos e troca pra .brz-in quando visíveis)
──────────────────────────────────────────────────────────────── */
.brz-ready .brz-io{
opacity: 0;
transform: translateY(14px);
transition: opacity var(--brz-t-base) var(--brz-ease),
transform var(--brz-t-base) var(--brz-ease);
transition-delay: var(--brz-d, 0s);
}
.brz-ready .brz-io.brz-in{ opacity: 1; transform: none; }
/* ────────────────────────────────────────────────────────────────
3) TOQUE & HOVER — mobile primeiro
──────────────────────────────────────────────────────────────── */
.brz-ready button, .brz-ready .btn, .brz-ready a.btn,
.brz-ready input[type=submit], .brz-ready .btn-primary, .brz-ready .btn-additem{
-webkit-tap-highlight-color: transparent;
transition: transform var(--brz-t-rapido) var(--brz-ease-squish),
box-shadow var(--brz-t-rapido) ease,
filter var(--brz-t-rapido) ease;
}
.brz-ready .brz-press{ transform: scale(.965); }
/* lift só onde existe mouse de verdade (não “gruda” no touch) */
@media (hover: hover) and (pointer: fine){
.brz-ready .brz-lift{ transition: transform var(--brz-t-rapido) var(--brz-ease); }
.brz-ready .brz-lift:hover{ transform: translateY(-2px); }
}
/* foco de inputs com o calor da marca — funciona em tema claro e escuro */
.brz-ready input:focus-visible,
.brz-ready select:focus-visible,
.brz-ready textarea:focus-visible{
outline: none !important;
box-shadow: 0 0 0 3px rgba(242,151,21,.28), 0 0 14px rgba(242,151,21,.18) !important;
border-color: rgba(242,151,21,.65) !important;
transition: box-shadow .2s ease, border-color .2s ease;
}
/* ────────────────────────────────────────────────────────────────
4) ASSINATURA #1 — SWEEP DA MARCA
Um brilho diagonal cruza o card UMA vez quando ele entra.
──────────────────────────────────────────────────────────────── */
@keyframes brzSweep{
from{ transform: translateX(-130%) skewX(-18deg); }
to { transform: translateX(230%) skewX(-18deg); }
}
/* DESATIVADO como automático: páginas usam ::before/::after próprios nos
cards (painel: widgets/hero/sidebar) e o sweep os sobrescrevia, além de
forçar position:relative+overflow:hidden — clipando filhos absolutos.
Ficou opt-in: só em elemento dedicado . */
.brz-ready .brz-sweep-el{
position:absolute; inset:0 auto 0 0; width:45%;
background: linear-gradient(105deg, transparent, rgba(244,176,55,.10), transparent);
animation: brzSweep .9s var(--brz-ease) .15s 1 both;
pointer-events: none;
}
/* ────────────────────────────────────────────────────────────────
5) ASSINATURA #2 — BRASA DE FORNO
Linha viva sob títulos: gradiente laranja que respira devagar,
como brasa no forno a lenha. Use:
ou adicione a classe a um título de seção.
──────────────────────────────────────────────────────────────── */
@keyframes brzEmber{
0%,100%{ background-position: 0% 50%; opacity:.85; }
50% { background-position: 100% 50%; opacity:1; }
}
.brz-ember{ position: relative; }
.brz-ember::after{
content:""; position:absolute; left:0; right:auto; bottom:-7px;
width: 64px; height: 3px; border-radius: 3px;
background: linear-gradient(90deg, #B35309, var(--brz-laranja), var(--brz-laranja-quente), var(--brz-laranja-claro), var(--brz-laranja));
background-size: 300% 100%;
animation: brzEmber 5s ease-in-out infinite;
}
/* ────────────────────────────────────────────────────────────────
6) ASSINATURA #3 — LOADER PIZZA 🍕 (CSS puro, sem imagem)
A pizza "assa": as fatias preenchem em volta, com borda (crust).
Use via JS: brapzLoader(true) / brapzLoader(false)
──────────────────────────────────────────────────────────────── */
@keyframes brzPizzaGira{ to{ transform: rotate(360deg); } }
@keyframes brzPizzaAssa{
0% { --brz-fatia: 0deg; }
100%{ --brz-fatia: 360deg; }
}
@property --brz-fatia{ syntax:""; inherits:false; initial-value:0deg; }
.brz-pizza{
width: 56px; height: 56px; border-radius: 50%;
/* crust + queijo + fatias preenchendo */
border: 5px solid #C77B2B;
background:
radial-gradient(circle at 34% 36%, #b3403a 0 4px, transparent 5px),
radial-gradient(circle at 66% 40%, #b3403a 0 4px, transparent 5px),
radial-gradient(circle at 50% 66%, #b3403a 0 4px, transparent 5px),
conic-gradient(var(--brz-laranja-claro) var(--brz-fatia), rgba(244,176,55,.16) 0);
animation: brzPizzaAssa 1.15s linear infinite, brzPizzaGira 7s linear infinite;
box-shadow: 0 0 22px rgba(242,151,21,.35);
}
/* fallback pra navegador sem @property: gira em vez de assar */
@supports not (background: conic-gradient(red 0deg, blue 0)){
.brz-pizza{ background: var(--brz-laranja-claro); animation: brzPizzaGira 1s linear infinite; }
}
.brz-loader-overlay{
position: fixed; inset: 0; z-index: 2147483000;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
background: rgba(4,5,8,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.brz-loader-overlay.brz-on{ opacity: 1; pointer-events: auto; }
.brz-loader-overlay small{
color: #F4B037; font: 600 12px/1 'Sora', system-ui, sans-serif;
letter-spacing: .14em; text-transform: uppercase;
}
/* ────────────────────────────────────────────────────────────────
7) BARRA DE NAVEGAÇÃO — laranja fino no topo ao trocar de página
──────────────────────────────────────────────────────────────── */
@keyframes brzNavBar{
0% { transform: scaleX(0); }
60% { transform: scaleX(.72); }
100%{ transform: scaleX(.92); }
}
.brz-navbar{
position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; z-index: 2147483001;
background: linear-gradient(90deg, var(--brz-laranja), var(--brz-laranja-claro), var(--brz-laranja-quente));
transform-origin: left; transform: scaleX(0);
box-shadow: 0 0 12px rgba(242,151,21,.55);
}
.brz-navbar.brz-on{ animation: brzNavBar 1.6s var(--brz-ease) both; }
/* ────────────────────────────────────────────────────────────────
8) SKELETON unificado (carregamentos AJAX)
──────────────────────────────────────────────────────────────── */
@keyframes brzShimmer{ to{ background-position: -200% 0; } }
.brz-skeleton{
border-radius: 8px; color: transparent !important; pointer-events: none;
background: linear-gradient(100deg, rgba(150,150,160,.10) 40%, rgba(244,176,55,.16) 50%, rgba(150,150,160,.10) 60%);
background-size: 200% 100%;
animation: brzShimmer 1.3s linear infinite;
}
/* ────────────────────────────────────────────────────────────────
9) NÚMEROS QUE SOBEM — o JS faz a contagem; aqui só o brilho final
──────────────────────────────────────────────────────────────── */
@keyframes brzMoneyPop{
0%{ transform: scale(1); } 55%{ transform: scale(1.035); } 100%{ transform: scale(1); }
}
.brz-money-done{ animation: brzMoneyPop .35s var(--brz-ease-squish) 1; }
/* ────────────────────────────────────────────────────────────────
10) TOAST da marca (window.brapzToast)
──────────────────────────────────────────────────────────────── */
@keyframes brzToastIn{
from{ opacity:0; transform: translateY(16px) scale(.96); }
to { opacity:1; transform: none; }
}
.brz-toast{
position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%); z-index: 2147483002;
max-width: min(92vw, 440px);
background: rgba(13,15,20,.94); color: #f0f2f8;
border: 1px solid rgba(242,151,21,.45); border-left: 4px solid var(--brz-laranja);
border-radius: 12px; padding: 12px 18px;
font: 500 13.5px/1.45 'Sora', system-ui, sans-serif;
box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 24px rgba(242,151,21,.12);
animation: brzToastIn .35s var(--brz-ease) both;
}
.brz-toast.brz-err{ border-color: rgba(239,68,68,.55); border-left-color: #ef4444; }
.brz-toast.brz-out{ opacity: 0; transform: translateX(-50%) translateY(10px); transition: all .3s ease; }
/* ════════════════════════════════════════════════════════════════════
MODO BRASA — v2 · impacto visual que se vê na hora
A alma da Brapz: forno a lenha. Brasas, calor e ouro.
Tudo continua aditivo: overlays com pointer-events:none, nada de
layout tocado. Itens ambiente só no tema escuro (html.brz-dark).
════════════════════════════════════════════════════════════════════ */
/* ── 11) LINHA DE FOGO — topo de TODAS as páginas, sempre viva ──
É a identidade instantânea: você bate o olho e sabe que é Brapz. */
@keyframes brzFogo{
0%,100%{ background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.brz-emberline{
position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; z-index: 2147482998;
background: linear-gradient(90deg,
#7a3007, #C2410C, var(--brz-laranja), var(--brz-laranja-quente),
var(--brz-laranja-claro), #FFD27A, var(--brz-laranja-quente),
var(--brz-laranja), #C2410C, #7a3007);
background-size: 240% 100%;
animation: brzFogo 9s ease-in-out infinite;
box-shadow: 0 1px 10px rgba(242,151,21,.45);
pointer-events: none;
}
/* ── 12) CALOR AMBIENTE + BRASAS SUBINDO (tema escuro) ──
Overlay fixo em blend "screen": soma luz quente sobre a interface
sem esconder nada; cliques atravessam. */
@keyframes brzCalor{
0%,100%{ transform: translate3d(-4%, 2%, 0) scale(1); }
50% { transform: translate3d(4%, -2%, 0) scale(1.06); }
}
.brz-aurora{
position: fixed; inset: -12%; z-index: 2147482996;
pointer-events: none; mix-blend-mode: screen;
background:
radial-gradient(46% 34% at 18% 0%, rgba(242,151,21,.16), transparent 70%),
radial-gradient(40% 30% at 86% 8%, rgba(255,138,42,.10), transparent 70%),
radial-gradient(52% 36% at 50% 112%, rgba(194,65,12,.12), transparent 72%);
animation: brzCalor 16s ease-in-out infinite;
will-change: transform;
}
@keyframes brzBrasa{
0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
8% { opacity: var(--brz-op, .8); }
70% { opacity: var(--brz-op, .8); }
100%{ transform: translate3d(var(--brz-sway, 30px), -106vh, 0) scale(.45); opacity: 0; }
}
.brz-brasa{
position: fixed; bottom: -12px; z-index: 2147482997;
width: var(--brz-sz, 5px); height: var(--brz-sz, 5px); border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #FFE2A8, var(--brz-laranja-quente) 55%, rgba(194,65,12,.7));
box-shadow: 0 0 9px 2px rgba(242,151,21,.55);
filter: blur(.4px);
pointer-events: none;
animation: brzBrasa var(--brz-dur, 11s) linear var(--brz-del, 0s) infinite;
will-change: transform, opacity;
}
/* ── 13) DINHEIRO EM OURO — gradiente + brilho que varre 1x ──
Aplicado pelo JS (.brz-money) só onde o count-up reconheceu R$. */
@keyframes brzOuroShine{
from{ background-position: 200% 0; }
to { background-position: -60% 0; }
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
.brz-ready .brz-money{
background-image: linear-gradient(100deg,
var(--brz-laranja-claro) 0%, #FFD993 18%, #FFF3D6 26%, #FFD27A 34%,
var(--brz-laranja-claro) 48%, var(--brz-laranja) 100%);
background-size: 220% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
animation: brzOuroShine 1.6s var(--brz-ease) .35s 1 both;
}
}
/* ── 14) BOTÃO PRINCIPAL — chama viva ──
Gradiente em movimento lento + halo que respira. Só animação e
sombra: o layout e as cores-base de cada página ficam como estão. */
@keyframes brzChamaGrad{ 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }
@keyframes brzChamaHalo{
0%,100%{ box-shadow: 0 4px 16px rgba(242,151,21,.32), 0 0 0 0 rgba(242,151,21,.0); }
50% { box-shadow: 0 6px 26px rgba(242,151,21,.55), 0 0 22px 2px rgba(255,138,42,.22); }
}
.brz-ready .btn-primary, .brz-ready .btn-save{
background-size: 180% 180% !important;
animation: brzChamaGrad 5.5s ease-in-out infinite, brzChamaHalo 3.2s ease-in-out infinite;
}
/* ── 15) anel dourado removido: colidia com ::before próprios das páginas ── */
/* ── 16) ENTRADA mais presente (sem custo extra) ── */
.brz-ready body{ animation-duration: .9s; }
.brz-ready .brz-io{ transform: translateY(18px); }