/* ===========================================================
   Mascote do caparao.net — BEIJA-FLOR (substitui o rig do robô: sem braços, sem dedos)
   Fonte única: o linktree (raiz) e o hero do site ligam ESTE arquivo.
   Roteiro (beija-flor.js): asas para baixo → pisca → abre as asas → o sol sobe por trás
   do cartão (só a metade de cima aparece, sem passar do rosto) → o sol desce → fecha as asas.
   Camadas dentro de .robo-stage: corpo < asas < cabeça < sol (2); o cartão (5) cobre o resto.
   Tudo multiplica por --z, como o palco.
   =========================================================== */
.robo-palco{--bf-vao:22px;--bf-sol:calc(90px * var(--z));--bf-asa:1} /* --bf-vao = margin-top do cartão no palco; --bf-asa = escala da asa aberta */
.lk .robo-palco{--bf-vao:18px}
/* dev: a 320px a ponta da asa aberta encostava no recorte lateral do .lk (e passava dele no passar do ponto).
   Encolhe só a asa: mexer no --z estreitava o cartão e quebrava o texto do botão em duas linhas. */
@media (max-width:339px){.lk .robo-palco{--bf-asa:.9}}
/* a partir de 430px o palco cresce (--z 1.55) mas o .lk não passa de 440px: a asa aberta encostava no recorte */
@media (min-width:430px){.lk .robo-palco{--bf-asa:.92}}

/* ---------- sol 3D: sobe NA FRENTE do beija-flor, por trás do cartão ---------- */
/* o corpo fica mais para baixo: o palco perde altura e o cartão cobre da barriga para baixo */
.robo-palco .robo-stage{height:calc(142px * var(--z))}
.robo-palco .robo{top:calc(14px * var(--z))} /* beija-flor um pouco mais baixo: aparece menos tronco (pedido do dono, 02/10/2026) */
.bf-sol-janela{
  position:absolute;z-index:2;pointer-events:none;overflow:hidden; /* acima do .robo, abaixo do cartão (5) */
  left:0;right:0;top:calc(-40px * var(--z));
  bottom:calc((var(--bf-vao) * var(--z) + 28px) * -1); /* entra 28px atrás do cartão: quem recorta o sol é a borda dele */
}
.bf-sol{
  position:absolute;left:50%;bottom:28px;
  width:var(--bf-sol);height:var(--bf-sol);margin-left:calc(var(--bf-sol) / -2);
  transform:translateY(135%);opacity:0;
  transition:transform 2.3s cubic-bezier(.55,0,.75,.45),opacity .7s ease 1.7s; /* descida */
  will-change:transform;
}
.robo-palco.is-sol .bf-sol{
  transform:translateY(56%);opacity:1; /* um pouco abaixo do centro, para o topo não passar do bico; centro do sol na borda do cartão: só a metade de cima fica à vista, abaixo do rosto */
  transition:transform 2.8s cubic-bezier(.16,1,.3,1),opacity .6s ease;
}
.bf-sol-img{position:relative;display:block;width:100%;height:100%;animation:bfRaios 38s linear infinite}
.bf-sol-luz{ /* clarão morno em volta do sol */
  position:absolute;inset:-34%;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--brand-hi-rgb),.55) 0,rgba(var(--brand-rgb),.28) 42%,transparent 68%);
}
@keyframes bfRaios{to{transform:rotate(360deg)}}
/* o sol só gira com ele no alto (escondido, era animação infinita sem ninguém ver) */
.robo-palco:not(.is-sol) .bf-sol-img{animation-play-state:paused}

/* a luz do sol encosta no cartão: borda dourada e clarão para cima.
   dev: a luz fica numa camada por cima do cartão e só a OPACIDADE dela anima — antes a transição
   era de box-shadow no próprio cartão, que repinta o cartão inteiro (sombra de 80px) a cada quadro. */
.robo-palco .console-card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(var(--brand-rgb),.5);
  box-shadow:inset 0 1px 0 rgba(var(--brand-hi-rgb),.35),0 -22px 60px -26px rgba(var(--brand-rgb),.55);
  opacity:0;transition:opacity 1.6s ease;
}
.robo-palco.is-sol .console-card::after{opacity:1}

/* ---------- asas ---------- */
/* ombro (no HTML): nas COSTAS, atrás do tronco (y=85 no viewBox, ±80 do centro) — a asa nasce
   de trás do corpo, não do peito. Pedido do dono, 02/10/2026. */
/* cada asa: <g translate(ombro)> › .bf-asa-giro (abre/fecha) › .bf-asa-bate (bater) › imagem.
   O pivô é a origem do grupo de fora, por isso transform-origin fica em 0 0.
   As três poses usam a MESMA lista de funções (translate rotate scale) para a transição
   interpolar função por função, sem cair em matriz. */
.bf-asa-giro,.bf-asa-bate,.bf-asa-ponta{transform-origin:0 0;transform-box:view-box}
/* Movimento de ave de verdade (pedido do dono, 02/10/2026): a asa tem DUAS partes com dobra no
   punho. Ao abrir, a base sobe primeiro e a ponta se desdobra logo depois, abrindo as penas em
   leque (a escala Y da ponta); ao fechar, o contrário, devagar, e o corpo desce junto. */
.bf-asa-giro{
  /* fechada: abaixada ao lado do tronco, parada. As asas ficam ATRÁS do corpo no SVG e a
     face nunca vira (pedido do dono, 02/10/2026: a virada no fim da descida incomodava). */
  transform:translate(0,0) rotate(48deg) scale(.9,.95);
  transition:transform 1.35s cubic-bezier(.45,0,.25,1) .35s; /* fecha depois de a ponta começar a recolher */
}
.robo-palco.is-asas .bf-asa-giro{
  transform:translate(0,0) rotate(-36deg) scale(var(--bf-asa),var(--bf-asa));
  transition:transform 1.5s cubic-bezier(.33,0,.15,1); /* câmera lenta: sai devagar, chega macio */
}
.robo-palco.is-asas.is-sol .bf-asa-giro{
  transform:translate(0,0) rotate(-41deg) scale(var(--bf-asa),var(--bf-asa)); /* as asas sobem junto com o sol */
  transition:transform 2.6s cubic-bezier(.16,1,.3,1);
}
/* ponta: dobrada para dentro (para o lado das penas) e com as penas recolhidas */
.bf-asa-ponta{
  transform:rotate(22deg) scale(.88,.8);
  transition:transform .8s cubic-bezier(.45,0,.25,1); /* ao fechar, a ponta recolhe primeiro */
}
.robo-palco.is-asas .bf-asa-ponta{
  transform:rotate(0deg) scale(1,1);
  transition:transform 1.2s cubic-bezier(.3,0,.2,1.12) .85s; /* desdobra DEPOIS de a base passar da horizontal (antes, a asa reta encostava na borda do celular) */
}
/* pairando: com o sol no alto, batida lenta; a ponta vem atrasada (chicote) */
.robo-palco.is-asas.is-sol .bf-asa-bate{animation:bfPaira 2.2s ease-in-out .9s infinite}
@keyframes bfPaira{0%,100%{transform:rotate(0)}50%{transform:rotate(10deg)}}
.robo-palco.is-batendo .bf-asa-bate{animation:bfBate .1s ease-in-out 9 alternate}
@keyframes bfBate{from{transform:rotate(9deg)}to{transform:rotate(-20deg)}}
/* corpo acompanha: sobe ao abrir as asas, desce junto quando elas baixam */
.robo-svg{transition:transform 1.4s cubic-bezier(.45,0,.25,1)}
.robo-palco.is-asas .robo-svg{transform:translateY(-3.2%);transition:transform 1.6s cubic-bezier(.33,0,.15,1)}

/* ---------- corpo e cabeça: respiro ---------- */
.bf-corpo{animation:bfRespira 4.4s ease-in-out infinite}
.bf-corpo .rb-head{animation:bfRespira 4.4s ease-in-out -.5s infinite}
@keyframes bfRespira{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.robo-palco.is-batendo .robo-svg{animation:bfPulo .9s cubic-bezier(.3,0,.3,1)}
@keyframes bfPulo{0%,100%{transform:translateY(0)}40%{transform:translateY(-4.5%)}}
/* dev: fora da tela (beija-flor.js liga .is-fora) nada fica animando — no site o hero some na
   primeira rolagem e o respiro seguia repintando o SVG pela página inteira */
.robo-palco.is-fora .bf-corpo,.robo-palco.is-fora .rb-head,.robo-palco.is-fora .bf-sol-img,.robo-palco.is-fora .avatar{animation-play-state:paused}

/* ---------- pálpebras ---------- */
/* recorte = elipse inclinada de cada olho (no HTML); a pálpebra desce 104 unidades do viewBox */
.bf-palpebra{transform:translateY(-104px);transition:transform .11s ease-in}
.robo-svg.is-piscando .bf-palpebra{transform:translateY(0);transition:transform .08s ease-out}

/* movimento reduzido: pose pronta (asas abertas, sol nascido, cartão iluminado), sem roteiro */
@media (prefers-reduced-motion:reduce){
  .robo{opacity:1!important;transform:none!important}
  .bf-asa-giro{transform:translate(0,0) rotate(-36deg) scale(var(--bf-asa),var(--bf-asa))!important;transition:none!important}
  .bf-asa-ponta{transform:none!important;transition:none!important}
  .bf-asa-bate,.robo-svg{animation:none!important;transition:none!important}
  .bf-sol{transform:translateY(56%)!important;opacity:1!important;transition:none!important}
  .robo-palco .console-card::after{opacity:1!important;transition:none!important}
  .bf-sol-img,.bf-corpo,.bf-corpo .rb-head{animation:none!important}
}