/* Anton (já carregada pela #sobre) e Bangers (Google Fonts) são reaproveitadas do site;
   só o Comic Neue é próprio desta seção. */
@font-face{font-family:"Comic Neue";font-weight:700;src:url("fonts/comic-neue-latin-700-normal.woff2") format("woff2");font-display:swap}

/* =========================================================
   SEÇÃO DEPOIMENTOS — Jhoo (João Victor) Tattoo
   Tudo prefixado com .dep- / #depoimentos para não
   conflitar com o resto do site.
   ========================================================= */

#depoimentos{
  --ink:#0b0b0b;
  --paper:#f4f2ec;
  --line:4px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:100vh;
  min-height:100svh;
  padding:clamp(28px,4vw,48px) 0 clamp(36px,5vw,56px);
  box-sizing:border-box;
  color:var(--ink);
  font-family:"Comic Neue","Comic Sans MS",cursive;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
#depoimentos *,#depoimentos *::before,#depoimentos *::after{box-sizing:border-box}

/* ---------- Cenário ---------- */
.dep-bg{
  position:absolute;inset:0;z-index:-2;
  background:url("img/bg-desktop.webp") center 35%/cover no-repeat;
  transform:scale(1.06);
  transition:transform 1.6s cubic-bezier(.2,.7,.2,1);
}
#depoimentos.is-visible .dep-bg{transform:scale(1)}
/* vinheta + escurecimento leve para destacar os painéis */
#depoimentos::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 75% 60% at 50% 55%,transparent 40%,rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom,rgba(0,0,0,.35),transparent 18%,transparent 78%,rgba(0,0,0,.5));
}
/* moldura de quadrinho, igual às outras seções */
#depoimentos::after{
  content:"";position:absolute;inset:8px;z-index:3;pointer-events:none;
  border:3px solid #fff;outline:3px solid var(--ink);
}

/* ---------- Tag de capítulo ---------- */
.dep-chapter{
  font-family:"Bangers",sans-serif;letter-spacing:.06em;
  font-size:clamp(14px,1.6vw,19px);
  background:#fff;color:var(--ink);
  padding:.25em .9em .2em;
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transform:rotate(-2deg);
  margin:0 0 4px;position:relative;z-index:2;
  opacity:0;translate:0 -14px;
  transition:opacity .5s,translate .5s;
}
#depoimentos.is-visible .dep-chapter{opacity:1;translate:0 0}

/* ---------- Título (arte recortada) ---------- */
.dep-title{
  margin:0;position:relative;z-index:2;
  width:clamp(280px,38vw,600px);
  line-height:0;
}
.dep-title img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));
  transform:scale(.6) rotate(-4deg);opacity:0;
}
#depoimentos.is-visible .dep-title img{animation:dep-slam .7s .1s cubic-bezier(.2,1.6,.4,1) forwards}
/* flutuação leve (começa depois do slam) */
#depoimentos.is-visible .dep-title{animation:dep-float 4.5s ease-in-out 1s infinite}
@keyframes dep-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- Onomatopeias ドン!! ---------- */
.dep-sfx{
  position:absolute;z-index:1;pointer-events:none;
  width:clamp(110px,15vw,240px);height:auto;
  filter:drop-shadow(4px 6px 0 rgba(0,0,0,.35));
  opacity:0;
}
.dep-sfx--l{left:-1.5vw;top:clamp(170px,30vh,300px);rotate:-8deg}
.dep-sfx--r{right:-1vw;bottom:clamp(30px,7vh,90px);rotate:6deg;width:clamp(100px,13vw,210px)}
#depoimentos.is-visible .dep-sfx--l{animation:dep-pop .55s .55s cubic-bezier(.2,1.8,.4,1) forwards}
#depoimentos.is-visible .dep-sfx--r{animation:dep-pop .55s .75s cubic-bezier(.2,1.8,.4,1) forwards}
.dep-sfx.is-shake{animation:dep-shake .35s linear both!important;opacity:1}

/* ---------- Carrossel ---------- */
.dep-stage{
  position:relative;z-index:2;
  width:min(1240px,100%);
  margin-top:clamp(4px,1vw,14px);
  padding:0 clamp(56px,6vw,84px);
}
.dep-track{
  display:flex;
  --cols:3;
  --gap:clamp(18px,2.4vw,34px);
  gap:var(--gap);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:26px 14px 34px;margin:0 -14px;scroll-padding-inline:14px;
  scrollbar-width:none;
  outline:none;
}
.dep-track::-webkit-scrollbar{display:none}

/* ---------- Painel (card) ---------- */
.dep-card{
  flex:0 0 calc((100% - (var(--cols) - 1)*var(--gap))/var(--cols));
  scroll-snap-align:start;
  position:relative;
  filter:drop-shadow(8px 10px 0 rgba(0,0,0,.85));
  opacity:0;
}
#depoimentos.is-visible .dep-card{animation:dep-panel-in .6s cubic-bezier(.2,1.3,.4,1) forwards}
#depoimentos.is-visible .dep-card:nth-child(3n+1){animation-delay:.35s}
#depoimentos.is-visible .dep-card:nth-child(3n+2){animation-delay:.48s}
#depoimentos.is-visible .dep-card:nth-child(3n+3){animation-delay:.61s}

/* inclinação em perspectiva, como na referência */
.dep-card:nth-child(3n+1) .dep-panel{transform:perspective(1200px) rotateY(9deg) rotate(-1.2deg)}
.dep-card:nth-child(3n+2) .dep-panel{transform:rotate(.6deg) translateY(6px)}
.dep-card:nth-child(3n+3) .dep-panel{transform:perspective(1200px) rotateY(-9deg) rotate(1.4deg)}

.dep-panel{
  --shape:polygon(1.5% 0,100% 2.5%,98.5% 100%,0 97%);
  background:var(--ink);
  padding:var(--line);
  clip-path:var(--shape);
  height:100%;
  transition:transform .35s cubic-bezier(.2,1.4,.4,1);
}
.dep-card:hover .dep-panel{transform:rotate(0) translateY(-6px) scale(1.02)}

.dep-panel__inner{
  position:relative;height:100%;
  clip-path:var(--shape);
  background:var(--paper);
  padding:clamp(48px,4.5vw,62px) clamp(22px,2.2vw,32px) clamp(22px,2vw,28px);
  display:flex;flex-direction:column;gap:14px;
  min-height:clamp(240px,21vw,290px);
  overflow:hidden;
}
/* retícula (halftone) nos cantos */
.dep-panel__inner::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,#000 1.1px,transparent 1.5px) 0 0/6px 6px;
  opacity:.22;
  -webkit-mask:radial-gradient(ellipse 70% 65% at 50% 50%,transparent 45%,#000 100%);
          mask:radial-gradient(ellipse 70% 65% at 50% 50%,transparent 45%,#000 100%);
}
/* linhas de ação no canto superior direito */
.dep-panel__inner::after{
  content:"";position:absolute;right:-30%;top:-40%;width:90%;height:90%;pointer-events:none;
  background:repeating-conic-gradient(from 200deg at 0 100%,rgba(0,0,0,.16) 0 1.2deg,transparent 1.2deg 5deg);
  -webkit-mask:linear-gradient(225deg,#000 10%,transparent 55%);
          mask:linear-gradient(225deg,#000 10%,transparent 55%);
}
/* contorno interno fino (traço duplo de mangá) */
.dep-panel__frame{
  position:absolute;inset:7px;pointer-events:none;
  border:1.5px solid var(--ink);
  clip-path:var(--shape);
}

.dep-quote{
  position:absolute;z-index:1;
  font-family:"Anton",Impact,sans-serif;
  font-size:clamp(64px,6vw,92px);line-height:1;color:var(--ink);
  user-select:none;
}
.dep-quote--open{left:clamp(16px,1.8vw,26px);top:clamp(4px,.6vw,10px)}
.dep-quote--close{right:clamp(18px,2vw,30px);bottom:clamp(-30px,-2vw,-18px)}

.dep-stars{
  position:absolute;top:clamp(20px,2vw,26px);right:clamp(20px,2vw,28px);z-index:1;
  font-size:18px;letter-spacing:2px;color:var(--ink);
  text-shadow:1px 1px 0 #fff;
}
.dep-text{
  position:relative;z-index:1;margin:0;
  font-size:clamp(15px,1.15vw,17px);line-height:1.45;
  font-weight:700;
  flex:1;
}
.dep-who{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:12px;
  padding-right:clamp(40px,4vw,56px);
}
.dep-avatar{
  flex:none;width:46px;height:46px;border-radius:50%;
  border:3px solid var(--ink);background:#fff;
  display:grid;place-items:center;overflow:hidden;
  font-family:"Bangers",sans-serif;font-size:20px;letter-spacing:.04em;
  box-shadow:3px 3px 0 var(--ink);
}
.dep-avatar img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.dep-name{
  display:block;font-family:"Bangers",sans-serif;
  font-size:clamp(18px,1.5vw,21px);letter-spacing:.05em;line-height:1;
}
.dep-tag{
  display:inline-block;margin-top:5px;
  font-family:"Bangers",sans-serif;font-size:13px;letter-spacing:.07em;
  background:var(--ink);color:#fff;padding:2px 8px 1px;
  transform:skew(-8deg);
}

/* ---------- Setas (mesmo padrão do portfólio) ---------- */
.dep-arrow{
  position:absolute;top:50%;z-index:3;
  width:clamp(42px,4vw,52px);aspect-ratio:1;
  translate:0 -50%;
  appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;
  background:#fff;color:var(--ink);
  border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  font-size:clamp(16px,1.6vw,20px);line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:transform .15s,box-shadow .15s,opacity .2s;
}
.dep-arrow svg{width:.62em;height:.62em;fill:currentColor;display:block;pointer-events:none}
.dep-arrow:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.dep-arrow:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.dep-arrow:disabled{opacity:.5;cursor:default;transform:none;box-shadow:5px 5px 0 var(--ink)}
.dep-arrow--prev{left:0}
.dep-arrow--next{right:0}
.dep-arrow:focus-visible,.dep-dot:focus-visible,.dep-cta:focus-visible{outline:3px dashed #fff;outline-offset:4px}

/* ---------- Contador + pontos ---------- */
.dep-nav{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:16px;
  margin-top:clamp(0px,.6vw,8px);
}
.dep-count{
  font-family:"Anton",Impact,sans-serif;font-size:20px;letter-spacing:.04em;
  background:var(--ink);color:#fff;
  border:2px solid #fff;padding:4px 14px 3px;
  box-shadow:4px 4px 0 rgba(0,0,0,.6);
}
.dep-count span{opacity:.5}
.dep-dots{display:flex;gap:6px}
.dep-dot{
  width:28px;height:9px;padding:0;cursor:pointer;
  background:transparent;border:2px solid #fff;
  transform:skew(-20deg);
  transition:background .2s,width .2s;
}
.dep-dot[aria-current="true"]{background:#fff;width:40px}

/* ---------- CTA ---------- */
.dep-cta-wrap{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:clamp(12px,2vw,26px);flex-wrap:wrap;justify-content:center;
  margin-top:clamp(18px,2.4vw,28px);
}
.dep-cta-label{
  font-family:"Bangers",sans-serif;font-size:clamp(17px,1.7vw,22px);letter-spacing:.06em;
  color:#fff;text-shadow:2px 2px 0 var(--ink),-1px -1px 0 var(--ink);
  transform:rotate(-2deg);
}
.dep-cta{
  font-family:"Bangers",sans-serif;font-size:clamp(17px,1.7vw,22px);letter-spacing:.06em;
  color:#fff;background:var(--ink);text-decoration:none;
  border:2px solid #fff;padding:.45em 1.3em .35em;
  transform:skew(-8deg);
  box-shadow:5px 5px 0 rgba(255,255,255,.25);
  transition:background .15s,color .15s,transform .15s;
}
.dep-cta:hover{background:#fff;color:var(--ink);transform:skew(-8deg) translate(-2px,-2px)}

/* ---------- Animações ---------- */
@keyframes dep-slam{
  0%{opacity:0;transform:scale(1.8) rotate(-6deg)}
  60%{opacity:1;transform:scale(.94) rotate(1deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes dep-pop{
  0%{opacity:0;transform:scale(.2)}
  70%{opacity:1;transform:scale(1.15)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes dep-shake{
  0%,100%{transform:translate(0,0) scale(1)}
  20%{transform:translate(-6px,3px) scale(1.08)}
  40%{transform:translate(5px,-4px) scale(1.04)}
  60%{transform:translate(-3px,2px) scale(1.06)}
  80%{transform:translate(2px,-1px) scale(1.02)}
}
@keyframes dep-panel-in{
  0%{opacity:0;transform:translateY(60px) scale(.85)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
/* troca de página: "flash" de impacto nos painéis */
.dep-track.is-flip .dep-card{animation:dep-flip .45s cubic-bezier(.2,1.4,.4,1) both!important;opacity:1}
@keyframes dep-flip{
  0%{transform:scale(.92) rotate(-1deg);filter:brightness(1.6) drop-shadow(8px 10px 0 rgba(0,0,0,.85))}
  100%{transform:none}
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .dep-track{--cols:2}
  .dep-card:nth-child(n) .dep-panel{transform:rotate(-.8deg)}
  .dep-card:nth-child(2n) .dep-panel{transform:rotate(.9deg) translateY(6px)}
}

/* cenário vertical em telas em pé (tablet/celular) */
@media (max-aspect-ratio:4/5){
  .dep-bg{background-image:url("img/bg-mobile.webp");background-position:center top}
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .dep-bg{background-image:url("img/bg-mobile.webp");background-position:center top}
  .dep-title{width:min(86vw,420px)}
  .dep-stage{padding:0 18px}
  .dep-track{--cols:1;scroll-snap-type:x mandatory;padding:22px 18px 30px;margin:0 -18px;scroll-padding:0 18px}
  .dep-card{flex-basis:86%;scroll-snap-align:center}
  .dep-card:nth-child(n) .dep-panel{transform:rotate(-1deg)}
  .dep-card:nth-child(2n) .dep-panel{transform:rotate(1deg)}
  .dep-arrow{display:none}
  .dep-sfx--l{top:auto;bottom:clamp(170px,30vh,240px);left:-14px;width:96px}
  .dep-sfx--r{bottom:16px;right:-8px;width:88px}
  .dep-panel__inner{min-height:300px}
  .dep-dot{width:20px}
  .dep-dot[aria-current="true"]{width:30px}
}

@media (prefers-reduced-motion:reduce){
  #depoimentos *,#depoimentos *::before,#depoimentos *::after{animation:none!important;transition:none!important}
  .dep-title img,.dep-sfx,.dep-card,.dep-chapter{opacity:1!important;transform:none;translate:none}
  .dep-track{scroll-behavior:auto}
}