/* ═══════════════════════════════════════════════════════════════════════════
   SERRADINHA RUST SERVER [SRS] · 01-base
   Hardside · 2026-08-22

   ── DIRECÇÃO DE ARTE: as palavras são DELE ─────────────────────────────────
   O briefing é do 10100, a 2026-08-22. Palavras dele, por esta ordem:

       «verde? matrix?»
       «vês os tons do site atual? laranja, amarelo, ferrugem...?»
       «o logo SRS»
       «cores do rust!»
       «velho, usado, descontinuado, sucata»

   ⇒ A última linha é o briefing, e é melhor do que «laranja»: o que ele quer
     é CHAPA GASTA. Metal oxidado, stencil comido, poeira, riscos. Não é um
     site escuro com um acento laranja — é uma coisa que parece ter estado
     à chuva. Daí as camadas de desgaste no fim desta folha.

   ❌ MORREU aqui uma versão verde/matrix, por ordem dele. Não ressuscitar.
   ❌ E continua a valer o que já valia: nada de cantos redondos gordos,
      vidro fosco, gradientes de duas cores, texto com gradiente.

   ── CONTRASTE, MEDIDO CONTRA ESTE FUNDO (#0d0a08) ─────────────────────────
   ⚠️ Com laranja os números INVERTEM-SE em relação ao verde. Fica escrito
      porque é erro fácil de repetir:

       #cd412a (a marca)     4,12:1  ❌ CHUMBA como texto de corpo
       #f2664a (o irmão)     6,37:1  ✅ é ESTE que se usa para escrever
       #e9dfd0 (osso)       14,98:1  ✅
       #a89a8b (osso-2)      7,20:1  ✅
       #756a5e (osso-3)      3,74:1  ⚠️ só etiquetas grandes e linhas

     E sobre o laranja CHEIO ganha o BRANCO (4,79:1); o preto dava 4,39:1
     e chumbava. É o contrário do que acontecia no tema verde.

   ⇒ Por isso há DOIS laranjas: `--ferrugem` para preencher e limitar,
     `--ferrugem-txt` para tudo o que sejam letras. Trocá-los parte a
     acessibilidade sem dar erro nenhum.

   Regras da casa que esta folha cumpre:
   · zero recursos de terceiros (sem Google Fonts, sem CDN) — é RGPD
   · contraste MEDIDO contra o fundo, nunca estimado
   · tudo o que anima tem travão em prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────── tipos de letra: locais, licença OFL ─────────── */
@font-face{font-family:"Sora";src:url(../img/sora-var-latin.woff2) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Inter";src:url(../img/inter-var-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JBMono";src:url(../img/jetbrains-mono-var-latin.woff2) format("woff2");font-weight:100 800;font-display:swap}
/* 11/09 — a fonte do título do cartaz, pedida pelo 10100: «o tipo de letra
   do logo». Black Ops One é a stencil militar que mais se aproxima do logo
   SRS (OFL, local). Só se usa no título, mais nada. */
@font-face{font-family:"BlackOps";src:url(../img/black-ops-one.woff2) format("woff2");font-weight:400;font-display:swap}
/* 11/09 — a fonte «Rust» do dafont (Ben Kohan), pedida pelo 10100 para o
   título inicial. O dono confirmou que o servidor não é comercial, por isso
   aplica-se. Só no título, mais nada. */
@font-face{font-family:"Rust";src:url(../img/rust.ttf) format("truetype");font-weight:400;font-display:swap}

/* ═══════════════════════ 1. TOKENS ═══════════════════════
   TODA a cor do site sai daqui. Trocar o tema é trocar este bloco. */
:root{
  /* castanhos queimados, nunca pretos neutros. Um preto puro ao lado de
     ferrugem lê-se azulado e frio — e «velho e usado» é quente. */
  --fundo:#0d0a08;
  --fundo-2:#110d0a;
  --tinta:#171210;      /* chapa */
  --tinta-2:#1e1815;
  --tinta-3:#2a211b;

  /* linhas: sujas de ferrugem, não brancas */
  --linha:#cd412a1c;
  --linha-2:#cd412a30;
  --linha-3:#cd412a4d;
  --linha-4:#cd412a75;

  /* o laranja DELES, tirado do logo SRS */
  --ferrugem:#cd412a;         /* 4,12:1 — PREENCHER e LIMITAR, nunca escrever */
  --ferrugem-txt:#f2664a;     /* 6,37:1 — é este que faz letras */
  --ferrugem-claro:#ff9a7d;
  --ferrugem-fraco:#cd412a1c;
  --ferrugem-medio:#cd412a42;
  --ferrugem-morta:#7a4433;   /* oxidado e apagado: o que já não está vivo */
  --sobre-ferrugem:#ffffff;   /* BRANCO sobre o laranja cheio — 4,79:1, medido */

  /* o amarelo que ele pediu: filamento de lâmpada velha.
     É a 2.ª cor, e só aparece no que está ACESO (estado, consola). */
  --amarelo:#e8a33d;          /* 8,9:1 */
  --amarelo-fraco:#e8a33d1c;
  --amarelo-medio:#e8a33d42;

  /* 11/09 — o verde do estado, pedido do 10100: «tem de ser verde, que quer
     dizer que teve sucesso». Só o indicador de estado (A2S + ponto a pulsar).
     Não é o verde/matrix que ele chumbou no início — é só o sinal de online. */
  --verde:#3ddc84;
  --verde-fraco:#3ddc841c;
  --verde-medio:#3ddc8442;

  /* texto: osso, nunca branco puro */
  --osso:#e9dfd0;
  --osso-2:#a89a8b;
  --osso-3:#756a5e;

  /* forma: CANTO VIVO. 2px é o máximo que esta marca leva. */
  --raio:2px;
  --topo:80px;

  --display:"Sora","Inter",system-ui,sans-serif;
  --corpo:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JBMono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  --mola:cubic-bezier(.2,1,.3,1);
  --seco:cubic-bezier(.36,0,.06,1);

  --largura:1280px;
  --gutter:clamp(16px,4vw,48px);

  /* brasa: o único brilho do site, e é quente */
  --halo:0 0 14px #cd412a45;
  --halo-forte:0 0 26px #cd412a6b, 0 0 60px #cd412a2b;

  /* ── a corrosão, gerada por código ──
     🔴 NÃO usar img/textura.jpg para isto: é uma FOTOGRAFIA com o
     logótipo RUST estampado, e ladrilhá-la punha a marca da Facepunch a
     repetir-se pelo site todo — problema de marca, além de feio.
     Isto é feTurbulence de baixa frequência (manchas grandes = corrosão,
     não granulado) já tingido de óxido, com o próprio ruído a decidir a
     transparência. Ladrilha sem emenda, não pesa nada, e não é de ninguém. */
  --chapa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.03' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.95 0.35 0.10 0 0 0.42 0.22 0.06 0 0 0.20 0.10 0.04 0 0 0 0 0 0.85 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* ═══════════════════════ 2. BASE ═══════════════════════ */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--topo) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--fundo);
  color:var(--osso);
  font-family:var(--corpo);
  font-size:16px;
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body[data-travado]{overflow:hidden}

img,video,canvas,svg{max-width:100%;display:block}

a{color:var(--ferrugem-txt);text-decoration:none}
a:not(.bt):not(.marca):not(.rolar){
  border-bottom:1px solid var(--ferrugem-medio);
  transition:border-color .2s,color .2s;
}
a:not(.bt):not(.marca):not(.rolar):hover{
  border-bottom-color:var(--ferrugem);
  color:var(--ferrugem-claro);
}

button,input{font:inherit;color:inherit}

::selection{background:var(--ferrugem);color:var(--sobre-ferrugem)}

:focus-visible{
  outline:2px solid var(--ferrugem-claro);
  outline-offset:2px;
  border-radius:0;
}

/* barra de scroll a condizer — chapa oxidada */
*{scrollbar-width:thin;scrollbar-color:var(--ferrugem-morta) var(--fundo)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--fundo)}
::-webkit-scrollbar-thumb{background:var(--ferrugem-morta);border:2px solid var(--fundo)}
::-webkit-scrollbar-thumb:hover{background:var(--ferrugem)}

/* ═══════════════════════ 3. TIPOGRAFIA ═══════════════════════ */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1;
  margin:0;
  letter-spacing:-.035em;
}

.h-cartaz{
  font-family:"Rust","BlackOps",var(--display);
  font-size:clamp(2.4rem,7.6vw,6rem);
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.95;
}
/* 11/09 — o título passou a IMAGEM (fonte Rust do dafont, que não pode ser
   webfont). Duas imagens (PT/EN), trocadas pelo JS. Perde-se o piscar do
   reclame — foi o que o 10100 aceitou («perdia o piscar apenas»). */
.h-cartaz img{
  /* 11/09 — altura, não largura: as duas imagens do título têm a MESMA
     altura nativa (356 px), por isso dimensionar pela altura faz as letras
     ficarem do mesmo tamanho em PT e EN (antes, a EN ficava maior). */
  height:clamp(73px,14.6vw,188px);
  width:auto;
  display:block;
}
/* em ecrãs baixos o título tem de ceder, senão empurra o endereço
   (que é a única coisa que um jogador vem cá buscar) para fora do ecrã */
@media (max-height:820px){ .h-cartaz{font-size:clamp(2.2rem,5.6vw,4.4rem)} .h-cartaz img{height:clamp(63px,12vw,146px)} }
@media (max-height:680px){ .h-cartaz{font-size:clamp(2rem,4.6vw,3.4rem)} .h-cartaz img{height:clamp(52px,10vw,115px)} }

.h-secao{
  font-size:clamp(2rem,4.6vw,3.4rem);
  text-transform:uppercase;
  letter-spacing:-.04em;
  line-height:.95;
}
.h-cartao{font-size:1.02rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}

.lead{
  font-size:clamp(1rem,1.45vw,1.14rem);
  color:var(--osso-2);
  max-width:60ch;
  line-height:1.68;
  margin:0;
}

.etiq{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--osso-3);
}

.mono{font-family:var(--mono);font-variant-ligatures:none}
.num{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}

/* ═══════════════════════ 4. ESTRUTURA ═══════════════════════ */
.envelope{
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.secao{padding-block:clamp(72px,10vw,132px);position:relative}

.secao-cabeca{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(18px,3.4vw,40px);
  align-items:start;
  margin-bottom:clamp(36px,5vw,58px);
  padding-bottom:26px;
  border-bottom:1px solid var(--linha-2);
}
/* número a stencil, vazado — como o que se pinta à pistola num caixote */
.secao-num{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.6rem,6.4vw,5rem);
  line-height:.8;
  letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:1.5px var(--ferrugem-medio);
  user-select:none;
  padding-top:.06em;
}
.secao-texto{min-width:0;max-width:66ch}
.secao-texto .etiq{display:block;margin-bottom:12px;color:var(--ferrugem-txt)}
.secao-texto .h-secao{margin-bottom:.42em}

/* ═══════════════════════ 5. GRELHA DE FUNDO ═══════════════════════ */
.grelha{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  display:flex;
  justify-content:center;
}
.grelha i{
  width:100%;
  max-width:var(--largura);
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.grelha i span{border-left:1px solid #cd412a0f}
@media (max-width:820px){.grelha{display:none}}

/* ═══════════════════════ 6. CAMADAS DE DESGASTE ═══════════════════════
   «velho, usado, descontinuado, sucata» — as palavras dele.
   São TRÊS camadas fixas por cima de tudo, todas leves. O truque é que
   nenhuma se nota sozinha: notava-se se as tirasses. */

/* 6.1 grão de película */
.grao{
  position:fixed;inset:0;z-index:70;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:190px 190px;
  animation:grao-tremer 6s steps(5) infinite;
}
@keyframes grao-tremer{
  0%{transform:translate(0,0)}    20%{transform:translate(-2%,2%)}
  40%{transform:translate(2%,-2%)}60%{transform:translate(-2%,-1%)}
  80%{transform:translate(1%,2%)} 100%{transform:translate(0,0)}
}

/* 6.2 riscos: chapa que já levou pancada.
   Substituiu as linhas de varrimento do CRT — essas eram do tema matrix
   e liam-se como ecrã, não como metal. */
.riscos{
  position:fixed;inset:0;z-index:69;pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700'%3E%3Cg stroke='%23ffffff' stroke-opacity='0.05' stroke-width='0.6' fill='none'%3E%3Cpath d='M-20 130 L940 96'/%3E%3Cpath d='M-20 131 L940 98'/%3E%3Cpath d='M-20 402 L940 447'/%3E%3Cpath d='M120 -20 L96 720'/%3E%3Cpath d='M700 -20 L742 720'/%3E%3Cpath d='M-20 610 L940 588'/%3E%3C/g%3E%3Cg stroke='%23000000' stroke-opacity='0.16' stroke-width='0.8' fill='none'%3E%3Cpath d='M-20 133 L940 100'/%3E%3Cpath d='M-20 404 L940 449'/%3E%3Cpath d='M122 -20 L98 720'/%3E%3C/g%3E%3C/svg%3E");
  background-size:900px 700px;
}

/* 6.3 poeira: um halo quente e sujo, fixo.
   Era o «tubo» verde do CRT; aqui é pó ao sol da tarde. */
.poeira{
  position:fixed;inset:0;z-index:68;pointer-events:none;
  background:
    radial-gradient(130% 90% at 50% 8%,#cd412a12,transparent 62%),
    radial-gradient(90% 70% at 88% 96%,#e8a33d0d,transparent 60%);
}

/* ═══════════════════════ 7. ACESSIBILIDADE ═══════════════════════ */
.saltar{
  position:absolute;left:-9999px;top:8px;z-index:200;
  background:var(--ferrugem);
  color:var(--sobre-ferrugem);
  padding:12px 20px;
  font-weight:700;
}
.saltar:focus{left:12px}

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

/* ═══════════════════════ 8. TRAVÃO DE MOVIMENTO ═══════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .grao{animation:none}
}