/* =====================================================================
   JCE 2.0 — BASE
   Reset + chão do papel + granulação + seleção + cursor + véu.
   O DS original carregava o Tailwind só pelo "preflight"; os trechos
   dele que o visual usa estão reproduzidos aqui (sem Tailwind).
   ===================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;border:0 solid}
html{line-height:1.5;-webkit-text-size-adjust:100%;scroll-behavior:auto}
html,body{overflow-x:clip}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
ol,ul{list-style:none}
img,svg,video{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
[hidden]{display:none!important}

body{
  background:var(--bone);color:var(--ink);font-family:var(--arch);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--verm);color:var(--bone)}

/* ---------- utilitários de texto ---------- */
.mono{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.16em;text-transform:uppercase}
.vr{color:var(--verm)}
.tnum{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:1px solid var(--verm);outline-offset:4px}

/* ---------- granulação (filme) ---------- */
body::after{
  content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation:grain 7s steps(10) infinite;
}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}}

/* ---------- cursor: ponto que vira anel ---------- */
.cursor{position:fixed;z-index:99;top:0;left:0;width:8px;height:8px;border-radius:50%;
  background:var(--verm);pointer-events:none;transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),opacity .3s}
.cursor.is-link{width:42px;height:42px;background:transparent;border:1px solid var(--verm)}
@media(pointer:coarse){.cursor{display:none}}

/* ---------- véu: loader de entrada ---------- */
.veil{position:fixed;inset:0;z-index:80;background:var(--ink);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px}
.veil .mono{color:var(--t-mono-ink)}
.veil .mark{font-family:var(--arch);font-weight:900;font-size:clamp(20px,3vw,30px);
  letter-spacing:.04em;color:var(--bone);display:flex;align-items:center;gap:.6em}
.veil .mark svg{height:1.5em;width:auto}

/* ---------- movimento reduzido: tudo pousa no estado final ---------- */
@media(prefers-reduced-motion:reduce){
  .veil{display:none}
  body::after{animation:none}
}