/* Identidade Nexas Pro por cima da base de tatuador.
   Tudo o que e da marca fica aqui: cor, fontes, gotas e ajustes de texto.
   Fontes parecidas com as dos posts: Tenor Sans (titulos elegantes),
   Josefin Sans (texto corrido e caixa alta espacada) e Archivo Black com
   granulado (titulos "grunge" dos posts de fechamento). */

:root{
  --acento:227 38 47;
  --acento-escuro:120 10 16;
  --acento-vivo:242 58 64;
  --acento-claro:255 92 98;
  --breu:#0b0606;
  --texto:"Josefin Sans",sans-serif;
  --serifa:"Josefin Sans",sans-serif;
  --elegante:"Tenor Sans","Josefin Sans",sans-serif;
  --grunge:"Archivo Black","Arial Black",sans-serif;
}
body{font-weight:400}

/* ---------- topo: "NEXAS" branco, "PRO" vermelho ---------- */
.marca-nome{font-family:var(--elegante);font-stretch:normal;font-weight:400;font-size:1.05rem;letter-spacing:.12em}
.marca-nome span{color:rgb(var(--acento))}
.marca-logo{aspect-ratio:1}
.menu{font-family:var(--serifa);font-stretch:normal;font-weight:600;font-size:.78rem;letter-spacing:.26em}

/* ---------- titulos ---------- */
.tit__nome{font-family:var(--grunge);font-weight:400;letter-spacing:0;line-height:.92;
  font-size:min(13cqw,calc(86cqw / var(--n,8) / .78));
  background:linear-gradient(#ffffff 15%,#e4e4e4 55%,#a7a7a7 95%);-webkit-background-clip:text;background-clip:text}
.tit__sub,.tit__tags,.tit__local{font-family:var(--serifa);font-weight:600;color:#ece6e6}
.tit__sub::before{background:linear-gradient(to left,rgb(var(--acento)),transparent)}
.tit__sub::after{background:linear-gradient(to right,rgb(var(--acento)),transparent)}
.tit__marca{aspect-ratio:1;width:9cqw}

/* inicio: o titulo elegante do primeiro post */
.tit--hero .tit__nome{font-family:var(--elegante);letter-spacing:.02em;line-height:1;
  font-size:min(12cqw,calc(92cqw / var(--n,8) / .66));
  background:linear-gradient(#ffffff 20%,#f1e9e9 60%,#c9b9b9);-webkit-background-clip:text;background-clip:text;
  -webkit-mask:none;mask:none}
.tit--hero .tit__sub{font-weight:600;letter-spacing:.3em;text-indent:.3em;font-size:2.7cqw}
.tit__local svg{display:none}
.tit__local{font-weight:400;letter-spacing:.32em;font-size:2.2cqw}

/* ---------- botoes: texto na fonte da marca ---------- */
.arte-texto{font-family:var(--serifa);font-weight:700;letter-spacing:.2em;padding-top:.15em}
.derrubar .arte-texto{font-family:var(--grunge);font-style:normal;font-weight:400;letter-spacing:.04em;font-size:1em}
.rever .arte-texto{font-weight:700}

/* ---------- manifesto (secao Sobre) ---------- */
.sm-sobre{font-family:var(--texto)}
.sm-painel h2{font-family:var(--elegante);font-weight:400;letter-spacing:.08em}
.sm-painel p{font-weight:400;line-height:1.7}
.sm-painel strong{font-weight:700}
.sm-painel .sm-mais{margin-top:1.1em;font-family:var(--elegante);font-size:clamp(1.05rem,1.5vw,1.45rem);line-height:1.35;color:#fff}
.sm-painel .sm-mais strong{color:rgb(var(--acento))}
.sm-selinho,.sm-brasao{aspect-ratio:1}
.lema span{font-family:var(--grunge);font-style:normal;
  background:linear-gradient(#fff 20%,#dcdcdc 70%,#a5a5a5);-webkit-background-clip:text;background-clip:text}
.lema .lema__pre{font-family:var(--elegante);font-size:7.4cqw;white-space:nowrap}
.lema .lema__estilos{font-size:min(14cqw,calc(96cqw / var(--n,12) / .62))}

/* ---------- produtos ---------- */
.pf-arquivo{font-family:var(--serifa);font-weight:700;letter-spacing:.22em}

/* ---------- valores (cards da secao de depoimentos) ---------- */
.dp-depo{--serif:"Josefin Sans",sans-serif;--caps:"Josefin Sans",sans-serif}
.dp-quote{font-family:var(--elegante);font-weight:400;line-height:1.3}
.dp-who{font-weight:700;color:rgb(var(--acento-claro))}
.dp-card-marca{aspect-ratio:1;width:8%}
.dp-hint-mark{aspect-ratio:1;width:20px}

/* ---------- redes ---------- */
.rs{--rs-font:"Josefin Sans",sans-serif}
.rs-card__nome{font-family:var(--grunge);font-weight:400;font-size:12cqw}
.rs-card__vertical{font-weight:700}
.rs-headline{font-family:var(--elegante);font-weight:400;letter-spacing:.02em}
.rodape__marca{aspect-ratio:1}

/* ---------- gotas vermelhas (a assinatura grafica dos posts) ---------- */
.gotas{position:absolute;z-index:2;display:flex;align-items:flex-end;gap:clamp(8px,1.3vw,22px);pointer-events:none}
.gotas i{display:block;flex:none;width:var(--w,46px);height:var(--h,150px);
  border-radius:50% 50% 46% 46% / 34% 34% 66% 66%;
  background:
    var(--ruido),
    radial-gradient(70% 40% at 40% 22%,rgb(255 120 120 / .35),transparent 70%),
    linear-gradient(180deg,rgb(var(--acento-vivo)),rgb(var(--acento)) 45%,rgb(var(--acento-escuro)) 100%);
  box-shadow:0 0 30px rgb(var(--acento) / .35);
  opacity:.9;transform-origin:50% 100%;
  animation:gota-sobe var(--t,7s) ease-in-out var(--a,0s) infinite alternate}
.gotas i:nth-child(1){--w:clamp(24px,2.6vw,46px);--h:clamp(90px,11vw,190px);--t:6.4s}
.gotas i:nth-child(2){--w:clamp(30px,3.4vw,60px);--h:clamp(130px,16vw,280px);--t:7.8s;--a:-2s}
.gotas i:nth-child(3){--w:clamp(22px,2.2vw,40px);--h:clamp(70px,8vw,140px);--t:6.9s;--a:-4s}
.gotas i:nth-child(4){--w:clamp(28px,3vw,52px);--h:clamp(110px,13vw,230px);--t:8.4s;--a:-1s}
.gotas i:nth-child(5){--w:clamp(18px,1.8vw,32px);--h:clamp(60px,6vw,110px);--t:7.2s;--a:-3s}
@keyframes gota-sobe{from{transform:translateY(18%) scaleY(.94)}to{transform:translateY(4%) scaleY(1.04)}}
.gotas--hero{left:clamp(12px,3vw,48px);bottom:0;opacity:.85}
.gotas--sobre{right:clamp(12px,4vw,64px);bottom:0;z-index:0;opacity:.75}
@media (max-width:760px){
  .gotas--hero{opacity:.45}
  .gotas--sobre{opacity:.35}
}
@media (prefers-reduced-motion:reduce){.gotas i{animation:none}}

/* poeira e faiscas da queda puxadas para o vermelho e escuro (eram bege) */
.particulas{filter:sepia(1) hue-rotate(-45deg) saturate(2.6) brightness(.62)}
.poeira{filter:sepia(1) hue-rotate(-45deg) saturate(2.2) brightness(.45)}

/* a "foto" do Manifesto e dos cards de contato e a logo (150x150): contida,
   sobre preto, para nao esticar alem do tamanho em que ainda fica nitida */
.sm-janela{background:#000}
.sm-janela #sm-foto{object-fit:contain;object-position:center;padding:14%;background:#000}
.rs-card__photo{object-fit:contain;object-position:center;padding:6%}

/* ---------- inicio: as costas e a maquina (js/hero-costas.js) ---------- */
.palco{background:radial-gradient(120% 90% at 50% 38%,#3a0a0c 0%,#1a0506 55%,#070202 100%)}
.fundo,.moldura,.muralha,.poeira,.figuras{display:none}
/* a mascara de esfumado fica nas imagens, nao no conteiner: senao cortaria a maquina */
.costas{position:absolute;left:-9%;width:118%;top:6%;aspect-ratio:1752/509;cursor:pointer}
/* granulado de filme por cima: disfarca a pouca resolucao da arte */
.costas::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.55;mix-blend-mode:overlay;
  background:var(--ruido);background-size:180px;
  -webkit-mask:linear-gradient(transparent,#000 9%,#000 76%,transparent);mask:linear-gradient(transparent,#000 9%,#000 76%,transparent)}
.costas__tinta,.costas__fx{z-index:1}
.maquina{z-index:3}
.costas__antes,.costas__tinta,.costas__fx{position:absolute;inset:0;width:100%;height:100%;display:block}
.costas__antes,.costas__tinta{-webkit-mask:linear-gradient(transparent,#000 9%,#000 76%,transparent);mask:linear-gradient(transparent,#000 9%,#000 76%,transparent)}
.costas__fx{pointer-events:none}
.maquina{position:absolute;left:108%;top:-35%;height:78%;aspect-ratio:60/300;transform-origin:50% 100%;opacity:0;
  pointer-events:none;filter:drop-shadow(-10px 14px 14px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgb(var(--acento) / .35))}
.maquina svg{display:block;width:100%;height:100%;overflow:visible}
/* a marca ja esta no topo; a flutuante batia no menu */
.emblema{display:none}
.icone-maquina{color:#17110d}
.icone-maquina .garra{fill:none;stroke:rgb(var(--acento-vivo));stroke-width:3;stroke-linecap:round}
/* no celular a cena centraliza nas costas do meio */
@media (max-width:760px){
  :root{--fx:.5}
  .costas{top:12%}
  .maquina{height:70%}
  /* no celular, menos camadas: sem o granulado com mistura de cores e sem o
     desfoque no brilho das rachaduras */
  .costas::after{display:none}
  .barreira__rachas .r-brilho{filter:none;stroke-width:3;opacity:.6}
}

/* ---------- o vidro que estilhaca ---------- */
/* O vidro e os cacos sao desenhados num canvas so (js/hero-costas.js).
   Antes eram 65 <div> em 3D, uma camada de GPU cada: derrubava a pagina no celular. */
.barreira{position:absolute;inset:0;z-index:2;cursor:pointer;background:#0b0405}
.barreira.quebrando{background:none}
.barreira.sumiu{visibility:hidden;pointer-events:none}
.barreira__vidro{position:absolute;inset:0;width:100%;height:100%;display:block}
.barreira__rachas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.barreira__rachas path{fill:none;stroke-linejoin:round;stroke-dasharray:var(--comp,9000);stroke-dashoffset:var(--comp,9000)}
.barreira__rachas .r-brilho{stroke:rgb(var(--acento-vivo) / .75);stroke-width:5;filter:blur(3px)}
.barreira__rachas .r-linha{stroke:rgba(255,240,240,.9);stroke-width:1.3}
.rachando .barreira__rachas path{transition:stroke-dashoffset .5s cubic-bezier(.2,.8,.3,1);stroke-dashoffset:0}
.quebrando .barreira__rachas{opacity:0;transition:opacity .25s}
.rachando{animation:vidro-treme .5s linear}
@keyframes vidro-treme{0%,100%{transform:none}20%{transform:translate(-3px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-2px,-1px)}80%{transform:translate(2px,1px)}}
.barreira__clarao{position:absolute;left:50%;top:36%;width:60vmax;aspect-ratio:1;transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,235,235,.95),rgb(var(--acento-vivo) / .55) 30%,transparent 70%)}
.quebrando .barreira__clarao{animation:vidro-clarao .7s ease-out}
@keyframes vidro-clarao{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
@media (prefers-reduced-motion:reduce){.barreira{display:none}}