/* =====================================================================
   JHOO · Seção "Sobre o Tatuador"
   Tudo fica dentro de #sobre e usa o prefixo "sb-": não conflita
   com as classes e variáveis do resto do site.
   ===================================================================== */

/* ---------- Fontes (Bangers já vem do Google Fonts no index.html) ---------- */
@font-face{font-family:"Anton";src:url(../fonts/Anton.woff2) format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Barlow";src:url(../fonts/Barlow-400.woff2) format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Barlow";src:url(../fonts/Barlow-500.woff2) format("woff2");font-weight:500;font-display:swap;}

/* ---------- Tokens da seção ---------- */
.sobre{
  --sb-ink:#0b0b0b;
  --sb-paper:#f2f2f2;
  --sb-gray:#9a9a9a;
  --sb-muted:#c4c4c4;
  --sb-display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --sb-comic:"Bangers","Impact","Arial Narrow",sans-serif;
  --sb-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --sb-gutter-l:max(16px,env(safe-area-inset-left,0px));
  --sb-gutter-r:max(16px,env(safe-area-inset-right,0px));

  position:relative;overflow:hidden;overflow:clip;isolation:isolate;
  background:var(--sb-ink);color:var(--sb-paper);
}
.sobre *,.sobre *::before,.sobre *::after{box-sizing:border-box;}
.sobre .sb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.sobre .sb-gutter{padding-left:var(--sb-gutter-l);padding-right:var(--sb-gutter-r);}

/* ---------- Títulos gigantes (mesmo estilo do "JHOO" do hero) ---------- */
.sobre .sb-ttl{position:absolute;inset:0;margin:0;pointer-events:none;}
.sobre .sb-ttl img{position:absolute;left:50%;transform:translateX(-50%);height:auto;max-width:none;
  filter:drop-shadow(0 .5cqw 1cqw rgba(0,0,0,.45));}
/* flutuação leve (via translate, pra não quebrar a centralização do transform) */
.sobre.sb-live .sb-ttl img{animation:sb-tfloat 4.6s ease-in-out infinite}
.sobre.sb-live .sb-ttl.sb-bottom img{animation-delay:.6s}
@keyframes sb-tfloat{0%,100%{translate:0 0}50%{translate:0 -1.4cqw}}

/* ---------- Legenda de quadrinho (igual a "DO OUTRO LADO DO UNIVERSO") ---------- */
.sobre .sb-cap{display:inline-block;background:var(--sb-paper);color:var(--sb-ink);
  font-family:var(--sb-comic);letter-spacing:.03em;line-height:1;white-space:nowrap;
  border:3px solid var(--sb-ink);outline:2px solid var(--sb-paper);box-shadow:6px 6px 0 #000;}

/* =====================================================================
   CAPA
   ===================================================================== */
.sobre .sb-cover{position:relative;min-height:100svh;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-block:clamp(20px,3vw,48px);}
.sobre .sb-cover .sb-bg{position:absolute;inset:0;z-index:0;
  background:url(../img/cena.webp) center 30%/cover no-repeat;}
.sobre .sb-cover .sb-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,11,.55) 0%,rgba(11,11,11,0) 18%,rgba(11,11,11,0) 80%,rgba(11,11,11,.6) 100%);}
.sobre .sb-frame{position:absolute;z-index:2;pointer-events:none;inset:clamp(8px,1vw,14px);
  border:4px solid var(--sb-paper);box-shadow:0 0 0 3px var(--sb-ink),inset 0 0 0 3px var(--sb-ink);}
/* o palco se dimensiona pela ALTURA da tela: a capa inteira cabe em 1 tela, sem rolagem,
   mas com proporção baixa (sobreposição dos logos na foto) pra preencher bem a largura */
.sobre .sb-stage{position:relative;z-index:1;margin-inline:auto;
  width:min(1200px,96vw,calc((100svh - 46px) * 100 / 96));
  aspect-ratio:100/96;container-type:inline-size;}

.sobre .sb-k{position:absolute;z-index:5;font-size:2.6cqw;padding:.7cqw 1.8cqw .5cqw;}
.sobre .sb-k.sb-top{left:50%;top:0;transform:translateX(-50%) rotate(-1.5deg);}
.sobre .sb-k.sb-bottom{left:9cqw;top:60cqw;transform:rotate(-2deg);}

.sobre .sb-ttl.sb-top{z-index:1;}
.sobre .sb-ttl.sb-top img{top:3cqw;width:56cqw;}
.sobre .sb-ttl.sb-bottom{z-index:4;}
.sobre .sb-ttl.sb-bottom img{top:62cqw;width:58cqw;}

.sobre .sb-photo{position:absolute;z-index:2;left:50%;top:26cqw;width:34cqw;aspect-ratio:9/16;margin:0;
  transform:translateX(-50%) rotate(-1.2deg);background:var(--sb-ink);
  border:.5cqw solid var(--sb-paper);box-shadow:0 0 0 .25cqw #000,1.6cqw 1.6cqw 0 #000;}
.sobre .sb-photo img{display:block;width:100%;height:100%;object-fit:cover;}

.sobre .sb-beam{position:absolute;z-index:3;left:50%;top:-10%;width:50cqw;height:105%;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 70%,transparent);
  clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);mix-blend-mode:screen;filter:blur(10px);}

/* =====================================================================
   TEXTO "SOBRE MIM"
   ===================================================================== */
.sobre .sb-about{position:relative;z-index:1;padding-block:clamp(56px,7vw,100px) clamp(72px,8vw,120px);}
.sobre .sb-about .sb-bg{position:absolute;inset:0;z-index:-1;
  background:url(../img/cena-desfoque.webp) center 35%/cover no-repeat;}
.sobre .sb-about .sb-bg::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,11,.85) 0%,rgba(11,11,11,.15) 22%,rgba(11,11,11,.15) 70%,rgba(11,11,11,0) 100%);}
.sobre .sb-about .sb-bg::after{content:"";position:absolute;inset:auto 0 0;height:45%;
  background:linear-gradient(180deg,rgba(11,11,11,0),var(--sb-ink));}

/* moldura de painel de HQ: branco, preto, branco + sombra-bloco */
.sobre .sb-panel{position:relative;max-width:840px;margin-inline:auto;margin-top:22px;
  padding:clamp(44px,5vw,64px) clamp(20px,5vw,64px) clamp(32px,4vw,52px);
  background:rgba(11,11,11,.78);border:4px solid var(--sb-paper);
  box-shadow:0 0 0 4px var(--sb-ink),0 0 0 7px var(--sb-paper),18px 18px 0 7px #000;}
.sobre .sb-panel::before,.sobre .sb-panel::after{content:"";position:absolute;width:56px;height:56px;pointer-events:none;opacity:.55;
  background:radial-gradient(var(--sb-paper) 1.4px,transparent 1.7px) 0 0/7px 7px;}
.sobre .sb-panel::before{left:10px;top:10px;}
.sobre .sb-panel::after{right:10px;bottom:10px;}

.sobre .sb-text{min-width:0;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;}
.sobre .sb-text>.sb-cap{position:absolute;top:-24px;left:50%;font-size:24px;padding:8px 20px 6px;
  transform:translateX(-50%) rotate(-1.5deg);}
.sobre .sb-name{margin:0;}
.sobre .sb-name span{display:block;}
.sobre .sb-name .sb-n1{font-family:var(--sb-comic);font-weight:400;font-size:clamp(24px,2.2vw,30px);
  letter-spacing:.04em;line-height:1;color:var(--sb-paper);margin-bottom:.25em;}
.sobre .sb-name .sb-n2{font-family:var(--sb-display);font-weight:400;font-size:clamp(84px,10vw,140px);
  line-height:.86;color:var(--sb-paper);text-shadow:7px 7px 0 #000;}
.sobre .sb-text p{margin:0;font-family:var(--sb-body);font-size:clamp(16px,1.25vw,18px);line-height:1.65;
  color:var(--sb-muted);max-width:56ch;}
.sobre .sb-text p.sb-lead{font-family:var(--sb-comic);font-size:clamp(24px,2.3vw,32px);line-height:1.15;
  letter-spacing:.02em;color:var(--sb-paper);}

.sobre .sb-quote{margin:8px 0 4px;position:relative;max-width:56ch;background:var(--sb-paper);color:var(--sb-ink);
  border:3px solid var(--sb-ink);outline:2px solid var(--sb-paper);box-shadow:8px 8px 0 #000;
  padding:18px 22px 16px;transform:rotate(-1deg);}
.sobre .sb-quote p{font-family:var(--sb-comic);font-size:clamp(20px,1.9vw,26px);line-height:1.15;
  letter-spacing:.02em;color:var(--sb-ink);max-width:none;}

.sobre .sb-facts{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin:8px 0 0;border-top:2px solid var(--sb-paper);padding-top:16px;}
.sobre .sb-facts div{min-width:0;}
.sobre .sb-facts dt{font-family:var(--sb-comic);letter-spacing:.06em;font-size:17px;color:var(--sb-gray);}
.sobre .sb-facts dd{margin:2px 0 0;font-family:var(--sb-body);font-weight:500;font-size:15px;color:var(--sb-paper);}

.sobre .sb-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:6px;}
.sobre .sb-btn{display:inline-block;font-family:var(--sb-comic);font-size:22px;letter-spacing:.05em;text-decoration:none;
  padding:10px 22px 7px;border:3px solid var(--sb-paper);outline:2px solid var(--sb-ink);
  box-shadow:6px 6px 0 #000;transition:transform .15s,box-shadow .15s;}
.sobre .sb-btn.sb-solid{background:var(--sb-paper);color:var(--sb-ink);border-color:var(--sb-ink);outline-color:var(--sb-paper);}
.sobre .sb-btn.sb-ghost{background:var(--sb-ink);color:var(--sb-paper);}
.sobre .sb-btn:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 #000;}
.sobre .sb-btn:focus-visible{outline:3px dashed var(--sb-paper);outline-offset:4px;}

/* =====================================================================
   ATMOSFERA (chuva + grão de impressão)
   A chuva é um canvas do tamanho da tela, "grudado" enquanto a seção
   passa: muito mais leve que um canvas do tamanho da seção inteira.
   ===================================================================== */
.sobre .sb-rain-track{position:absolute;inset:0;z-index:6;pointer-events:none;}
.sobre .sb-rain{position:sticky;top:0;display:block;width:100%;height:100vh;height:100svh;opacity:.35;}
.sobre .sb-grain{position:absolute;inset:-50%;z-index:7;pointer-events:none;opacity:.22;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='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* o grão só se mexe enquanto a seção está na tela */
.sobre.sb-live .sb-grain{animation:sb-grain 1s steps(5) infinite;}
@keyframes sb-grain{0%,100%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}

@media (prefers-reduced-motion:reduce){
  .sobre.sb-live .sb-grain{animation:none;}
  .sobre.sb-live .sb-ttl img{animation:none;}
  .sobre .sb-rain-track{display:none;}
  .sobre .sb-btn{transition:none;}
}

/* =====================================================================
   CELULAR
   ===================================================================== */
@media (max-width:760px){
  .sobre .sb-stage{aspect-ratio:100/200;width:min(96vw,calc((100svh - 36px) * 100 / 200));}
  .sobre .sb-cover .sb-bg{background-image:url(../img/cena-mobile.webp);}
  .sobre .sb-about .sb-bg{background-image:url(../img/cena-mobile-desfoque.webp);background-position:50% 40%;}
  .sobre .sb-k{font-size:5.2cqw;padding:1.4cqw 3cqw 1cqw;}
  .sobre .sb-k.sb-top{top:2cqw;}
  .sobre .sb-ttl.sb-top img{top:8cqw;width:82cqw;}
  .sobre .sb-photo{top:46cqw;width:66cqw;}
  .sobre .sb-beam{width:120cqw;}
  .sobre .sb-k.sb-bottom{left:4cqw;top:150cqw;}
  .sobre .sb-ttl.sb-bottom img{top:158cqw;width:84cqw;}
}
@media (max-width:480px){
  .sobre .sb-facts{grid-template-columns:minmax(0,1fr);gap:10px;}
}