/* ==========================================================================
   SEÇÃO DEPOIMENTOS — Marcutz Tattoo (desktop)
   O cenário (16:9) COBRE a página inteira, como um hero (igual object-fit:
   cover): o JS dimensiona e centraliza a arte para preencher o palco, e o
   excedente sai pelas bordas. Não há faixa de céu extra nem divisor.
   Todas as camadas ficam travadas na arte em porcentagem.
   Medidas internas do card em cqw (largura do card).
   ========================================================================== */

/* integração: as fontes do pacote (Shippori Mincho, Montserrat local e a Shojumaru, que era
   declarada sem o arquivo) deram lugar à tipografia da marca do site (css/base.css), decisão
   nº 10 do CLAUDE.md: Montserrat no texto do depoimento e Gang of Three no resto. */

.dp {
  /* integração: tokens com prefixo dp (o pacote usava --ink e --red, que sombreavam os do site) */
  --dp-red: #e3342f;
  --dp-gold: #dca863;
  --dp-cream: #f5e8d8;
  --dp-night: #02060e;
  /* integração: tipografia da marca (tokens globais, com reserva se a seção for usada sozinha) */
  --dp-font-texto: var(--f-texto, "Montserrat", sans-serif);
  --dp-font-marca: var(--f-display, "Gang of Three", sans-serif);
  position: relative;
  overflow: hidden;
  background: var(--dp-night);
  color: var(--dp-cream);
  font-family: var(--dp-font-texto);
}
.dp *, .dp *::before, .dp *::after { box-sizing: border-box; }

/* ---------- palco ----------
   O cenário cobre a página inteira, como um hero. O JS dimensiona a arte (16:9)
   para COBRIR o palco (igual a object-fit: cover) e a centraliza; o excedente
   sai pelas bordas. Assim o cenário preenche tudo, sem faixa nem divisor. */
/* integração: a arte cobre a LARGURA do palco e nunca é cortada em cima e embaixo. Numa tela
   mais larga que ela (1920×960 com a barra do navegador, monitor 21:9, celular deitado), o
   palco cresce até a altura da arte (aspect-ratio) em vez de cortar o título e a placa; nas
   outras telas fica com a altura da tela, como no pacote, e o excedente sai pelos lados. */
.dp__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background: #04050c;
}
/* integração: emenda com a seção de cima (Portfólio, que termina esfumando no preto). Fica
   no z 9, junto da sombra: escurece o céu e as estrelas, mas passa por baixo do título (10). */
.dp__stage::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 9;
  height: clamp(40px, 8%, 80px);
  background: linear-gradient(var(--ink, #050404), rgba(5, 4, 4, .8) 25%, rgba(5, 4, 4, .35) 60%, transparent);
  pointer-events: none;
}

/* a arte é a caixa 16:9 que cobre o palco (posição e tamanho vêm do JS) */
.dp__art {
  position: absolute; left: 0; top: 0;
  width: 100%; aspect-ratio: 16 / 9;
}
.dp__art > * { position: absolute; }
.dp__art > picture { display: contents; }   /* integração: o cenário vem num <picture> */

.dp__bg {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover;
  user-select: none; pointer-events: none;
  z-index: 1;
}

/* camadas que só entram quando o cenário carregou */
.dp__stars, .dp__sun, .dp__mists, .dp__lantern, .dp__fx,
.dp__head, .dp__cards {
  opacity: 0;
  transition: opacity 1.4s ease;
}
.dp.is-ready .dp__stars, .dp.is-ready .dp__sun, .dp.is-ready .dp__mists,
.dp.is-ready .dp__lantern, .dp.is-ready .dp__fx,
.dp.is-ready .dp__head, .dp.is-ready .dp__cards { opacity: 1; }
.dp.is-ready .dp__head { transition-delay: .25s; }
.dp.is-ready .dp__cards { transition-delay: .45s; }

/* ---------- céu ---------- */
.dp__stars, .dp__fx {
  inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.dp__stars {
  position: absolute; z-index: 2;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* ordem das camadas (todas no mesmo contexto do palco) */
.dp__sun { z-index: 3; }
.dp__mists--back { z-index: 4; }
.dp__mists--front { z-index: 6; }
.dp__lantern { z-index: 7; }
.dp__fx { z-index: 8; }
.dp__shade { z-index: 9; }

/* ---------- sol ---------- */
.dp__sun {
  left: 73.56%; top: 58.98%;
  width: 34%; aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}
.dp__rays, .dp__glow { position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; }
.dp__rays {
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 196, 160, 0) 0deg 6deg,
    rgba(255, 196, 160, .22) 8deg 9.5deg,
    rgba(255, 196, 160, 0) 11.5deg 19deg);
  -webkit-mask: radial-gradient(circle, #000 4%, rgba(0, 0, 0, .55) 20%, transparent 58%);
          mask: radial-gradient(circle, #000 4%, rgba(0, 0, 0, .55) 20%, transparent 58%);
  opacity: .5;
  animation: dpRays 140s linear infinite;
}
.dp__glow {
  inset: 22%;
  background: radial-gradient(circle,
    rgba(255, 228, 190, .55) 0 10%,
    rgba(255, 140, 96, .26) 26%,
    rgba(255, 60, 44, .08) 48%,
    transparent 70%);
  animation: dpSun 8s ease-in-out infinite;
}
@keyframes dpRays { to { rotate: 360deg; } }
@keyframes dpSun { 0%, 100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.06; } }

/* ---------- névoa ---------- */
.dp__mists {
  inset: 0; pointer-events: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.dp__band { position: absolute; left: 0; width: 100%; overflow: hidden; }
.dp__band i {
  position: absolute; top: 0; left: 0; height: 100%; width: 200%;
  background-repeat: repeat-x; background-size: auto 100%;
  will-change: transform;
}
/* integração: .is-perto (js/depoimentos.js) segura o download até a seção chegar perto */
.dp.is-perto .dp__band[data-tex="mar"] i   { background-image: url("../assets/depoimentos/nevoa-mar.webp"); }
.dp.is-perto .dp__band[data-tex="veu"] i   { background-image: url("../assets/depoimentos/nevoa-veu.webp"); }
.dp.is-perto .dp__band[data-tex="baixa"] i { background-image: url("../assets/depoimentos/nevoa-baixa.webp"); }

/* ---------- lanterna ---------- */
.dp__lantern {
  left: 88.94%; top: 67.2%;
  width: 8%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 150, 110, .55) 0 8%, rgba(255, 60, 40, .22) 30%, transparent 66%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: dpFlicker 3.2s steps(1, end) infinite;
}
@keyframes dpFlicker {
  0% { opacity: .85; } 9% { opacity: .62; } 13% { opacity: .92; } 31% { opacity: .78; }
  44% { opacity: 1; } 58% { opacity: .7; } 63% { opacity: .9; } 79% { opacity: .74; } 90% { opacity: .96; }
}

/* sombra suave atrás do título, para o título ler sobre o céu */
.dp__shade {
  inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 32% 26% at 37.5% 13%, rgba(6, 3, 8, .55), transparent 70%),
    linear-gradient(180deg, rgba(6, 3, 8, .34), transparent 20%);
}

/* ---------- título (arte) ---------- */
.dp__head {
  left: 37.5%; top: 3.6%;
  translate: -50% 0;
  width: clamp(300px, 41cqw, 880px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  z-index: 10;
}
.dp__title { margin: 0; width: 100%; }   /* integração: o <h2> que envolve a arte do título */
.dp__title-img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 .35cqw .9cqw rgba(0, 0, 0, .55));
  animation: dpTitle 11s ease-in-out infinite;
}
/* respiro sutil do título, como peça inteira */
@keyframes dpTitle {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-.5%) scale(1.006); }
}
.dp__sub {
  margin: -1.4cqw 0 0;
  max-width: 30cqw;
  font: 400 max(13px, .95cqw)/1.55 var(--dp-font-marca);   /* integração: era Montserrat */
  letter-spacing: .01em;
  color: rgba(245, 232, 216, .86);
}

/* ==========================================================================
   DEPOIMENTOS EM LEQUE (v3.7): prints dos stories, emoldurados, abertos como um
   leque de baralho. A carta da frente fica em pé e no topo; as outras giram em volta
   de um eixo abaixo do leque (--pivo), --passo graus por posição. O JS marca em cada
   carta --o (posição: 0 = frente, negativo = esquerda) e --a (distância da frente).
   Medidas em cqw = largura da carta (.dp__cards é o container).
   ========================================================================== */
.dp__cards {
  left: 37.5%; top: 31.5%;
  width: 18%;
  translate: -50% 0;
  z-index: 11;
  container-type: inline-size;
  --passo: 7deg;
  --pivo: 125%;   /* logo abaixo das cartas: as bases ficam juntas e o leque abre em cima */
  --nav-y: 22cqw; /* a navegação (losangos) desce além do canto mais baixo das cartas giradas */
  --ax: 9cqw;     /* setas: quanto ficam para fora do leque (cada lado) */
  --ay: 66cqw;    /* setas: altura, no meio do card */
}
/* celular deitado (16:9, ex.: 844×390): o subtítulo quebra em 2 linhas, e o leque desce um pouco */
@media (orientation: landscape) and (max-height: 500px) {
  .dp__cards { top: 35%; width: 17%; }
}
.dp__deck { position: relative; display: grid; touch-action: pan-y; }

/* ---------- moldura: laca preta, filete vermilhão por fora, linha vermelha acesa por
   dentro, grega nos quatro cantos e losango no alto. Serve à carta e à foto ampliada. ---------- */
.dp-moldura {
  --borda: 6cqw;
  --filete: 2.4cqw;
  --grega: 3.6cqw;
  position: relative;
  margin: 0;
  padding: var(--borda);
  border-radius: .6cqw;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 23V1h22M6 23V6h12v8h-6v-4' fill='none' stroke='%23e3342f' stroke-width='2'/%3E%3C/svg%3E") left var(--filete) top var(--filete) / var(--grega) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='matrix(-1 0 0 1 24 0)' d='M1 23V1h22M6 23V6h12v8h-6v-4' fill='none' stroke='%23e3342f' stroke-width='2'/%3E%3C/svg%3E") right var(--filete) top var(--filete) / var(--grega) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='matrix(1 0 0 -1 0 24)' d='M1 23V1h22M6 23V6h12v8h-6v-4' fill='none' stroke='%23e3342f' stroke-width='2'/%3E%3C/svg%3E") left var(--filete) bottom var(--filete) / var(--grega) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='matrix(-1 0 0 -1 24 24)' d='M1 23V1h22M6 23V6h12v8h-6v-4' fill='none' stroke='%23e3342f' stroke-width='2'/%3E%3C/svg%3E") right var(--filete) bottom var(--filete) / var(--grega) no-repeat,
    linear-gradient(165deg, #1c0e0e, #0a0606 50%, #150909);
  box-shadow: 0 0 0 1px rgba(184, 18, 26, .9), 0 2.5cqw 6cqw rgba(0, 0, 0, .55);
}
.dp-moldura::before {   /* linha vermelha acesa, por dentro da laca */
  content: ""; position: absolute; inset: var(--filete);
  border: 1px solid #e3342f; border-radius: .3cqw;
  box-shadow: 0 0 1.2cqw rgba(227, 52, 47, .5), inset 0 0 1.2cqw rgba(227, 52, 47, .3);
  pointer-events: none;
}
.dp-moldura::after {    /* losango carmesim sobre a linha, no alto (linguagem do site) */
  content: ""; position: absolute; left: 50%; top: var(--filete);
  width: 3cqw; aspect-ratio: 1;
  translate: -50% -50%; rotate: 45deg;
  background: #b8121a;
  box-shadow: 0 0 0 1px #ff6b5f, 0 0 1.4cqw rgba(227, 52, 47, .8);
  pointer-events: none;
}
.dp-foto__img {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .85);
  user-select: none; -webkit-user-drag: none;
}

/* ---------- cartas do leque ---------- */
.dp-foto {
  --o: 0; --a: 0;
  grid-area: 1 / 1;
  z-index: calc(20 - var(--a));
  transform-origin: 50% var(--pivo);
  transform: rotate(calc(var(--o) * var(--passo)));
  transition: transform .8s cubic-bezier(.2, .75, .2, 1), opacity .45s ease, visibility 0s;
}
.dp-foto.is-frente { transform: translateY(-3cqw); }
.dp-foto.is-guardada {   /* além das cartas abertas: some atrás da última, sem varrer o leque */
  opacity: 0; visibility: hidden;
  transition: transform .8s cubic-bezier(.2, .75, .2, 1), opacity .45s ease, visibility 0s linear .8s;
}
/* botão por cima da carta: na da frente amplia, nas outras traz para a frente. O fundo
   escurece as cartas de trás (mais escuras quanto mais longe da frente). */
.dp-foto__abrir {
  position: absolute; inset: 0; z-index: 2;
  padding: 0; border: 0; border-radius: .6cqw;
  background: rgba(5, 4, 4, calc(var(--a) * .16));
  cursor: pointer;
  transition: background-color .6s ease;
}
.dp-foto:not(.is-frente) .dp-foto__abrir:hover { background: rgba(5, 4, 4, calc(var(--a) * .08)); }
.dp-foto.is-frente .dp-foto__abrir { cursor: zoom-in; }
.dp-foto__abrir:focus-visible { outline: 2px solid var(--dp-gold); outline-offset: 3px; }

/* borla (arte do pacote) pendurada na carta da frente */
.dp-foto__borla {
  position: absolute; z-index: 1;
  left: 80%; top: calc(100% - .8cqw);
  width: 11cqw; height: auto;
  transform-origin: 43% 3%;
  opacity: 0;
  transition: opacity .5s ease;
  animation: dpTassel 6s ease-in-out infinite;
  pointer-events: none;
}
.dp-foto.is-frente .dp-foto__borla { opacity: 1; transition-delay: .4s; }
.dp-foto.is-gust .dp-foto__borla { animation: dpTasselGust 2.4s cubic-bezier(.3, .6, .3, 1), dpTassel 6s ease-in-out 2.4s infinite; }
@keyframes dpTassel { 0%, 100% { rotate: 2.2deg; } 50% { rotate: -2.2deg; } }
@keyframes dpTasselGust {
  0% { rotate: 0deg; } 18% { rotate: 13deg; } 40% { rotate: -8deg; } 62% { rotate: 4deg; } 82% { rotate: -2deg; } 100% { rotate: 2.2deg; }
}

/* ---------- navegação (abaixo do leque) ---------- */
.dp__nav {
  position: absolute; left: 50%; top: calc(100% + var(--nav-y));
  translate: -50% 0;
  display: flex; align-items: center; gap: 3cqw;
  z-index: 25;
}
/* setas em cada lado do card: maiores, sutis (semi-transparentes), fora do leque */
.dp__arrow {
  position: absolute; top: var(--ay); z-index: 26;
  display: grid; place-items: center;
  width: max(46px, 15cqw); aspect-ratio: 1;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(10, 5, 6, .32);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  color: var(--dp-cream); opacity: .72;
  cursor: pointer;
  transition: color .3s ease, translate .3s ease, filter .3s ease, opacity .3s ease, background .3s ease;
}
.dp__arrow--prev { right: calc(100% + var(--ax)); }
.dp__arrow--next { left: calc(100% + var(--ax)); }
.dp__arrow svg { width: 64%; height: 64%; fill: currentColor; filter: drop-shadow(0 .2cqw .3cqw rgba(0, 0, 0, .6)); }
.dp__arrow:hover, .dp__arrow:focus-visible { opacity: 1; color: #ff6b5f; background: rgba(10, 5, 6, .55); filter: drop-shadow(0 0 1cqw rgba(227, 52, 47, .8)); }
.dp__arrow--prev:hover { translate: -.6cqw 0; }
.dp__arrow--next:hover { translate: .6cqw 0; }
.dp__dots { display: flex; align-items: center; gap: max(6px, 2.2cqw); }
.dp__dot {
  width: max(7px, 2.4cqw); aspect-ratio: 1; padding: 0;
  rotate: 45deg;
  border: 1px solid rgba(227, 52, 47, .85);
  background: transparent;
  cursor: pointer;
  transition: background .35s ease, box-shadow .35s ease, scale .35s ease;
}
.dp__dot:hover { background: rgba(227, 52, 47, .45); }
.dp__dot[aria-current="true"] { background: var(--dp-red); box-shadow: 0 0 1cqw rgba(227, 52, 47, .9); scale: 1.18; }
.dp__arrow:focus-visible, .dp__dot:focus-visible { outline: 2px solid var(--dp-gold); outline-offset: 3px; }

.dp__sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* integração: seção fora da tela (js/depoimentos.js marca .is-fora): as animações contínuas
   (sol, lanterna, título, borlas) pausam, como no hero. O loop do JS já parava. */
.dp.is-fora .dp__stage *, .dp.is-fora .dp__stage *::before, .dp.is-fora .dp__stage *::after {
  animation-play-state: paused !important;
}

/* ---------- sem animação (preferência do sistema) ---------- */
.dp.is-reduced *, .dp.is-reduced *::before, .dp.is-reduced *::after {
  animation: none !important;
  transition-duration: .01ms !important;
  transition-delay: 0s !important;
}

/* ==========================================================================
   LAYOUT MOBILE (cenário vertical 9:16) — ativado pelo JS via data-layout
   ========================================================================== */
[data-layout="mobile"] .dp__stage { aspect-ratio: 9 / 16; }   /* integração: ver .dp__stage */
[data-layout="mobile"] .dp__sun {
  left: 70%; top: 33%; width: 30%;
}
[data-layout="mobile"] .dp__lantern {
  left: 85%; top: 78.5%; width: 15%;
}
[data-layout="mobile"] .dp__shade {
  background:
    linear-gradient(180deg, rgba(6, 3, 8, .5), transparent 15%),
    radial-gradient(ellipse 60% 20% at 50% 62%, rgba(6, 3, 8, .4), transparent 75%);
}
/* título: banner centralizado no topo */
[data-layout="mobile"] .dp__head {
  left: 50%; top: 4.5%;
  width: min(86%, 440px);
}
[data-layout="mobile"] .dp__sub {
  margin-top: -1.2cqw;
  max-width: 78cqw;
  /* integração: o teto acompanha o título, que para em 440px (tablet em pé: era 26–28px) */
  font-size: max(12px, min(3.4cqw, 17.4px));
}
/* leque: centralizado na faixa calma do meio, acima da lanterna de baixo */
[data-layout="mobile"] .dp__cards {
  left: 50%; top: 29%;
  width: 46%;
  --passo: 5.5deg;
  --nav-y: 15cqw;
}

/* ==========================================================================
   FOTO AMPLIADA (v3.7) — o texto do depoimento está dentro do print e fica pequeno
   na carta. Clicar na carta da frente abre o print grande, com a mesma moldura.
   Criada pelo js/depoimentos.js no <body>, com z 1000 (acima da navbar e do botão).
   ========================================================================== */
.dp-lb {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: rgba(5, 2, 3, .93);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;
  color: #f5e8d8;
}
.dp-lb.is-aberta { opacity: 1; visibility: visible; transition: opacity .35s ease; }
/* a caixa é o container da moldura: 100cqw = largura da moldura (cabe em 92% da altura) */
.dp-lb__caixa {
  container-type: inline-size;
  width: min(86vw, 54vh); width: min(86vw, 54svh);
  transform: scale(.97); transition: transform .4s cubic-bezier(.2, .9, .2, 1);
}
.dp-lb.is-aberta .dp-lb__caixa { transform: scale(1); }
.dp-lb .dp-foto__img { transition: opacity .25s ease; }
.dp-lb .dp-foto__img.is-troca { opacity: 0; }
.dp-lb button {
  position: absolute; border: 0; padding: 0; cursor: pointer; background: none;
  display: grid; place-items: center; color: #f5e8d8;
}
.dp-lb button:focus-visible { outline: 2px solid #dca863; outline-offset: 3px; }
.dp-lb__fechar { top: 18px; right: 18px; width: 48px; height: 48px; color: #ff3a2e !important; }
.dp-lb__fechar svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.dp-lb__seta { top: 50%; width: 56px; height: 56px; margin-top: -28px; transition: color .3s ease; }
.dp-lb__seta svg { width: 70%; height: 70%; fill: currentColor; filter: drop-shadow(0 0 8px rgba(255, 30, 30, .45)); }
.dp-lb__seta:hover { color: #ff6b5f; }
.dp-lb__seta--ant { left: 14px; }
.dp-lb__seta--prox { right: 14px; }
@media (max-width: 640px) {
  .dp-lb__seta { top: auto; bottom: 10px; margin: 0; }
  .dp-lb__caixa { width: min(86vw, 50vh); width: min(86vw, 50svh); margin-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-lb, .dp-lb * { transition: none !important; }
}