/* =================================================================
   KIZURI STUDIO — COMPONENTS
   -----------------------------------------------------------------
   Átomos de interface que QUALQUER página da marca usa ou pode usar.
   Este é o arquivo que a home, o site de builds e o painel admin
   importam em comum.

   Regra para saber se algo entra aqui:
     · é usado por mais de um site?            → sim, entra
     · é só da home?                           → home-ui.css ou sections.css
     · é só do site de builds?                 → builds.css
     · é só do admin?                          → admin.css

   Hoje: quatro peças. É pouco de propósito — arquivo compartilhado
   inchado de coisa que ninguém compartilha não é compartilhado, é
   lixo comum.

   Depende de: tokens.css, base.css
   ================================================================= */

/* ================= GRÃO DE FILME ================= */
/* Sobreposto a tudo, em ambos os sites. */
.grain{
  position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.07;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ================= MARCA ================= */
.mark{
  font-weight:800;font-size:17px;letter-spacing:-.02em;line-height:1;
  white-space:nowrap;
}
.mark sup{font-size:7px;vertical-align:super;margin-left:1px;opacity:.6}

/* ================= BOTÃO ================= */
/* Preenchimento que sobe no hover. Usado pela home e pelas páginas
   de erro; o admin também usa. O site de builds tem o seu próprio
   (.dl-btn) para download, porque ali a hierarquia é outra. */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:20px 22px;
  border:1px solid var(--line);background:transparent;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  overflow:hidden;will-change:transform;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:0;background:var(--acid);
  transform:translateY(102%);transition:transform .5s var(--ease);
}
.btn>span{position:relative;z-index:1}
.btn:hover,.btn:focus-visible{color:var(--acid-ink);border-color:var(--acid)}
.btn:hover::before{transform:translateY(0)}
.btn.solid{border-color:var(--acid);background:var(--acid);color:var(--acid-ink)}
.btn.solid::before{background:var(--acid-ink)}
.btn.solid:hover{color:var(--acid)}
@media (min-width:620px){
  .btn{width:auto;justify-content:flex-start}
  .btn>span.b{flex:0 0 auto}
}

/* ================= PÁGINA NÃO ENCONTRADA =================
   Existe nos DOIS sites, por isso mora aqui. A estrutura é a mesma;
   o que muda entre eles é o fundo e o texto, que cada página declara.
   ----------------------------------------------------------------- */
.nf{
  position:relative;z-index:var(--z-content);
  min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(90px,16vh,150px) var(--gut) clamp(60px,10vh,110px);
}

/* O número gigante atrás do texto. É contorno vazado, não
   preenchimento, para não competir com o título de verdade. */
.nf-ghost{
  position:absolute;right:-3vw;top:50%;transform:translateY(-50%);
  z-index:0;pointer-events:none;user-select:none;
  font-weight:900;letter-spacing:-.07em;line-height:.78;
  font-size:clamp(13rem,40vw,32rem);
  color:transparent;
  -webkit-text-stroke:1.5px color-mix(in oklab, var(--ink) 13%, transparent);
  text-stroke:1.5px color-mix(in oklab, var(--ink) 13%, transparent);
}

.nf-in{position:relative;z-index:1;max-width:1000px}

.nf-k{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:clamp(20px,4vh,32px);
}
.nf-k::before{content:"";width:26px;height:1px;background:var(--acid)}

.nf-h{
  font-weight:800;letter-spacing:-.05em;line-height:.9;
  font-size:clamp(2.1rem,10vw,6.2rem);text-transform:uppercase;
  max-width:14ch;
}
.nf-h b{display:block;color:var(--acid);font-weight:800}
.nf-h em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:-.02em;color:var(--acid);
}

.nf-p{
  margin-top:clamp(18px,3vh,28px);
  color:var(--dim);font-size:clamp(.92rem,3.2vw,1.1rem);
  line-height:1.65;max-width:52ch;
}
.nf-p code{
  font-family:var(--mono);font-size:.86em;
  background:rgba(255,255,255,.07);padding:2px 6px;
  word-break:break-all;
}

.nf-acts{
  display:flex;flex-direction:column;gap:12px;
  margin-top:clamp(28px,5vh,44px);
}
@media (min-width:620px){
  .nf-acts{flex-direction:row;flex-wrap:wrap}
}

.nf-foot{
  margin-top:clamp(40px,8vh,80px);padding-top:20px;
  border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
}
.nf-foot a{border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.nf-foot a:hover{border-color:var(--acid)}