ganham `padding-bottom` na própria página pra o conteúdo não ficar escondido atrás da barra. */ body{ opacity:0; animation:pageFadeIn .5s ease-out forwards; } body.page-leaving{ animation:pageFadeOut .22s ease-in forwards; } @keyframes pageFadeIn{ from{ opacity:0; } to{ opacity:1; } } @keyframes pageFadeOut{ from{ opacity:1; } to{ opacity:0; } } /* ─── Entrada escalonada dos blocos de conteúdo ─── */ @keyframes riseIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } } .rise-in{ animation:riseIn .55s cubic-bezier(.16,1,.3,1) backwards; } /* ─── Skeleton loader ─── */ @keyframes shimmer{ 0%{ background-position:-400px 0; } 100%{ background-position:400px 0; } } .skel{ background:linear-gradient(90deg,rgba(45,90,78,.06) 25%,rgba(45,90,78,.13) 37%,rgba(45,90,78,.06) 63%); background-size:800px 100%; animation:shimmer 1.4s linear infinite; border-radius:14px; } /* ─── Microinterações genéricas de card/lista ─── */ .card-stat, .glass-panel, .atend-card, .card, .item-card, #cavalos-preview a, #lista-cavalos a, .horse-card, .card-receita{ transition:transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s ease; } .card-stat:active, .atend-card:active, .card:active, .item-card:active, #cavalos-preview a:active, #lista-cavalos a:active, .card-receita:active{ transform:scale(.97); } /* ─── Menu lateral + overlay ─── */ #menu-overlay{ transition:opacity .3s ease, backdrop-filter .3s ease; opacity:0;backdrop-filter:blur(0px); } #menu-overlay.show{ opacity:1;backdrop-filter:blur(3px); } #side-menu{ transition:transform .38s cubic-bezier(.16,1,.3,1); } #side-menu a{ transition:background .18s ease, transform .18s ease; } #side-menu a:active{ transform:scale(.97); } /* ─── Sino de notificação ─── */ @keyframes bellShake{ 0%,100%{ transform:rotate(0); } 15%{ transform:rotate(14deg); } 30%{ transform:rotate(-11deg); } 45%{ transform:rotate(7deg); } 60%{ transform:rotate(-4deg); } 75%{ transform:rotate(2deg); } } #btn-notif.has-alert i.fa-bell{ animation:bellShake 2.2s ease-in-out infinite; animation-delay:1s; } @keyframes badgePop{ 0%{ transform:scale(0); } 60%{ transform:scale(1.3); } 100%{ transform:scale(1); } } #notif-badge:not(.hidden){ animation:badgePop .4s cubic-bezier(.34,1.56,.64,1) backwards; } /* ─── Barra de progresso com shimmer (trial, suplementos etc) ─── */ .fx-shimmer-bar{ position:relative;overflow:hidden; } .fx-shimmer-bar::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); transform:translateX(-100%); animation:trialShimmer 2.4s ease-in-out infinite; } @keyframes trialShimmer{ to{ transform:translateX(100%); } } /* ─── Botões / CTAs ─── */ .btn-add, .btn-action, #logout-btn, button[id^="btn-"]{ transition:transform .15s ease, box-shadow .15s ease; } .btn-add:active, .btn-action:active, #logout-btn:active{ transform:scale(.96); } /* ─── Navegação inferior fixa (padrão app mobile) ─── */ /* AJUSTES (rodada 72): barra sempre colada na borda inferior da tela, visível durante toda a rolagem. Usar junto com `padding-bottom` no (ou último bloco de conteúdo) do tamanho da nav, pra o conteúdo não ficar escondido atrás dela. */ nav.bottom-nav-fixed{ position:fixed;bottom:0;left:0;right:0;z-index:50; } /* ─── Indicador de aba ativa na navegação inferior ─── */ nav a{ position:relative;transition:color .2s ease; } nav a.nav-active::before{ content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%); width:26px;height:3px;border-radius:0 0 4px 4px; background:var(--vetsmart-gold,#D2B48C); } /* ─── Ícone de saudação flutuante (dashboard) ─── */ #greeting-icon{ animation:greetingFloat 3s ease-in-out infinite; } @keyframes greetingFloat{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-4px) rotate(4deg); } } /* ─── Brilho percorrendo a borda ao tocar (rodada 67) ─── Aplicar a classe .glow-sweep num elemento com border-radius e ativar adicionando/removendo .active (via JS, ver attachGlowSweep em portal-prop-fx.js). Sem halo/glow fixo — só o traço corre no toque. */ @property --ang{ syntax:'';inherits:false;initial-value:0deg; } .glow-sweep{ position:relative; } .glow-sweep::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px; background:conic-gradient(from var(--ang,0deg), transparent 0 70%, var(--vetsmart-gold,#D2B48C) 85%, var(--vetsmart-green,#2D5A4E) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:0;pointer-events:none;transition:opacity .35s ease; animation:sweepAng 1.3s linear infinite paused; } .glow-sweep.active::before{ opacity:1;animation-play-state:running; } @keyframes sweepAng{ to{ --ang:360deg; } }