/* Secao de depoimentos. Tudo com prefixo dp-: o pacote vinha com .card, .title,
   .page, .stage, .bg, .arrow, .count soltos — nomes genericos demais pra conviver
   com o resto do site. Os ids stage/cur/tot/live tambem foram prefixados. */

/* Seção de depoimentos — Yan Tattoo
   Todo o CSS é escopado em .dp-depo para não vazar para o resto do site. */
.dp-depo{
  --soot:#120c0a;
  --bone:#ece3d2;
  --bone-dim:#b3a794;
  --blood:#b3161c;
  --serif:"EB Garamond","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --caps:"Cinzel","Trajan Pro",Georgia,"Times New Roman",serif;
  --hint-bottom:calc(clamp(12px,3vh,34px) + env(safe-area-inset-bottom,0px));
}
.dp-depo,.dp-depo *,.dp-depo *::before,.dp-depo *::after{box-sizing:border-box}
.dp-depo .dp-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ SEÇÃO ============ */
.dp-depo{
  position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;isolation:isolate;
  background:var(--soot);color:var(--bone);font-family:var(--serif);-webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:grab;
}
.dp-depo.dp-is-dragging{cursor:grabbing}

/* cenário */
.dp-bg{position:absolute;inset:-3%;z-index:-4;will-change:transform}
.dp-bg picture{display:block;width:100%;height:100%}
.dp-bg img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:48% 50%;
  animation:dp-bgIn 2.4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes dp-bgIn{from{transform:scale(1.08);filter:brightness(.3)}}

.dp-shade{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(130% 95% at 55% 60%,transparent 50%,rgba(6,7,20,.6) 100%),
    linear-gradient(to bottom,rgba(8,10,28,.55) 0%,rgba(8,10,28,.18) 18%,rgba(8,10,28,0) 36%,rgba(8,10,28,0) 72%,rgba(6,6,14,.6) 100%);
}
.dp-embers{position:absolute;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%}

/* ============ TÍTULO ============ */
.dp-title{
  position:absolute;z-index:6;left:50%;top:calc(clamp(4px,1.4vh,22px) + env(safe-area-inset-top,0px));
  width:clamp(280px,min(48vw,70vh),820px);margin:0;transform:translateX(-50%);
}
.dp-title-par{will-change:transform}
.dp-title-float{animation:dp-titleFloat 6.5s ease-in-out infinite}
.dp-title img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(255,120,50,.1));
  transition:filter .5s ease;
  animation:dp-titleIn 1.4s cubic-bezier(.2,.7,.2,1) .15s both;
  -webkit-user-drag:none;
}
.dp-title:hover img{filter:drop-shadow(0 16px 26px rgba(0,0,0,.75)) drop-shadow(0 0 34px rgba(255,110,50,.32)) brightness(1.06)}
@keyframes dp-titleFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-.35deg)}
  50%{transform:translate3d(0,-12px,0) rotate(.35deg)}
}
@keyframes dp-titleIn{from{opacity:0;transform:translateY(-18px) scale(.97)}}

/* ============ PALCO / CARDS ============ */
.dp-stage{position:absolute;inset:0;z-index:4;pointer-events:none}
.dp-page{position:absolute;inset:0}
.dp-card-slot{position:absolute;margin:0;pointer-events:auto;will-change:transform,opacity;visibility:hidden}

/* desktop: 2 cards grandes + 2 menores em volta do personagem */
.dp-slot-0{left:1.5%;top:28%;width:clamp(330px,30vw,560px)}
.dp-slot-1{left:61.5%;top:45%;width:clamp(320px,29vw,540px)}
.dp-slot-2{right:1.5%;top:20%;width:clamp(270px,23vw,430px)}
.dp-slot-3{left:5%;top:61%;width:clamp(270px,23vw,420px)}

/* o card é a arte da moldura; o texto fica dentro do painel preto, abaixo do brasão */
.dp-card{
  position:relative;container-type:inline-size;aspect-ratio:1568/853;
  background:center/100% 100% no-repeat;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.55));
  animation:dp-cardIn 1.1s cubic-bezier(.2,.75,.2,1) both;animation-delay:var(--d,.4s);
}
@keyframes dp-cardIn{from{opacity:0;transform:translateY(26px) scale(.95) rotate(-1.5deg)}}

.dp-card-body{
  position:absolute;left:16%;right:16%;top:35.5%;bottom:21.5%;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.dp-card-inner{width:100%}
.dp-quote{
  margin:0;font-family:var(--serif);font-weight:500;color:var(--bone);
  font-size:calc(min(4.3cqw,24px) * var(--fit,1));line-height:1.24;
  text-wrap:balance;text-shadow:0 1px 0 rgba(0,0,0,.8),0 0 14px rgba(0,0,0,.7);
}
.dp-quote p{margin:0}
.dp-rule{
  display:block;width:58%;height:1px;margin:2.1cqw auto 1.7cqw;
  background:linear-gradient(90deg,transparent,var(--blood) 18%,#d02a31 50%,var(--blood) 82%,transparent);
}
.dp-who{
  display:block;font-family:var(--caps);font-weight:600;
  font-size:max(8.5px,min(2.15cqw,12px));letter-spacing:.3em;text-transform:uppercase;
  color:var(--bone-dim);padding-left:.3em;
}
.dp-slot-2 .dp-quote,.dp-slot-3 .dp-quote{font-size:calc(min(4.6cqw,20px) * var(--fit,1))}

/* ============ NAVEGAÇÃO ============ */
.dp-hint{
  position:absolute;z-index:7;left:50%;bottom:var(--hint-bottom);transform:translateX(-50%);
  width:min(560px,92vw);text-align:center;cursor:default;
  animation:dp-fadeIn 1.2s ease 1.1s both;
}
@keyframes dp-fadeIn{from{opacity:0}}
.dp-hint-row{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.4vw,18px)}
.dp-hint-text{
  font-family:var(--caps);font-weight:600;font-size:clamp(9.5px,calc(.35vw + .6vh),12.5px);
  letter-spacing:.34em;text-transform:uppercase;color:var(--bone);padding-left:.34em;
  text-shadow:0 1px 6px rgba(0,0,0,.9);white-space:nowrap;
}
.dp-arrow{
  appearance:none;border:0;background:transparent;color:var(--bone);cursor:pointer;
  width:52px;height:36px;display:grid;place-items:center;border-radius:4px;padding:0;
  transition:color .25s ease,transform .25s ease;
}
.dp-arrow svg{width:40px;height:12px;overflow:visible;filter:drop-shadow(0 1px 4px rgba(0,0,0,.9))}
.dp-arrow:hover{color:#ff5a5f}
.dp-arrow.dp-prev:hover{transform:translateX(-4px)}
.dp-arrow.dp-next:hover{transform:translateX(4px)}
.dp-arrow:focus-visible{outline:1px solid var(--bone);outline-offset:2px}
.dp-hint-rule{display:flex;align-items:center;gap:10px;margin-top:6px}
.dp-hint-rule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--blood) 40%,#d02a31)}
.dp-hint-rule i:last-of-type{transform:scaleX(-1)}
.dp-hint-mark{
  width:22px;aspect-ratio:132/180;flex:none;
  background:center/contain no-repeat;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.9)) saturate(.6);
}
.dp-count{
  font-family:var(--caps);font-weight:600;font-size:11px;letter-spacing:.18em;
  color:var(--bone-dim);min-width:2.4em;font-variant-numeric:lining-nums tabular-nums;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.dp-count.dp-cur{color:var(--bone);text-align:right}
.dp-count.dp-tot{text-align:left}

/* ============ RESPONSIVO ============ */
@media (max-width:1023px){
  .dp-title{width:clamp(280px,min(66vw,62vh),600px)}
  .dp-slot-0{left:1%;top:30%;width:49%}
  .dp-slot-1{left:auto;right:1%;top:52%;width:49%}
}
@media (max-width:639px){
  .dp-depo{min-height:560px}
  .dp-title{width:min(90vw,440px);top:6px}
  .dp-bg img{object-position:52% 50%}
  .dp-slot-0{
    left:-1%;right:-1%;width:auto;bottom:auto;
    top:max(calc(min(90vw,440px) * .346 + 16px), calc((min(90vw,440px) * .346 + 6px + 55.5% - 55.5vw) / 2));
  }
  .dp-quote{font-size:calc(min(4.9cqw,22px) * var(--fit,1))}
  .dp-who{font-size:max(9px,2.3cqw)}
  .dp-hint-text{letter-spacing:.24em;padding-left:.24em}
  .dp-arrow{width:40px}
  .dp-arrow svg{width:30px}
}
@media (prefers-reduced-motion:reduce){
  .dp-title-float,.dp-title img,.dp-card,.dp-hint,.dp-bg img{animation:none!important}
}

/* animações de entrada só começam quando a seção aparece na tela (classe .dp-is-live via JS) */
.dp-depo:not(.dp-is-live) .dp-bg img,.dp-depo:not(.dp-is-live) .dp-title img,
.dp-depo:not(.dp-is-live) .dp-card,.dp-depo:not(.dp-is-live) .dp-hint{animation-play-state:paused}

/* Mesma ideia do .pf-perto: a moldura do card e o emblema so baixam quando a
   secao se aproxima. Ela e a ultima da pagina. */
.dp-perto .dp-card{background-image:url("../assets/depoimentos/moldura-card.webp")}
.dp-perto .dp-hint-mark{background-image:url("../assets/depoimentos/emblema-yan.webp")}