/* ===================================================================== HubTransGrãos · Loading universal (a folha é o DNA da marca) Reutilizável em qualquer tela. Usa os tokens da marca com fallback, então funciona mesmo em páginas que não os definem. ===================================================================== */ .app-loader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--form-bg, #F6F8EF); /* aliases locais com fallback — não dependem do :root da página */ --al-folha: var(--tg-folha, #799A00); --al-limao: var(--tg-limao, #C6D800); --al-floresta: var(--tg-floresta, #00552C); /* cor em que a folha "engole" a tela no final (ver al-bloom) */ --al-bloom-end: var(--al-limao); } /* Tema escuro: o index.html seta data-theme no a partir do localStorage ANTES da pintura, então o loader já nasce no fundo escuro (sem flash claro). As folhas verde/limão seguem legíveis sobre o escuro; só o final muda — a folha engole a tela no verde-folha, não no limão, senão o app escuro nasce de um clarão. O --tg-floresta já sobe sozinho no escuro (tokens.css). */ :root[data-theme='dark'] .app-loader { background: #10140C; --al-bloom-end: var(--al-folha); } .app-loader__stage { position: relative; display: grid; place-items: center; width: min(46vw, 220px); aspect-ratio: 588 / 289; /* proporção da folha oficial */ } /* halo limão que respira junto — profundidade, sensação premium */ .app-loader__glow { position: absolute; inset: -46% -28%; border-radius: 50%; background: radial-gradient(closest-side, rgba(198, 216, 0, .55), rgba(198, 216, 0, 0) 72%); filter: blur(4px); animation: al-glow 2.4s ease-in-out infinite; will-change: transform, opacity; } /* a folha */ .app-loader__leaf { position: relative; width: 100%; height: auto; color: var(--al-floresta); /* começa no verde mais escuro */ fill: currentColor; transform-origin: 50% 52%; /* dois ritmos diferentes (2.4s x 3.6s) → nunca sincronizam = orgânico */ animation: al-breathe 2.4s ease-in-out infinite, al-hue 3.6s ease-in-out infinite; will-change: transform, color; } /* respiração com leve balanço "ao vento" */ @keyframes al-breathe { 0% { transform: scale(1) rotate(-2.2deg); } 50% { transform: scale(1.12) rotate( 2.2deg); } 100% { transform: scale(1) rotate(-2.2deg); } } /* ciclo entre os verdes oficiais: escuro → folha → limão → escuro */ @keyframes al-hue { 0%, 100% { color: var(--al-floresta); } 33% { color: var(--al-folha); } 66% { color: var(--al-limao); } } @keyframes al-glow { 0%, 100% { transform: scale(.92); opacity: .34; } 50% { transform: scale(1.16); opacity: .58; } } /* --------------------------------------------------------------------- FINAL: a folha recua (anticipação), floresce e engole a tela, depois a camada dissolve revelando o sistema. --------------------------------------------------------------------- */ .app-loader.is-finishing { pointer-events: none; animation: al-out 1s ease forwards; } .app-loader.is-finishing .app-loader__leaf { animation: al-bloom .95s cubic-bezier(.45, 0, .35, 1) forwards; } .app-loader.is-finishing .app-loader__glow { animation: al-glow-out .4s ease forwards; } /* recua (anticipação), cresce e engole a tela — escuro → folha → cor final (limão no tema claro, verde-folha no escuro, via --al-bloom-end) */ @keyframes al-bloom { 0% { transform: scale(1) rotate(0deg); color: var(--al-floresta); } 14% { transform: scale(.82) rotate(-4deg); color: var(--al-folha); } 100% { transform: scale(30) rotate(4deg); color: var(--al-bloom-end); } } @keyframes al-out { 0%, 52% { opacity: 1; } 100% { opacity: 0; } /* dissolve depois que a folha engole a tela */ } @keyframes al-glow-out { to { opacity: 0; } } /* removido do fluxo — não bloqueia cliques nem leitores de tela */ .app-loader.is-hidden { display: none !important; } /* --------------------------------------------------------------------- Acessibilidade: sem pulsação/zoom para quem prefere menos movimento. Mantém só uma transição de opacidade simples. --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .app-loader__leaf { animation: none; color: var(--al-floresta); } .app-loader__glow { animation: none; opacity: .4; } .app-loader.is-finishing { animation: al-fade .4s ease forwards; } .app-loader.is-finishing .app-loader__leaf, .app-loader.is-finishing .app-loader__glow { animation: none; } } @keyframes al-fade { to { opacity: 0; } }