/* Abelha viva (abelha.js): marca do Agenda Mel animada só com CSS.
   Regras do dono (TAG): nada pisca, nada rápido; asas com amplitude pequena, voo lento,
   texto de progresso sempre ao lado. Em área de leitura a abelha fica parada (sem loop).
   prefers-reduced-motion: abelha parada, só o fade da splash. */
:root { --mel-creme: #FFF6E0; --mel-tinta: #4C4D8C; --mel-mel: #E9A23B; --mel-texto: #6B5530; }

.abelha { display: inline-block; width: 1em; height: 1em; overflow: visible; vertical-align: middle; color: var(--mel-tinta); }
.abelha .ab-asa { transform-box: fill-box; }
.abelha .ab-asa-t { transform-origin: 30% 95%; }
.abelha .ab-asa-f { transform-origin: 4% 88%; }
.abelha--descansa .ab-olhos { display: none; }
.abelha--descansa .ab-olhos-z { display: inline; }
/* Escuro: um halo creme fino separa o contorno azul do fundo escuro */
body.dark-theme .abelha { filter: drop-shadow(0 0 1.5px rgba(255, 246, 224, .55)); }

/* Asas: batida simétrica (volta ao repouso no fim de cada ciclo, sem tranco ao parar) */
@keyframes ab-bater { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 70% { transform: rotate(7deg); } }
/* Voo em arco lento, no lugar (carregando) */
@keyframes ab-arco {
    0%   { transform: translate(-14%, 4%) rotate(-5deg); }
    50%  { transform: translate(0, -8%) rotate(0); }
    100% { transform: translate(14%, 4%) rotate(5deg); }
}
/* Pequeno pulo (salvou) */
@keyframes ab-pulo { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-28%); } 65% { transform: translateY(0); } 82% { transform: translateY(-7%); } }
/* Chegada na splash: um eixo por elemento faz a curva (x desacelera, y sobe e assenta) */
@keyframes ab-chega-x { from { transform: translateX(-72px); } to { transform: none; } }
@keyframes ab-chega-y { 0% { transform: translateY(48px) rotate(-14deg) scale(.82); } 65% { transform: translateY(-8px) rotate(3deg) scale(1); } 100% { transform: none; } }
/* Pouso de estado vazio: aparece e assenta uma vez */
@keyframes ab-pousa { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.abelha--voa { animation: ab-arco 2.6s ease-in-out infinite alternate; }
.abelha--voa .ab-asa { animation: ab-bater .7s ease-in-out infinite; }
.abelha--voa .ab-asa-t { animation-delay: -.12s; }

/* Splash: creme-mel, abelha chega voando e pousa sobre o nome; passos com prazo */
#splash-screen {
    position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 16px; background: var(--mel-creme); transition: opacity .35s ease;
}
#splash-screen.is-saindo { opacity: 0; pointer-events: none; }
.spl-voo { display: block; width: 104px; height: 104px; font-size: 104px; line-height: 0; margin-bottom: 4px; animation: ab-chega-x .95s cubic-bezier(.2, .7, .3, 1) both; }
.spl-voo .abelha { animation: ab-chega-y .95s cubic-bezier(.3, .6, .35, 1) both; }
.spl-voo .ab-asa { animation: ab-bater .5s ease-in-out 2; }
.spl-titulo { margin: 0; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; color: #2E2F5E; }
.spl-passo { margin: 6px 0 0; font-size: .82rem; font-weight: 600; color: var(--mel-texto); min-height: 1.2em; }
.spl-trilho { display: flex; gap: 6px; margin-top: 8px; }
.spl-trilho i { width: 30px; height: 4px; border-radius: 2px; background: #EBDDBC; transition: background-color .4s ease; }
.spl-trilho i.is-on { background: var(--mel-mel); }
body.dark-theme .spl-titulo { color: #f1f5f9; }
body.dark-theme .spl-passo { color: #cbd5e1; }
body.dark-theme .spl-trilho i { background: #334155; }
body.dark-theme .spl-trilho i.is-on { background: #FCD34D; }

/* Header: a abelha é a marca (parada); passar o mouse ou focar bate as asas duas vezes */
.btn-logo-abelha { background: var(--mel-creme) !important; font-size: 1.7rem; line-height: 0; }
.btn-logo-abelha .abelha { width: 82%; height: 82%; }
.btn-logo-abelha:hover .ab-asa, .btn-logo-abelha:focus-visible .ab-asa { animation: ab-bater .6s ease-in-out 2; }
body.dark-theme .btn-logo-abelha .abelha { filter: none; }

/* Carregando no header (lugar do antigo spinner) */
.ld-abelha { display: block; width: 22px; height: 22px; font-size: 22px; line-height: 0; }

/* Indicador de salvamento: só a nuvem (style.css). A abelha que ficava ao lado do avatar saiu:
   a Bia mora num lugar só, o botão central da barra (voz.css). */

/* Estado vazio: abelha pousada acima do texto */
.ab-vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; text-align: center; }
.ab-vazio > .abelha { font-size: 44px; opacity: .92; animation: ab-pousa .5s ease-out both; }
.ab-vazio-txt { margin: 0; font-size: .875rem; font-weight: 500; color: #64748b; }
body.dark-theme .ab-vazio-txt { color: #94a3b8; }
/* Linha de espera com abelha voando ao lado do texto (Passeios, grupo, painel) */
.ab-espera { display: inline-flex; align-items: center; gap: .5rem; }
.ab-espera > .abelha { font-size: 1.6rem; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
    .abelha, .abelha *, .spl-voo { animation: none !important; }
    #splash-screen { transition-duration: .2s; }
}
