/* =============================================================
   MENU LATERAL (compartilhado: home e Projetos)
   Hambúrguer no header, painel que entra pela direita e overlay, com o
   boost visual: o painel entra em perspectiva, os itens entram em
   cascata e respondem ao cursor (inclinação, brilho e medalhão que
   cresce de leve), há luz difusa atrás do painel e o hambúrguer vira "X" dentro
   de um anel.
   O comportamento (abrir, fechar, ESC, foco, cursor) vem de menu-lateral.js.
   Sem JavaScript o painel fica fechado; sem este arquivo a página não
   tem menu. As variáveis de cor abaixo também funcionam em páginas que
   não as definem (os valores são os da marca).
   ============================================================= */
:root {
  --superficie: #151b20;
  --borda: rgba(255, 255, 255, 0.08);
  --branco: rgba(255, 255, 255, 0.9);
  --saida: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ───────── MENU HAMBÚRGUER ───────── */
.menu-hamburguer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
  border-radius: 40px;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  transition: background 0.25s ease;
}

.menu-hamburguer:hover {
  background: rgba(255, 255, 255, 0.1);
}

.menu-hamburguer:hover .barra {
  width: 28px;
}

.barra {
  display: block;
  height: 2px;
  background: var(--branco);
  border-radius: 2px;
  transition:
    width 0.25s ease,
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
}

.barra:first-child {
  width: 24px;
}

.barra:nth-child(2) {
  width: 16px;
}
.menu-hamburguer.aberto .barra:first-child {
  width: 24px;
  transform: translateY(4.5px) rotate(45deg);
}

.menu-hamburguer.aberto .barra:nth-child(2) {
  width: 24px;
  transform: translateY(-4.5px) rotate(-45deg);
}

/* anel que se desenha em volta do "X" (criado pelo menu-lateral.js) */
.menu-hamburguer.aberto {
  background: rgba(255, 255, 255, 0.1);
}
.menu-anel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.menu-anel circle {
  fill: none;
  stroke: var(--ciano);
  stroke-width: 1.6;
  stroke-dasharray: 132;
  stroke-dashoffset: 132;
  transition: stroke-dashoffset 0.7s var(--saida);
}
.menu-hamburguer.aberto .menu-anel circle {
  stroke-dashoffset: 0;
}

/* ───────── MENU OVERLAY ───────── */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  z-index: 199;
  transition: background 0.35s ease;
}

.menu-overlay.aberto {
  background: rgba(0, 0, 0, 0.5);
  pointer-events: all;
}

/* ───────── MENU LATERAL ───────── */
.menu-lateral {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  height: 100%;
  background: var(--bg);
  z-index: 200;
  /* fechado: fora da tela e levemente girado; aberto: de frente */
  transform: perspective(1400px) translateX(100%) rotateY(-18deg);
  transform-origin: 100% 50%;
  transition: transform 0.55s var(--saida);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* centrado pelas margens automáticas do 1º e do último item: quando a tela
     é baixa e o conteúdo não cabe, elas viram 0, o painel começa no topo e rola
     (justify-content:center cortaria o topo sem como rolar até ele) */
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(48px, env(safe-area-inset-top)) max(40px, env(safe-area-inset-right))
    max(48px, env(safe-area-inset-bottom)) 40px;

  p {
    margin: 20px 0 44px;
    font-size: 18px;
  }

  nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    perspective: 800px;

    a {
      --ax: 0;
      --ay: 1;
      --ang: 0deg;
      position: relative;
      width: 100%;
      background-color: var(--superficie);
      display: flex;
      font-size: 16px;
      box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
        0 8px 20px rgba(0, 0, 0, 0.35);
      border-radius: 40px;
      padding: 8px 8px 8px 20px;
      justify-content: space-between;
      align-items: center;
      color: var(--branco);
      border: 1px solid var(--borda);
      transform-style: preserve-3d;
      /* a inclinação e o levantar usam as propriedades rotate e translate,
         que não brigam com o transform da animação de entrada */
      rotate: var(--ax) var(--ay) 0 var(--ang);
      translate: 0 0;
      transition:
        background-color 0.3s,
        border-color 0.3s,
        box-shadow 0.35s,
        rotate 0.6s var(--saida),
        translate 0.5s var(--saida);

      /* brilho que segue o cursor dentro do item */
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s;
        background: radial-gradient(
          170px circle at var(--mx, 70%) var(--my, 50%),
          rgba(33, 189, 239, 0.28),
          transparent 65%
        );
      }

      img {
        position: relative;
        z-index: 1;
        width: 46px;
        height: auto; /* a proporção vem do arquivo (a home já faz isso no img global) */
        border-radius: 41px;
        translate: 0 0 0;
        transition:
          scale 0.4s var(--saida),
          translate 0.4s var(--saida),
          box-shadow 0.3s;

        box-shadow:
          2px 2px 2.8px 0 rgba(255, 255, 255, 0.11) inset,
          -2px -2px 2.8px 0 rgba(0, 0, 0, 0.5) inset,
          1px 1px 4px 0 rgba(0, 0, 0, 0.65);
      }

      &:hover,
      &:focus-visible,
      &.ativo {
        background-color: #1b232a;
        border-color: rgba(33, 189, 239, 0.6);
        box-shadow:
          0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
          0 22px 30px -14px rgba(0, 79, 255, 0.7);

        &::before {
          opacity: 1;
        }
        img {
          /* só um leve crescer e levantar, sem giro */
          scale: 1.06;
          translate: 0 0 8px;
          box-shadow:
            0 0 0 3px rgba(33, 189, 239, 0.22),
            0 10px 16px -6px rgba(0, 0, 0, 0.7);
        }
      }
      &.ativo {
        translate: 0 -4px;
        transition:
          background-color 0.3s,
          border-color 0.3s,
          box-shadow 0.35s,
          rotate 0.16s ease-out,
          translate 0.3s var(--saida);
      }
    }
  }
}

.menu-lateral > svg.olaTexto {
  margin-top: auto;
}
.menu-lateral > nav {
  margin-bottom: auto;
}

.menu-lateral.aberto {
  transform: perspective(1400px) translateX(0) rotateY(0deg);
}

/* entrada em cascata dos itens (e do "Olá!" e da pergunta) */
@keyframes menu-entra {
  from {
    opacity: 0;
    transform: translateX(46px) rotateY(-26deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.menu-lateral.aberto nav a {
  animation: menu-entra 0.65s var(--saida) both;
}
.menu-lateral.aberto nav a:nth-child(1) {
  animation-delay: 0.22s;
}
.menu-lateral.aberto nav a:nth-child(2) {
  animation-delay: 0.31s;
}
.menu-lateral.aberto nav a:nth-child(3) {
  animation-delay: 0.4s;
}
.menu-lateral.aberto nav a:nth-child(4) {
  animation-delay: 0.49s;
}

/* luz atrás do painel: duas manchas que derivam e um brilho que segue o cursor */
.menu-fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.menu-fundo i {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}
.menu-fundo .mf-a {
  left: -60px;
  top: 10%;
  width: 260px;
  height: 240px;
  background: rgba(0, 79, 255, 0.34);
  animation: menu-flutua 14s ease-in-out infinite;
}
.menu-fundo .mf-b {
  right: -80px;
  bottom: 8%;
  width: 240px;
  height: 220px;
  background: rgba(164, 120, 232, 0.26);
  animation: menu-flutua 14s ease-in-out -5s infinite;
}
.menu-fundo .mf-luz {
  left: 0;
  top: 0;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  background: radial-gradient(closest-side, rgba(33, 189, 239, 0.2), transparent);
  filter: none;
  translate: var(--lx, 180px) var(--ly, 40vh);
  opacity: 0.5;
  transition:
    translate 0.35s var(--saida),
    opacity 0.3s;
}
.menu-lateral.com-cursor .mf-luz {
  opacity: 1;
}
@keyframes menu-flutua {
  50% {
    transform: translate(-24px, 18px) scale(1.12);
  }
}

.menu-lateral svg {
  width: 200px;
  height: 100px;
}
.menu-lateral.aberto path {
  fill: rgba(255, 255, 255, 0.06);
  stroke: var(--ciano);
  stroke-width: 1px;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
}
.menu-lateral.aberto .olaTexto path {
  animation: textAnimation 2s 0.3s alternate forwards;
}
/* Desenha o contorno e preenche com a mesma cor dele (ciano da marca).
   O original preenchia de preto, que some no fundo escuro. */
@keyframes textAnimation {
  80% {
    fill: rgba(33, 189, 239, 0.2);
  }
  100% {
    fill: var(--ciano);
    stroke-dashoffset: 0;
  }
}

@media screen and (max-width: 480px) {
  .menu-lateral {
    width: 100%;
  }
}

/* Tela baixa (notebook com zoom, celular em paisagem): o painel compacta e, se
   ainda não couber, rola. O topo de 76px deixa livre o header (pausa e X). */
@media (max-height: 640px) {
  .menu-lateral {
    padding-top: 76px;
    padding-bottom: 24px;
  }
  .menu-lateral svg {
    width: 140px;
    height: 70px;
  }
  .menu-lateral p {
    margin: 10px 0 18px;
    font-size: 16px;
  }
  .menu-lateral nav {
    gap: 6px;
  }
}
@media (max-height: 460px) {
  /* só os três itens: o "Olá" e a pergunta são enfeite e comem 150px */
  .menu-lateral > svg.olaTexto,
  .menu-lateral > p {
    display: none;
  }
}

/* Trava a rolagem da página atrás do menu e dos modais (as páginas têm
   overflow-x:hidden no html/body, o que enfraquece o body.style.overflow do JS) */
html.trava-rolagem {
  overflow: hidden !important;
  overscroll-behavior: contain;
}

/* ───────── "Pausar o movimento" e "reduzir movimento" ───────── */
html.lf-pausado .menu-lateral *,
html.proj-pausado .menu-lateral * {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  /* sem giro, cascata, deriva nem inclinação: o painel só desliza, e o
     brilho e o foco continuam */
  .menu-lateral {
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .menu-lateral.aberto {
    transform: translateX(0);
  }
  .menu-lateral.aberto nav a,
  .menu-fundo .mf-a,
  .menu-fundo .mf-b,
  .menu-lateral.aberto .olaTexto path {
    animation: none;
  }
  .menu-lateral.aberto .olaTexto path {
    fill: var(--ciano);
    stroke-dashoffset: 0;
  }
  .menu-lateral nav a,
  .menu-lateral nav a img,
  .menu-anel circle {
    transition: none;
  }
  .menu-lateral nav a:hover img,
  .menu-lateral nav a:focus-visible img,
  .menu-lateral nav a.ativo img {
    scale: 1;
    translate: 0 0 0;
  }
}