/* Logo animada da plataforma (logo_marca() em src/nucleo.php).
   Tema: "pedido chegando" — o celular vibra como notificação, as faíscas piscam e um brilho passa no nome.
   Camadas do mesmo tamanho empilhadas; os transform-origin são pontos da arte (base do celular, centro do balão). */
.logo-vivo{--ciclo:7s;position:relative;display:block;height:56px;aspect-ratio:468/150;
  filter:drop-shadow(0 4px 12px rgba(232,73,43,.16))}
.logo-vivo img{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.lv-celular{transform-origin:12% 90%;
  animation:lv-entra-cel .9s cubic-bezier(.34,1.56,.64,1) both,lv-vibra var(--ciclo) ease-in-out 1.6s infinite}
.lv-faiscas{transform-origin:17% 27%;
  animation:lv-entra-fai .5s cubic-bezier(.34,1.56,.64,1) .55s both,lv-pisca var(--ciclo) ease-out 1.6s infinite}
.lv-texto{animation:lv-entra-txt .7s cubic-bezier(.22,1,.36,1) .12s both}
/* brilho que atravessa só as letras (máscara = a própria camada de texto) */
.logo-vivo::after{content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url(/assets/marca/logo-texto.webp?v=3) center/100% 100% no-repeat;mask:url(/assets/marca/logo-texto.webp?v=3) center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.8) 50%,transparent 58%) no-repeat;background-size:260% 100%;
  background-position:130% 0;animation:lv-brilho var(--ciclo) ease-in-out 1.9s infinite}

/* fundo escuro: brilho laranja em volta em vez de sombra */
.rodape .logo-vivo,.lateral .logo-vivo{filter:drop-shadow(0 0 14px rgba(255,98,48,.28))}

/* passar o mouse: o celular levanta e vibra, as faíscas estouram */
a:hover>.logo-vivo .lv-celular{animation:lv-hover-cel .7s ease-in-out both}
a:hover>.logo-vivo .lv-faiscas{animation:lv-hover-fai .7s ease-out infinite}

@keyframes lv-entra-cel{from{opacity:0;transform:translateY(-18%) rotate(-14deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes lv-entra-fai{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes lv-entra-txt{from{opacity:0;transform:translateX(-4%)}to{opacity:1;transform:none}}
@keyframes lv-vibra{0%,12%,100%{transform:none}2%{transform:rotate(-5deg)}4%{transform:rotate(4deg)}6%{transform:rotate(-3deg)}8%{transform:rotate(2deg)}10%{transform:rotate(-1deg)}}
@keyframes lv-pisca{0%,100%{opacity:1;transform:none}3%{opacity:.25;transform:scale(.55)}9%{opacity:1;transform:scale(1.18)}14%{transform:none}}
@keyframes lv-brilho{0%{background-position:130% 0}14%,100%{background-position:-30% 0}}
@keyframes lv-hover-cel{0%{transform:none}20%{transform:translateY(-4%) rotate(-6deg)}40%{transform:translateY(-4%) rotate(4deg)}60%{transform:translateY(-4%) rotate(-3deg)}80%,100%{transform:translateY(-4%) rotate(-2deg)}}
@keyframes lv-hover-fai{0%{opacity:.3;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .logo-vivo img,.logo-vivo::after,a:hover>.logo-vivo img{animation:none!important}
  .logo-vivo::after{display:none}
}