/*
  There is no traditional footer in this design - the bottom of the
  page ("Frame 713" in Figma) only has the scroll-to-top button
  (bottom-right). The theme toggle moved into the header (css/header.css);
  only login/signup, which have no desktop header, still keep it here.
*/
.utility-bar {
  /* So ancora o botao no DOM: o "voltar ao topo" e position: fixed (ver
     .scroll-top abaixo). Sem transform aqui, senao o fixed viraria relativo a
     esta barra em vez da janela. O `top` de cada pagina (css/<pagina>.css)
     e a altura mantem a extensao vertical da pagina como antes. */
  position: absolute;
  left: 0;
  top: 618rem;
  width: auto;
  height: 5.9547rem;
  display: flex;
  align-items: center;
  z-index: 20;
}
.theme-toggle,
.scroll-top {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.theme-toggle {
  width: 6rem;
  height: 6rem;
}
.theme-toggle img {
  display: block;
  width: 100%;
  height: 100%;
}
.theme-toggle .icon-light {
  display: none;
}
.home[data-theme="light"] .theme-toggle .icon-dark,
.sistema[data-theme="light"] .theme-toggle .icon-dark,
.investimento[data-theme="light"] .theme-toggle .icon-dark,
.bibliografia[data-theme="light"] .theme-toggle .icon-dark,
.sobre[data-theme="light"] .theme-toggle .icon-dark,
.game[data-theme="light"] .theme-toggle .icon-dark,
.signup[data-theme="light"] .theme-toggle .icon-dark,
.login[data-theme="light"] .theme-toggle .icon-dark {
  display: none;
}
.home[data-theme="light"] .theme-toggle .icon-light,
.sistema[data-theme="light"] .theme-toggle .icon-light,
.investimento[data-theme="light"] .theme-toggle .icon-light,
.bibliografia[data-theme="light"] .theme-toggle .icon-light,
.sobre[data-theme="light"] .theme-toggle .icon-light,
.game[data-theme="light"] .theme-toggle .icon-light,
.signup[data-theme="light"] .theme-toggle .icon-light,
.login[data-theme="light"] .theme-toggle .icon-light {
  display: block;
}
.scroll-top {
  /* fixo no canto inferior direito da janela, acompanha a rolagem */
  position: fixed;
  right: 2.4rem;
  bottom: 2.4rem;
  z-index: 50;
  width: 6.1042rem;
  height: 5.9547rem;
}
/* Aparece/some com transicao (fade + sobe/desce + escala). O seletor com
   `button.` e as propriedades individuais translate/scale existem porque o
   css/animations.css (carregado depois) redefine `transition` do .scroll-top e
   usa transform no :active; assim a nossa transicao nao e sobrescrita. A classe
   .is-visible vem de js/navigation.js (depois de rolar 300px). */
button.scroll-top {
  opacity: 0;
  visibility: hidden;
  translate: 0 1.6rem;
  scale: 0.8;
  transition: opacity 0.3s ease, translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    scale 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.35s,
    transform 0.15s ease;
}
button.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  scale: 1;
  transition-delay: 0s;
}
button.scroll-top.is-visible:hover {
  opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
  button.scroll-top {
    translate: none;
    scale: none;
    transition: opacity 0.01s, visibility 0s;
  }
}
.scroll-top img {
  display: block;
  width: 100%;
  height: 100%;
}
.scroll-top .icon-light {
  display: none;
}
.home[data-theme="light"] .scroll-top .icon-dark,
.sistema[data-theme="light"] .scroll-top .icon-dark,
.investimento[data-theme="light"] .scroll-top .icon-dark,
.bibliografia[data-theme="light"] .scroll-top .icon-dark,
.sobre[data-theme="light"] .scroll-top .icon-dark,
.game[data-theme="light"] .scroll-top .icon-dark,
.signup[data-theme="light"] .scroll-top .icon-dark,
.login[data-theme="light"] .scroll-top .icon-dark {
  display: none;
}
.home[data-theme="light"] .scroll-top .icon-light,
.sistema[data-theme="light"] .scroll-top .icon-light,
.investimento[data-theme="light"] .scroll-top .icon-light,
.bibliografia[data-theme="light"] .scroll-top .icon-light,
.sobre[data-theme="light"] .scroll-top .icon-light,
.game[data-theme="light"] .scroll-top .icon-light,
.signup[data-theme="light"] .scroll-top .icon-light,
.login[data-theme="light"] .scroll-top .icon-light {
  display: block;
}