/* ═══════════════════════════════════════════════════════════
   RODAPÉ — o raio da marca vira o mascote, em loop.

   Os dois são o MESMO elemento: um clip-path de 44 vértices sobre o
   degradê da marca. O browser interpola polygon→polygon quando a contagem de
   pontos bate, então não há frame desenhado à mão — a marca literalmente se
   desdobra na mascote e volta.

   Gerado por segmentos/mascote/gerar_raio.py — não editar à mão.
   ═══════════════════════════════════════════════════════════ */
.rod-logo{
  --px:1.2px;
  /* display explícito: em <span> o padrão é inline e o elemento sai com 0×0,
     mesmo bug que o .msc já teve. */
  display:block;
  position:relative;
  width:calc(20 * var(--px));
  height:calc(24 * var(--px));
  background:linear-gradient(158deg,#FFB800 0%,#FF6B35 48%,#FF3D7F 100%);
  -webkit-clip-path:polygon(0% 51.7500%,4.7500% 49.0365%,9.5000% 46.3229%,14.2500% 43.6094%,19% 40.8958%,28.5000% 35.4688%,33.2500% 32.7552%,38% 30.0417%,47.5000% 24.6146%,57% 19.1875%,61.7500% 16.4740%,66.5000% 13.7604%,71.2500% 11.0469%,76% 8.3333%,80.2000% 8.3333%,81.2000% 12.6667%,76.5250% 20.4792%,71.8500% 28.2917%,67.1750% 36.1042%,62.5000% 43.9167%,71.6250% 43.9167%,80.7500% 43.9167%,89.8750% 43.9167%,99% 43.9167%,99% 49.1667%,89.6250% 54.4792%,80.2500% 59.7917%,70.8750% 65.1042%,61.5000% 70.4167%,52.1250% 75.7292%,42.7500% 81.0417%,33.3750% 86.3542%,24% 91.6667%,19.8000% 91.6667%,18.8000% 87.3333%,23.4750% 79.7292%,28.1500% 72.1250%,32.8250% 64.5208%,37.5000% 56.9167%,28.9000% 56.9167%,20.3000% 56.9167%,11.7000% 56.9167%,3.1000% 56.9167%,0% 55.1667%);
  clip-path:polygon(0% 51.7500%,4.7500% 49.0365%,9.5000% 46.3229%,14.2500% 43.6094%,19% 40.8958%,28.5000% 35.4688%,33.2500% 32.7552%,38% 30.0417%,47.5000% 24.6146%,57% 19.1875%,61.7500% 16.4740%,66.5000% 13.7604%,71.2500% 11.0469%,76% 8.3333%,80.2000% 8.3333%,81.2000% 12.6667%,76.5250% 20.4792%,71.8500% 28.2917%,67.1750% 36.1042%,62.5000% 43.9167%,71.6250% 43.9167%,80.7500% 43.9167%,89.8750% 43.9167%,99% 43.9167%,99% 49.1667%,89.6250% 54.4792%,80.2500% 59.7917%,70.8750% 65.1042%,61.5000% 70.4167%,52.1250% 75.7292%,42.7500% 81.0417%,33.3750% 86.3542%,24% 91.6667%,19.8000% 91.6667%,18.8000% 87.3333%,23.4750% 79.7292%,28.1500% 72.1250%,32.8250% 64.5208%,37.5000% 56.9167%,28.9000% 56.9167%,20.3000% 56.9167%,11.7000% 56.9167%,3.1000% 56.9167%,0% 55.1667%);
}
/* o rosto só existe na metade mascote do ciclo */
.rod-logo i{position:absolute;display:block;opacity:0;background:#14120F}
.rod-logo .rl-olhos{
  left:calc(3 * var(--px)); top:calc(10 * var(--px));
  width:calc(4 * var(--px)); height:calc(4 * var(--px));
  box-shadow:calc(10 * var(--px)) 0 0 0 #14120F;
}
.rod-logo .rl-boca{
  left:calc(8 * var(--px)); top:calc(15 * var(--px));
  width:calc(4 * var(--px)); height:var(--px);
}

@media (prefers-reduced-motion:no-preference){
  .rod-logo{animation:rl-forma 7s var(--ease-out,cubic-bezier(.22,1,.36,1)) infinite}
  .rod-logo i{animation:rl-rosto 7s var(--ease-out,cubic-bezier(.22,1,.36,1)) infinite}
}

/* 0–18% raio parado · 18–34% vira mascote · 34–66% mascote parado ·
   66–82% volta · 82–100% raio parado. As paradas são o que dá leitura:
   sem elas o olho vê uma forma indefinida se mexendo o tempo todo. */
@keyframes rl-forma{
  0%,18%   {clip-path:polygon(0% 51.7500%,4.7500% 49.0365%,9.5000% 46.3229%,14.2500% 43.6094%,19% 40.8958%,28.5000% 35.4688%,33.2500% 32.7552%,38% 30.0417%,47.5000% 24.6146%,57% 19.1875%,61.7500% 16.4740%,66.5000% 13.7604%,71.2500% 11.0469%,76% 8.3333%,80.2000% 8.3333%,81.2000% 12.6667%,76.5250% 20.4792%,71.8500% 28.2917%,67.1750% 36.1042%,62.5000% 43.9167%,71.6250% 43.9167%,80.7500% 43.9167%,89.8750% 43.9167%,99% 43.9167%,99% 49.1667%,89.6250% 54.4792%,80.2500% 59.7917%,70.8750% 65.1042%,61.5000% 70.4167%,52.1250% 75.7292%,42.7500% 81.0417%,33.3750% 86.3542%,24% 91.6667%,19.8000% 91.6667%,18.8000% 87.3333%,23.4750% 79.7292%,28.1500% 72.1250%,32.8250% 64.5208%,37.5000% 56.9167%,28.9000% 56.9167%,20.3000% 56.9167%,11.7000% 56.9167%,3.1000% 56.9167%,0% 55.1667%)}
  34%,66%  {clip-path:polygon(0% 0%,15% 0%,15% 8.3333%,20% 8.3333%,20% 12.5000%,25% 12.5000%,25% 16.6667%,30% 16.6667%,30% 20.8333%,35% 20.8333%,35% 25%,65% 25%,65% 20.8333%,70% 20.8333%,70% 16.6667%,75% 16.6667%,75% 12.5000%,80% 12.5000%,80% 8.3333%,85% 8.3333%,85% 0%,100% 0%,100% 70.8333%,95% 70.8333%,95% 83.3333%,85% 83.3333%,85% 95.8333%,80% 95.8333%,80% 100%,70% 100%,70% 95.8333%,65% 95.8333%,65% 83.3333%,35% 83.3333%,35% 95.8333%,30% 95.8333%,30% 100%,20% 100%,20% 95.8333%,15% 95.8333%,15% 83.3333%,5% 83.3333%,5% 70.8333%,0% 70.8333%)}
  82%,100% {clip-path:polygon(0% 51.7500%,4.7500% 49.0365%,9.5000% 46.3229%,14.2500% 43.6094%,19% 40.8958%,28.5000% 35.4688%,33.2500% 32.7552%,38% 30.0417%,47.5000% 24.6146%,57% 19.1875%,61.7500% 16.4740%,66.5000% 13.7604%,71.2500% 11.0469%,76% 8.3333%,80.2000% 8.3333%,81.2000% 12.6667%,76.5250% 20.4792%,71.8500% 28.2917%,67.1750% 36.1042%,62.5000% 43.9167%,71.6250% 43.9167%,80.7500% 43.9167%,89.8750% 43.9167%,99% 43.9167%,99% 49.1667%,89.6250% 54.4792%,80.2500% 59.7917%,70.8750% 65.1042%,61.5000% 70.4167%,52.1250% 75.7292%,42.7500% 81.0417%,33.3750% 86.3542%,24% 91.6667%,19.8000% 91.6667%,18.8000% 87.3333%,23.4750% 79.7292%,28.1500% 72.1250%,32.8250% 64.5208%,37.5000% 56.9167%,28.9000% 56.9167%,20.3000% 56.9167%,11.7000% 56.9167%,3.1000% 56.9167%,0% 55.1667%)}
}
@keyframes rl-rosto{
  0%,26%   {opacity:0}
  38%,62%  {opacity:1}
  74%,100% {opacity:0}
}