/* ==========================================================================
   ESTILOS COMPARTILHADOS — home (/) e /projetos
   Variáveis de cor, reset, animações de entrada, cursor customizado e rodapé.
   Cada página ainda define --col-w e os estilos específicos de layout no
   próprio <style> (hero, link-cards, grid etc.) logo depois deste arquivo.
   ========================================================================== */
:root{
  --bg:            #04060C;
  --bg-elevated:   #0B0F1C;
  --white:         #FFFFFF;
  --ink-muted:     #A6ACC6;
  --ink-faint:     #8A90AD;
  --blue-1:        #6E8CFF;
  --blue-2:        #2F4CF0;
  --blue-3:        #0B1690;
  --blue-soft:     #91A8FF;
  --line:          rgba(255,255,255,0.09);
  --line-strong:   rgba(255,255,255,0.18);

  --font-display: 'Google Sans', sans-serif;
  --font-serif:   'Raleway', sans-serif;
  --font-body:    'Raleway', sans-serif;

  --col-w: 560px;

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

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

@view-transition{
  navigation: auto;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

h1, h2{ margin: 0; }
p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
button{ font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }

::selection{ background: var(--blue-2); color: var(--white); }
:focus-visible{ outline: 2px solid var(--blue-soft); outline-offset: 3px; border-radius: 4px; }
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 8px; }

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   ANIMAÇÕES DE ENTRADA (scroll reveal)
   Padrão: fade + translate sutil. [data-reveal-pop] soma um scale discreto
   para elementos "objeto" (cards, botões) — nunca em blocos de texto.
   ========================================================================== */
[data-reveal]{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-visible{
  opacity: 1;
  transform: none;
}
[data-reveal][data-reveal-pop]{
  transform: translateY(10px) scale(0.965);
}
[data-reveal][data-reveal-pop].is-visible{
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   PAGE / SHELL
   ========================================================================== */
.page{
  position: relative;
  max-width: var(--col-w);
  margin-inline: auto;
  padding: clamp(1rem, 3.5vw, 1.5rem) 1.5rem clamp(3rem, 6vw, 4rem);
}

/* ==========================================================================
   FUNDO AMBIENTE — camada fixa com dois brilhos desfocados que derivam
   lentamente, usada nas três páginas para dar profundidade ao fundo.
   Basta incluir <div class="bg-glow" aria-hidden="true"></div> logo após
   a tag <body>; o resto (posição, cor, animação) é resolvido aqui.
   ========================================================================== */
.bg-glow{
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.bg-glow::before,
.bg-glow::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.bg-glow::before{
  width: min(58vw, 620px);
  height: min(58vw, 620px);
  top: -18%;
  left: -14%;
  background: radial-gradient(circle, rgba(47,76,240,0.42), transparent 70%);
  animation: bg-glow-a 26s var(--ease) infinite alternate;
}
.bg-glow::after{
  width: min(44vw, 480px);
  height: min(44vw, 480px);
  bottom: -18%;
  right: -10%;
  background: radial-gradient(circle, rgba(110,140,255,0.38), transparent 70%);
  animation: bg-glow-b 30s var(--ease) infinite alternate;
}
@keyframes bg-glow-a{
  from{ transform: translate(0, 0) scale(1); }
  to{ transform: translate(5%, 6%) scale(1.1); }
}
@keyframes bg-glow-b{
  from{ transform: translate(0, 0) scale(1); }
  to{ transform: translate(-8%, -8%) scale(1.12); }
}
@media (max-width: 640px){
  .bg-glow::before, .bg-glow::after{ filter: blur(60px); }
}

/* ==========================================================================
   CURSOR INTERATIVO — PROJETOS
   ========================================================================== */
.cursor-dot{
  position: fixed;
  top: 0;
  left: 0;
  height: 8px;
  width: 8px;
  border-radius: 999px;
  background: rgba(145,168,255,0.55);
  box-shadow: 0 0 0 3px rgba(110,140,255,0.14), 0 0 14px 2px rgba(110,140,255,0.32);
  pointer-events: none;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: translate(-50%, -50%);
  transition:
    width 0.5s var(--ease-out),
    height 0.5s var(--ease-out),
    background-color 0.4s ease,
    box-shadow 0.4s ease,
    opacity 0.3s ease;
  will-change: transform, width, height;
}
.cursor-dot__label{
  opacity: 0;
  transform: translateX(6px);
  padding: 0 0.85rem;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--blue-3);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: opacity 0.3s ease 0.12s, transform 0.35s var(--ease-out) 0.12s;
}
.cursor-dot__label svg{ width: 10px; height: 10px; flex-shrink: 0; }
.cursor-dot.is-active{
  width: 112px;
  height: 34px;
  background: var(--white);
  box-shadow: 0 16px 36px -10px rgba(8,14,90,0.5), 0 2px 10px rgba(8,14,90,0.18);
}
.cursor-dot.is-active .cursor-dot__label{
  opacity: 1;
  transform: translateX(0);
}
.cursor-dot.is-hover{
  width: 15px;
  height: 15px;
  background: var(--white);
  box-shadow: 0 0 0 6px rgba(110,140,255,0.16), 0 0 22px 3px rgba(110,140,255,0.38);
}
@media (hover: none), (pointer: coarse){
  .cursor-dot{ display: none !important; }
}

/* ==========================================================================
   BACK LINK — botão "Voltar" usado em /projetos e /termos-de-uso
   ========================================================================== */
.back-link{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: -0.7rem;
  padding: 0.55rem 0.95rem 0.55rem 0.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.02);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-muted);
  transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.back-link:hover{
  color: var(--white);
  background: rgba(110,140,255,0.09);
  border-color: var(--line);
}
.back-link:active{ transform: scale(0.97); transition-duration: 0.15s; }
.back-link svg{ width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.25s var(--ease); }
.back-link:hover svg{ transform: translateX(-3px); }
@media (max-width: 480px){
  .back-link{ padding: 0.6rem 1rem 0.6rem 0.75rem; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  margin-top: clamp(3.25rem, 7.5vw, 4.25rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding-top: 2.1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer__meta{
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-muted);
}
.footer__credit{
  font-size: 0.76rem;
  color: var(--ink-faint);
}
.footer__dot{
  margin: 0 0.4rem;
  color: var(--ink-faint);
}
.footer__link{
  color: var(--ink-muted);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.25);
  text-underline-offset: 3px;
  transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}
.footer__link:hover{
  color: var(--white);
  text-decoration-color: var(--blue-soft);
}

/* ==========================================================================
   PROTEÇÃO DE IMAGENS
   ========================================================================== */
img{
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none; /* evita o menu de "salvar imagem" no long-press do iOS/Safari */
}
