/* =========================================================================
   SESSÃO PORTFÓLIO — JHOO
   Tudo é escopado em .jp / .jp-* para não colidir com o CSS do site.
   Paleta: somente preto, cinza e branco.
   ========================================================================= */

/* Fontes reutilizadas do site: Anton (já carregada pela sessão #sobre) e
   Bangers (Google Fonts, carregada no index.html) — sem baixar de novo. */

.jp{
  /* ---- tokens ---- */
  --jp-ink:#0a0a0a;
  --jp-white:#fff;
  --jp-title:#0a0a0a;                                   /* cor do título */
  --jp-font-display:"Anton", Impact, sans-serif;        /* título */
  --jp-font-comic:"Bangers", Impact, sans-serif;        /* etiquetas, botões */
  --jp-card-w: clamp(220px, min(24vw, 31svh), 380px);   /* largura do card ativo */
  --jp-gap: .62;                                        /* deslocamento entre cards (fração da largura) */
  --jp-ease: cubic-bezier(.2,.8,.2,1);

  box-sizing:border-box; position:relative; min-height:100svh; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(40px,6vh,80px) 0 0;
  background:var(--jp-ink); color:var(--jp-white);
  font-family:var(--jp-font-comic); -webkit-font-smoothing:antialiased;
}
.jp *, .jp *::before, .jp *::after{ box-sizing:border-box; margin:0; padding:0 }

/* ---------- Fundo: colagem de painéis de mangá ---------- */
.jp-bg{ position:absolute; inset:0; z-index:-3 }
.jp-bg img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04);
            animation:jp-drift 40s ease-in-out infinite alternate }
@keyframes jp-drift{ to{ transform:scale(1.09) translate(-1%,-1%) } }

/* escurecimento: bordas com painéis visíveis, centro calmo para as tatuagens */
.jp-shade{ position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 38% 46% at 50% 58%, rgba(10,10,10,.88), rgba(10,10,10,.45) 65%, rgba(10,10,10,.08)),
    radial-gradient(ellipse 34% 22% at 50% 17%, rgba(10,10,10,.75), rgba(10,10,10,0)),
    linear-gradient(to bottom, var(--jp-ink) 0, rgba(10,10,10,0) 18%, rgba(10,10,10,0) 78%, var(--jp-ink) 100%) }

/* retícula de impressão */
.jp-dots{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.1; mix-blend-mode:multiply;
  background-image:radial-gradient(circle, #000 1px, transparent 1.4px); background-size:5px 5px }

/* ---------- Cabeçalho ---------- */
.jp-head{ position:relative; z-index:2; text-align:center; padding:0 16px }
.jp-tag{ display:inline-block; position:relative; z-index:3; margin-bottom:.9em;
  background:var(--jp-white); color:var(--jp-ink); border:3px solid var(--jp-ink); box-shadow:4px 4px 0 var(--jp-ink);
  padding:.18em .6em .1em; font-size:clamp(18px,2vw,26px); letter-spacing:.04em; transform:rotate(-2deg) }
/* título = arte recortada (logo de mangá), como nas outras seções. Flutua levemente. */
.jp-title{ position:relative; margin:0 auto; line-height:0; width:clamp(300px,52vw,620px);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));
  animation:jp-float 4.5s ease-in-out infinite }
.jp-title img{ width:100%; height:auto; display:block }
@keyframes jp-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.jp-sub{ margin-top:clamp(6px,1vh,12px); display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.jp-pill{ background:var(--jp-ink); color:var(--jp-white); border:2px solid var(--jp-white);
  padding:.2em .7em .12em; font-size:clamp(14px,1.4vw,19px); letter-spacing:.06em; transform:skewX(-8deg) }
.jp-pill b{ display:inline-block; transform:skewX(8deg); font-weight:400 }

/* ---------- Carrossel ---------- */
.jp-cf{ position:relative; width:100%; flex:1; min-height:calc(var(--jp-card-w) * 1.33 + 120px);
  margin-top:clamp(10px,3vh,34px); touch-action:pan-y; user-select:none; -webkit-user-select:none }
.jp-stage{ position:absolute; left:50%; top:0; width:var(--jp-card-w); aspect-ratio:3/4; transform:translateX(-50%) }

.jp-card{ position:absolute; inset:0; padding:10px; cursor:pointer;
  background:var(--jp-white); border:3px solid var(--jp-ink); box-shadow:10px 10px 0 var(--jp-ink);
  transition:transform .7s var(--jp-ease), filter .7s var(--jp-ease), opacity .5s; will-change:transform }
.jp-card img{ width:100%; height:100%; object-fit:cover; display:block; border:2px solid var(--jp-ink); pointer-events:none }
.jp-card__no{ position:absolute; top:-16px; left:-14px; background:var(--jp-ink); color:var(--jp-white); border:2px solid var(--jp-white);
  font-size:22px; padding:.12em .45em .02em; transform:rotate(-6deg); opacity:0; transition:opacity .3s .3s }
.jp-card.is-active .jp-card__no{ opacity:1 }
.jp-card__burst{ position:absolute; right:-26px; top:22%; width:84px; height:84px; display:grid; place-items:center;
  background:var(--jp-white); color:var(--jp-ink); font-size:17px; line-height:.95; text-align:center;
  clip-path:polygon(50% 0,61% 22%,85% 10%,78% 36%,100% 46%,79% 60%,90% 86%,63% 78%,50% 100%,37% 78%,10% 86%,21% 60%,0 46%,22% 36%,15% 10%,39% 22%);
  transform:rotate(10deg) scale(0); transition:transform .45s var(--jp-ease) .25s }
.jp-card.is-active .jp-card__burst{ transform:rotate(10deg) scale(1) }

.jp-caption{ position:absolute; left:50%; top:calc(var(--jp-card-w) * 1.333 + 30px); transform:translateX(-50%);
  display:flex; align-items:stretch; white-space:nowrap; filter:drop-shadow(4px 4px 0 var(--jp-ink)) }
.jp-caption__name{ background:var(--jp-white); color:var(--jp-ink); padding:.2em .7em .08em; font-size:clamp(20px,2.2vw,30px);
  clip-path:polygon(4% 0,100% 0,96% 100%,0 100%) }
.jp-caption__from{ background:var(--jp-ink); color:var(--jp-white); border:2px solid var(--jp-white); margin-left:-6px;
  padding:.32em .8em .1em; font-size:clamp(14px,1.4vw,18px); letter-spacing:.06em; align-self:center }

.jp-btn{ position:absolute; z-index:50; top:calc(var(--jp-card-w) * .66); transform:translateY(-50%);
  width:clamp(46px,4.4vw,62px); aspect-ratio:1; display:grid; place-items:center; cursor:pointer;
  appearance:none; -webkit-appearance:none; -webkit-tap-highlight-color:transparent;
  background:var(--jp-white); color:var(--jp-ink); border:3px solid var(--jp-ink); box-shadow:5px 5px 0 var(--jp-ink);
  font-family:var(--jp-font-comic); font-size:clamp(24px,2.4vw,34px); transition:transform .15s, box-shadow .15s }
.jp-btn svg{ width:.62em; height:.62em; fill:currentColor; display:block; pointer-events:none }
.jp-btn:hover{ transform:translateY(-50%) translate(-2px,-2px); box-shadow:7px 7px 0 var(--jp-ink) }
.jp-btn:active{ transform:translateY(-50%) translate(3px,3px); box-shadow:2px 2px 0 var(--jp-ink) }
.jp-btn--prev{ left:max(16px, calc(50% - var(--jp-card-w) * 1.55)) }
.jp-btn--next{ right:max(16px, calc(50% - var(--jp-card-w) * 1.55)) }
.jp-btn:focus-visible, .jp-card:focus-visible{ outline:3px dashed var(--jp-white); outline-offset:6px }

.jp-meta{ position:absolute; left:50%; transform:translateX(-50%); top:calc(var(--jp-card-w) * 1.333 + 88px);
  display:flex; align-items:center; gap:14px }
.jp-count{ background:var(--jp-ink); border:2px solid var(--jp-white); padding:.15em .5em .05em;
  font-size:22px; letter-spacing:.08em; min-width:70px; text-align:right }
.jp-count em{ font-style:normal; opacity:.5 }
.jp-bar{ display:flex; gap:4px }
.jp-bar button{ width:clamp(14px,2vw,26px); height:8px; border:1.5px solid var(--jp-white); background:transparent;
  transform:skewX(-20deg); cursor:pointer; transition:background .3s }
.jp-bar button[aria-current="true"]{ background:var(--jp-white) }

/* ---------- CTA ---------- */
.jp-cta{ width:100%; margin-top:auto; border-top:3px solid var(--jp-white); background:var(--jp-ink);
  display:flex; justify-content:center; align-items:center; gap:clamp(12px,3vw,40px); padding:14px 16px 18px; flex-wrap:wrap }
.jp-cta p{ font-size:clamp(18px,2vw,26px); letter-spacing:.05em; transform:skewX(-8deg) }
.jp-cta a{ font-family:var(--jp-font-comic); font-size:clamp(18px,2vw,26px); letter-spacing:.05em; color:var(--jp-white);
  text-decoration:none; border:2.5px solid var(--jp-white); padding:.25em 1em .12em; transform:skewX(-10deg);
  display:inline-block; transition:background .2s, color .2s }
.jp-cta a:hover{ background:var(--jp-white); color:var(--jp-ink) }

/* ---------- Lightbox (o JS move para o <body>) ---------- */
.jp-lb{ position:fixed; inset:0; z-index:9999; background:#0a0a0a; display:none; place-items:center; padding:24px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
.jp-lb.is-open{ display:grid; animation:jp-pop .35s cubic-bezier(.2,.8,.2,1) }
@keyframes jp-pop{ from{ opacity:0; transform:scale(.96) } }
.jp-lb figure{ position:relative; margin:0; background:#fff; padding:12px; border:3px solid #0a0a0a; box-shadow:12px 12px 0 #000; max-height:90svh }
.jp-lb img{ display:block; max-height:calc(90svh - 24px); max-width:88vw }
.jp-lb button{ position:absolute; top:-18px; right:-18px; width:44px; height:44px; cursor:pointer;
  background:#0a0a0a; color:#fff; border:2px solid #fff; font:24px "Bangers", Impact, sans-serif }

/* ---------- Mobile ---------- */
@media (max-width: 700px){
  .jp{ --jp-card-w:64vw; --jp-gap:.78 }
  .jp-tag{ margin-bottom:.8em }
  .jp-title{ width:min(82vw,420px); filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) }
  .jp-btn{ top:calc(var(--jp-card-w) * 1.333 + 82px); transform:none; width:48px }
  .jp-btn:hover, .jp-btn:active{ transform:none }
  .jp-btn--prev{ left:16px } .jp-btn--next{ right:16px }
  .jp-bar{ display:none }
  .jp-card__burst{ width:68px; height:68px; font-size:12px; right:-18px }
  .jp-bg img{ object-position:50% 0 }
  .jp-dots{ opacity:.06 }
  .jp-shade{ background:
    radial-gradient(ellipse 70% 14% at 50% 13%, rgba(10,10,10,.75), rgba(10,10,10,0)),
    radial-gradient(ellipse 44% 30% at 50% 45%, rgba(10,10,10,.8), rgba(10,10,10,0)),
    linear-gradient(to right, rgba(10,10,10,.35), rgba(10,10,10,0) 18%, rgba(10,10,10,0) 82%, rgba(10,10,10,.35)),
    linear-gradient(to bottom, rgba(10,10,10,.85) 0, rgba(10,10,10,0) 9%, rgba(10,10,10,0) 76%, rgba(10,10,10,.6) 86%, var(--jp-ink) 100%) }
}

@media (prefers-reduced-motion: reduce){
  .jp *, .jp-lb{ animation:none !important; transition:none !important }
  .jp-bg img{ animation:none !important }
}