/* Paleta da Tama (Gintama), a mesma de customPalettes.henrique no nexos:
   cabelo #5A9E72, olhos #8B2C45, yukata #4261A1, avental #EAEAEA,
   obi #D9A752, parafuso #7D848C. */

/* ---------- Tema ---------- */

:root {
  color-scheme: light;
  --superficie: #EAEAEA;
  --superficie-variante: #F5F5F5;
  --texto: #1E2533;
  --texto-suave: #3E4654;
  --primaria: #3A7550;
  --secundaria: #86601A;
  --terciaria: #4261A1;
  --erro: #8B2C45;
  --contorno: #7D848C;
  --hover: #D9DDE3;
  --sombra: #C9CDD3;
  --sol: none;
  --lua: inline;
  --rotulo-tema: "Escuro";
}

/* Checkbox marcado = inverte o modo do sistema. */
:root:has(#tema:checked) {
  color-scheme: dark;
  --superficie: #171A21;
  --superficie-variante: #20252F;
  --texto: #EAEAEA;
  --texto-suave: #B9BEC6;
  --primaria: #5A9E72;
  --secundaria: #D9A752;
  --terciaria: #6E8CC8;
  --erro: #D0607A;
  --contorno: #7D848C;
  --hover: #2B3240;
  --sombra: #0C0E12;
  --sol: inline;
  --lua: none;
  --rotulo-tema: "Claro";
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --superficie: #171A21;
    --superficie-variante: #20252F;
    --texto: #EAEAEA;
    --texto-suave: #B9BEC6;
    --primaria: #5A9E72;
    --secundaria: #D9A752;
    --terciaria: #6E8CC8;
    --erro: #D0607A;
    --contorno: #7D848C;
    --hover: #2B3240;
    --sombra: #0C0E12;
    --sol: inline;
    --lua: none;
    --rotulo-tema: "Claro";
  }

  :root:has(#tema:checked) {
    color-scheme: light;
    --superficie: #EAEAEA;
    --superficie-variante: #F5F5F5;
    --texto: #1E2533;
    --texto-suave: #3E4654;
    --primaria: #3A7550;
    --secundaria: #86601A;
    --terciaria: #4261A1;
    --erro: #8B2C45;
    --contorno: #7D848C;
    --hover: #D9DDE3;
    --sombra: #C9CDD3;
    --sol: none;
    --lua: inline;
    --rotulo-tema: "Escuro";
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background-color: var(--superficie);
  color: var(--texto);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  line-height: 1.6;
  transition: background-color 0.2s, color 0.2s;
}

a {
  color: var(--terciaria);
}

a:hover {
  color: var(--primaria);
}

:focus-visible {
  outline: 2px solid var(--secundaria);
  outline-offset: 2px;
}

h1 {
  margin: 0 0 1.5rem;
  font-size: 1.75rem;
  line-height: 1.2;
}

h1::after {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin-top: 0.5rem;
  border-radius: 2px;
  background-color: var(--primaria);
}

h2 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  line-height: 1.3;
}

.pagina {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ---------- Topo / navegação ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 1rem 0;
  background-color: var(--superficie);
  border-bottom: 1px solid var(--sombra);
}

.marca {
  display: inline-flex;
  color: var(--primaria);
}

.marca:hover {
  color: var(--secundaria);
}

.marca svg {
  width: auto;
  height: 2.5rem;
  fill: currentColor;
}

.abas-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  order: 3;
  width: 100%;
}

.abas-nav a {
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  color: var(--texto-suave);
  text-decoration: none;
  font-weight: 500;
}

.abas-nav a:hover {
  background-color: var(--hover);
  color: var(--texto);
}

/* Aba ativa: a do :target, ou "Sobre mim" quando não há âncora. */
body:not(:has(.aba:target)) .nav-sobre,
body:has(#sobre:target) .nav-sobre,
body:has(#experiencias:target) .nav-experiencias,
body:has(#projetos:target) .nav-projetos,
body:has(#diversoes:target) .nav-diversoes {
  background-color: var(--primaria);
  color: var(--superficie);
}

@media (min-width: 48rem) {
  .abas-nav {
    order: 0;
    width: auto;
  }
}

/* ---------- Botão de tema ---------- */

.tema-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tema-botao {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--contorno);
  border-radius: 999px;
  color: var(--texto);
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
}

.tema-botao:hover {
  background-color: var(--hover);
}

.tema-input:focus-visible ~ .pagina .tema-botao {
  outline: 2px solid var(--secundaria);
  outline-offset: 2px;
}

.icone-sol {
  display: var(--sol);
  color: var(--secundaria);
}

.icone-lua {
  display: var(--lua);
  color: var(--terciaria);
}

.tema-texto::after {
  content: var(--rotulo-tema);
}

/* ---------- Abas ---------- */

.abas {
  padding: 2rem 0 3rem;
}

.aba {
  display: none;
}

.aba:target,
.abas:not(:has(.aba:target)) #sobre {
  display: block;
}

/* ---------- Cartões ---------- */

.cartao {
  padding: 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--sombra);
  border-radius: 0.75rem;
  background-color: var(--superficie-variante);
}

.cartao p {
  margin: 0 0 0.75rem;
}

.cartao p:last-child {
  margin-bottom: 0;
}

.rascunho {
  color: var(--texto-suave);
  font-style: italic;
}

/* ---------- Experiências ---------- */

.linha-tempo {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--primaria);
}

.linha-tempo > li {
  position: relative;
}

.linha-tempo > li::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: calc(-1.25rem - 7px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--secundaria);
  border: 2px solid var(--superficie);
}

.periodo {
  color: var(--secundaria);
  font-size: 0.875rem;
  font-weight: 600;
}

.empresa {
  color: var(--texto-suave);
}

.linha-tempo ul {
  margin: 0;
  padding-left: 1.25rem;
}

/* ---------- Projetos ---------- */

.grade-projetos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}

.projeto {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-top: 3px solid var(--primaria);
}

.projeto h2 {
  overflow-wrap: anywhere;
}

.projeto h2 a {
  color: var(--texto);
  text-decoration: none;
}

.projeto h2 a:hover {
  color: var(--primaria);
  text-decoration: underline;
}

.projeto p:not(.tags) {
  color: var(--texto-suave);
  flex: 1;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.tags span {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background-color: var(--hover);
  color: var(--texto);
  font-size: 0.75rem;
}

.mais {
  margin-top: 1.5rem;
}

/* ---------- Diversões: entidades rodopiantes ---------- */

.formas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  height: 18rem;
  border: 2px solid var(--primaria);
  border-radius: 0.5rem;
  /* Palco sempre escuro: uma das faces do cubo é branca. */
  background-color: #171A21;
}

#piramide,
#cubo {
  position: relative;
  width: 5rem;
  height: 5rem;
  transform-style: preserve-3d;
}

#piramide {
  animation: around_the_world 7s linear infinite;
}

#cubo {
  animation: around_the_world 20s linear infinite;
}

#piramide img,
#cubo img {
  position: absolute;
  width: 100%;
  height: 100%;
}

#piramide img {
  transform-origin: center top;
}

#cubo img {
  transform-origin: center center -2.5rem;
}

#piramide_norte { transform: rotateY(360deg) rotateX(30deg); }
#piramide_leste { transform: rotateY(90deg) rotateX(30deg); }
#piramide_sul   { transform: rotateY(0deg) rotateX(-30deg); }
#piramide_oeste { transform: rotateY(270deg) rotateX(30deg); }

#cubo_frente   { transform: rotateX(0deg) rotateY(0deg); }
#cubo_costas   { transform: rotateX(0deg) rotateY(180deg); }
#cubo_topo     { transform: rotateX(90deg) rotateY(0deg); }
#cubo_fundo    { transform: rotateX(-90deg) rotateY(0deg); }
#cubo_esquerda { transform: rotateX(0deg) rotateY(-90deg); }
#cubo_direita  { transform: rotateX(0deg) rotateY(90deg); }

@keyframes around_the_world {
  from {
    transform: rotateY(0deg) rotateX(360deg) rotateZ(360deg);
  }
  to {
    transform: rotateY(360deg) rotateX(-360deg) rotateZ(-360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #piramide,
  #cubo {
    animation-duration: 60s;
  }
}

/* ---------- Rodapé ---------- */

.rodape {
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--sombra);
}

.redes {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
}

.redes a {
  display: inline-flex;
  padding: 0.5rem;
  border-radius: 50%;
  color: var(--texto-suave);
  transition: color 0.2s, background-color 0.2s;
}

.redes a:hover {
  background-color: var(--hover);
  color: var(--primaria);
}

.redes svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

/* ---------- Experiências: resumo e extras ---------- */

.resumo {
  margin: 0 0 1.5rem;
  max-width: 45rem;
  color: var(--texto-suave);
}

.linha-tempo .tags {
  margin-top: 0.75rem;
}

.grade-extras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.grade-extras .cartao {
  margin: 0;
  border-top: 3px solid var(--secundaria);
}

.grade-extras ul {
  margin: 0;
  padding-left: 1.25rem;
}