/* =====================================================================
   RODAPÉ · Dom Calais
   Discreto, no fim da página, depois da Redes sociais. Fala a língua do hero: um filete com as
   faixas da barra de esferas (as do divisor, só que finas), a esfera de quatro estrelas (a do
   Gohan) pousada nele, o texto na Pixelify Sans do rodapé laranja, e o "Menu principal" num
   pedaço daquele painel laranja, com o canto chanfrado e a mesma trama de pontos.
   Classes .rodape*. Comportamento (ano e voltar ao menu) em js/rodape.js.
   ===================================================================== */
.rodape{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:clamp(6px, 1.1vh, 10px);
  padding:clamp(30px, 5vh, 46px) 16px calc(clamp(18px, 3vh, 30px) + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(60% 140% at 50% 0%, rgba(31,143,221,.18), transparent 70%),
    linear-gradient(180deg, #0a2346 0%, #061630 55%, #040e22 100%);
  color:#cfdcf0; text-align:center;
  font-family:"Pixelify Sans", "Baloo 2", monospace; font-weight:600;
  -webkit-tap-highlight-color:transparent;
}
.rodape *, .rodape *::before{ box-sizing:border-box }
.rodape p{ margin:0 }

/* o filete: contorno, reflexo creme, ouro, laranja, contorno (de cima para baixo) */
.rodape::before{
  content:""; position:absolute; left:0; right:0; top:0; height:5px;
  background:linear-gradient(180deg, #3a1a02 0 1px, #fff3c4 1px 2px, #ffc93c 2px 3px, #e8780e 3px 4px, #3a1a02 4px 5px);
}
/* a esfera, com o centro no filete */
.rodape__esfera{
  position:absolute; top:2.5px; left:50%; width:clamp(26px, 2.2vw, 34px); height:auto;
  translate:-50% -50%; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));
}

.rodape__direitos{ font-size:clamp(12px, .95vw, 14px); letter-spacing:.06em; color:#e8eef8 }
/* o © da Pixelify Sans é um expoente miúdo; este é desenhado em pixel (no HTML), na altura dos
   números, como as setas do rodapé do hero */
.rodape__c{ height:.66em; width:auto; vertical-align:0; shape-rendering:crispEdges; fill:currentColor }
.rodape__direitos strong{ font-weight:600; color:#ffc93c; letter-spacing:.08em; text-transform:uppercase }
.rodape__nota{ max-width:92ch; font-size:clamp(11px, .8vw, 12.5px); line-height:1.45; letter-spacing:.03em; color:#8fa6c8 }

/* "Menu principal": o painel laranja do hero em miniatura. O recorte fica num ::before para o
   contorno do foco (que o clip-path cortaria) continuar à vista */
.rodape__voltar{
  position:relative; isolation:isolate; margin-top:clamp(4px, 1vh, 8px);
  display:inline-flex; align-items:center; gap:.6em;
  padding:.55em 1.9em .5em 1.1em;
  font-size:clamp(11px, .85vw, 13px); letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  color:#5e2304;
  transition:translate .2s, filter .2s;
}
.rodape__voltar::before{
  content:""; position:absolute; inset:0; z-index:-1;
  clip-path:polygon(0 0, calc(100% - 1.1em) 0, 100% 1.1em, 100% 100%, 0 100%);
  background:
    radial-gradient(circle, rgba(178,72,6,.19) 32%, transparent 34%) 0 0 / 5px 5px,
    linear-gradient(174deg, #f3ae63 0%, #ed9a45 32%, #e78e37 70%, #e1832b 100%);
  box-shadow:inset 0 -2px 0 #d8261f;   /* a linha vermelha do rodapé do hero */
}
.rodape__seta{ height:.85em; width:auto; shape-rendering:crispEdges; fill:currentColor; animation:rodapeSobe 1.6s ease-in-out infinite }
@keyframes rodapeSobe{ 50%{ transform:translateY(-2px) } }
.rodape__voltar:hover{ translate:0 -2px; filter:brightness(1.08) }
.rodape__voltar:focus-visible{ outline:2px solid #fff; outline-offset:3px }

@media (prefers-reduced-motion: reduce){
  .rodape__seta{ animation:none }
  .rodape__voltar{ transition:none }
}