/* ═══════════════════════════════════════════════════════════════════
   Cinescópio · base.css
   Tokens, fontes e reset. Os componentes vivem no site.css.
   Mudar uma cor ou um tamanho do site inteiro faz-se aqui e só aqui.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- Fontes (alojadas no site, subconjunto latin) ---------- */
@font-face{
  font-family:"Comfortaa";
  src:url("/fonts/comfortaa-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
/* Manrope é variável: um só ficheiro dá os pesos 400, 500 e 700. */
@font-face{
  font-family:"Manrope";
  src:url("/fonts/manrope-variavel.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"VT323";
  src:url("/fonts/vt323-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* ---------- Cor ---------- */
  --bg:#06070B;            /* fundo, preto do tubo */
  --bg-2:#0C0E15;          /* superfícies por cima do fundo */
  --bg-3:#141722;          /* superfícies elevadas, estados hover */
  --line:#1E2230;          /* filetes */
  --text:#EDEFF5;          /* texto principal, 17,5:1 sobre o --bg */
  --text-2:#9AA0AE;        /* texto secundário, 7,7:1 sobre o --bg (AA) */
  --yellow:#FFBB00;        /* destaque, o amarelo do site antigo e da estrela */
  --yellow-press:#B98500;  /* a "base" da tecla amarela, o lado que se vê por baixo */
  /* O azul do logótipo é um gradiente cromado, não uma cor só.
     Medido no PNG: #1068B0 no escuro, #28B0F8 no claro, dominante #18A0E8. */
  --blue:#18A0E8;
  --blue-light:#28B0F8;
  --blue-deep:#1068B0;

  /* ---------- Tipografia ---------- */
  --font-title:"Comfortaa", "Segoe UI", system-ui, sans-serif;
  --font-text:"Manrope", "Segoe UI", system-ui, sans-serif;
  --font-tv:"VT323", ui-monospace, "Consolas", monospace;

  /* Escala irregular de propósito: o salto entre o corpo e os títulos é
     grande, e os passos de baixo são próximos. Nada de 16/24/32/48. */
  --fs-micro:13px;
  --fs-small:14.5px;
  --fs-body:17px;
  --fs-lead:clamp(19px, 1.2vw + 13px, 23px);
  --fs-h3:clamp(22px, 1.1vw + 17px, 29px);
  --fs-h2:clamp(34px, 3.6vw + 16px, 62px);
  --fs-display:clamp(44px, 7vw + 14px, 112px);
  /* A VT323 é uma fonte de píxeis com olho pequeno: precisa de mais corpo
     do que a Manrope para se ler ao mesmo tamanho aparente. */
  --fs-tv:19px;
  --fs-tv-big:23px;

  --lh-tight:1.08;
  --lh-text:1.62;

  /* ---------- Espaço ---------- */
  /* Também irregular: cada passo é ~1,6x o anterior, arredondado à mão. */
  --sp-1:6px;
  --sp-2:10px;
  --sp-3:17px;
  --sp-4:28px;
  --sp-5:46px;
  --sp-6:74px;
  --sp-7:118px;
  /* Margem lateral da página. É também o recuo do ecrã do hero. */
  --gutter:clamp(16px, 2.6vw, 40px);
  --max:1360px;

  /* ---------- Raios ---------- */
  --r-sm:5px;
  --r-md:12px;
  --r-lg:22px;

  /* ---------- Textura ---------- */
  /* Grão estático em SVG, branco a 4% de opacidade. Pesa 400 bytes. */
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* ---------- Navbar ---------- */
  --nav-h:72px;

  /* ---------- Movimento ---------- */
  --ease-out:cubic-bezier(.16, 1, .3, 1);
  --ease-tv:cubic-bezier(.7, 0, .2, 1);
  --t-fast:160ms;
  --t-mid:320ms;
  --t-slow:560ms;
}

@media (max-width:860px){
  :root{ --nav-h:62px; }
}

/* ---------- Reset ---------- */
*,
*::before,
*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

/* Sem o retângulo azul que o Android e o iPhone pintam por cima de tudo o
   que se toca. O contorno amarelo de :focus-visible continua para quem usa
   teclado. */
html{ -webkit-tap-highlight-color:transparent; }
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  /* As âncoras param por baixo da navbar fixa, não atrás dela. */
  scroll-padding-top:calc(var(--nav-h) + var(--sp-3));
  color-scheme:dark;
}

body{
  min-height:100svh;
  background-color:var(--bg);
  color:var(--text);
  font-family:var(--font-text);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:var(--lh-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Textura do fundo: o grão vem do token --grao, aplicado ao body, à navbar
   e ao menu. Assim a navbar sólida tem exatamente a mesma textura da página
   e não aparece como uma faixa mais escura. */
body{ background-image:var(--grao); }

img, video, svg, iframe{ display:block; max-width:100%; }
img, video{ height:auto; }
button, input, select, textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul[role="list"], ol[role="list"]{ list-style:none; }

h1, h2, h3{
  font-family:var(--font-title);
  font-weight:700;
  line-height:var(--lh-tight);
  /* A Comfortaa é larga e redonda; um pouco de aperto segura os títulos. */
  letter-spacing:-.015em;
  text-wrap:balance;
}
p{ text-wrap:pretty; }

::selection{ background:var(--yellow); color:var(--bg); }

:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* Texto só para leitores de ecrã. */
.sr{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap;
}

/* Ligação "saltar para o conteúdo": invisível até receber foco pelo teclado. */
.saltar{
  position:fixed; left:var(--gutter); top:var(--sp-2); z-index:200;
  padding:var(--sp-2) var(--sp-3);
  background:var(--yellow); color:var(--bg);
  font-weight:700; border-radius:var(--r-sm);
  transform:translateY(-160%);
  transition:transform var(--t-fast) var(--ease-out);
}
.saltar:focus-visible{ transform:none; }

/* Navegar entre páginas do site (incluindo trocar PT/EN) faz um desvanecimento
   curto em vez de um corte: como a navbar e a estrutura são iguais, na troca
   de idioma só se vê o texto a mudar. Browsers sem suporte ignoram isto. */
@view-transition{ navigation:auto; }
::view-transition-old(root),
::view-transition-new(root){ animation-duration:220ms; }

/* Com reduced-motion o brief pede transições simples, não nenhuma: por isso
   não há aqui um "desliga tudo". Cada componente troca o seu efeito (CRT,
   estática, rotações) por um fade no site.css. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none; }
}