/* ============================================================================
   Seção Redes Sociais (pacote próprio "secao-redes-sociais")
   Integrada abaixo dos Depoimentos. Tudo com prefixo rs / escopo #redes-sociais.
   Visual idêntico ao protótipo aprovado; mudanças de integração marcadas.
   Caminhos relativos à pasta css/ -> ../assets/redes/...
   ============================================================================ */

/* integração: paleta do manual da marca presa à seção (o site não tem esses
   tokens; ver CLAUDE.md §4). --kanji usa Noto Serif JP p/ a forma japonesa dos glifos. */
#redes-sociais{
  --cafe:#381110;      /* Pantone 4975 C */
  --cafe-2:#41110f;    /* Pantone 4625 C */
  --sangue:#881002;    /* Pantone 1815 C */
  --vermelho:#e20613;  /* Pantone 185 C  */
  --osso:#efe3cf;
  --tinta:#0a0505;
  --kanji:"Noto Serif JP","Noto Serif CJK JP","Noto Serif CJK SC",serif;
}

/* ============ Seção ============ */
#redes-sociais{
  position:relative;min-height:100vh;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(72px,9vh,110px) 16px clamp(40px,6vh,70px);
  background:var(--tinta);
  color:var(--osso);
  font-family:var(--f-texto);           /* integração: Montserrat via token do site */
}
/* integração: o cenário (bg) só baixa com .is-perto, marcado pelo JS a 1250px da
   seção, para não disputar banda com a abertura do hero (como a névoa dos Depoimentos) */
#redes-sociais.is-perto{
  background:var(--tinta) url("../assets/redes/bg-shoji.webp") center/cover no-repeat;
}
/* luz atrás do papel: oscila só no brilho, como vela */
#redes-sociais .luz{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 34% 52% at 50% 46%,rgba(226,6,19,.30),transparent 70%);
  mix-blend-mode:screen;animation:rs-vela 5.5s ease-in-out infinite;
}
@keyframes rs-vela{0%,100%{opacity:.55}22%{opacity:.8}41%{opacity:.62}63%{opacity:.9}80%{opacity:.68}}
#redes-sociais::after{ /* chão e topo mais fechados p/ leitura */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,5,5,.75) 0%,transparent 26%,transparent 70%,rgba(10,5,5,.85) 100%);
}
/* integração: emenda com os Depoimentos — topo esfuma a partir do preto */
#redes-sociais::before{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(40px,8%,90px);z-index:0;
  pointer-events:none;background:linear-gradient(180deg,var(--tinta),transparent);
}

/* ============ Título ============ */
#redes-sociais .rs-head{position:relative;z-index:1;text-align:center;margin-bottom:clamp(22px,3.5vh,40px)}
#redes-sociais .rs-head h2{
  font-family:var(--f-display);font-weight:400;      /* integração: Gang of Three via token */
  font-size:clamp(38px,5.6vw,78px);letter-spacing:.04em;line-height:1;
  color:var(--osso);text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 28px rgba(226,6,19,.35);
  display:inline-flex;align-items:center;gap:.35em;
}
#redes-sociais .selo{
  font-family:var(--kanji);font-weight:900;font-size:.36em;line-height:1;
  color:var(--osso);background:var(--vermelho);padding:.28em .22em;border-radius:3px;
  writing-mode:vertical-rl;letter-spacing:.05em;box-shadow:0 0 0 2px rgba(0,0,0,.35) inset;
  transform:rotate(3deg);
}
#redes-sociais .rs-head p{
  margin-top:14px;font-size:clamp(11px,1vw,13px);font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(239,227,207,.72);
}
#redes-sociais .rs-head p b{color:var(--vermelho);font-weight:700}

/* ============ Leque de cards ============ */
#redes-sociais .leque{--w:clamp(230px,24vw,330px);position:relative;z-index:1;width:100%;max-width:1100px;height:calc(var(--w)*1.4 + 56px);perspective:1400px}
#redes-sociais .card{
  position:absolute;left:50%;top:50%;width:var(--w);aspect-ratio:5/7;
  container-type:inline-size;
  transform:translate(-50%,-50%) translateX(calc(var(--pos)*var(--w)*.84)) rotate(calc(var(--pos)*7deg)) scale(calc(1 - var(--abs)*.13));
  z-index:calc(10 - var(--abs));
  transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .9s ease;
  filter:brightness(calc(1 - var(--abs)*.45)) saturate(calc(1 - var(--abs)*.3));
  cursor:pointer;text-decoration:none;color:inherit;display:block;
  -webkit-tap-highlight-color:transparent;
}
#redes-sociais .card .face{
  position:absolute;inset:0;border-radius:14px;overflow:hidden;
  background-color:var(--cafe);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(226,6,19,.45),0 0 0 7px rgba(10,5,5,.92),0 0 0 8px rgba(136,16,2,.8);
  transition:box-shadow .6s ease, transform .6s ease;
}
/* integração: a foto é um <img> de verdade (como no Portfólio e nos Depoimentos),
   com src relativo ao HTML — resolve igual em http e em file://, sem depender do CSS.
   Antes era background-image, que falhava no navegador do Victor (resolução do url()). */
#redes-sociais .card .face img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:var(--fpos,center top);z-index:0;
}
#redes-sociais .card.ativo .face{box-shadow:0 40px 80px -24px rgba(0,0,0,.95),0 0 0 1px rgba(226,6,19,.75),0 0 0 7px rgba(10,5,5,.92),0 0 0 8px var(--vermelho),0 0 46px -6px rgba(226,6,19,.55)}
/* leitura do texto: só gradientes por cima da foto, que fica intacta */
#redes-sociais .card .face::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,5,5,.82) 0%,rgba(10,5,5,.25) 30%,transparent 46%,transparent 66%,rgba(10,5,5,.85) 100%)}
/* cantoneiras */
#redes-sociais .canto{position:absolute;width:18px;height:18px;border:2px solid var(--vermelho);opacity:.9;z-index:2}
#redes-sociais .canto.tl{top:9px;left:9px;border-right:0;border-bottom:0}
#redes-sociais .canto.tr{top:9px;right:9px;border-left:0;border-bottom:0}
#redes-sociais .canto.bl{bottom:9px;left:9px;border-right:0;border-top:0}
#redes-sociais .canto.br{bottom:9px;right:9px;border-left:0;border-top:0}

#redes-sociais .txt{position:absolute;left:0;right:0;top:7%;text-align:center;z-index:2;padding:0 8%}
#redes-sociais .rs-eyebrow{display:block;font-size:4.1cqw;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:rgba(239,227,207,.85);margin-bottom:1.6cqw}
#redes-sociais .nome{display:block;font-family:var(--f-display);font-weight:400;line-height:.95;color:var(--osso);
  font-size:var(--fs);letter-spacing:.02em;text-shadow:0 3px 0 rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.6)}
#redes-sociais .traco{display:block;width:16cqw;height:2px;margin:3.4cqw auto 0;background:var(--vermelho)}

/* coluna de kanji (conceito de cada card) */
#redes-sociais .kanji{position:absolute;right:6.5%;top:31%;z-index:2;writing-mode:vertical-rl;
  display:flex;align-items:center;gap:2.4cqw}
#redes-sociais .kanji.esq{right:auto;left:6.5%}
#redes-sociais .kanji b{font-family:var(--kanji);font-weight:900;font-size:9cqw;line-height:1;color:var(--vermelho);
  text-shadow:0 2px 8px rgba(0,0,0,.7)}
#redes-sociais .kanji i{font-style:normal;font-size:2.7cqw;font-weight:700;letter-spacing:.5em;text-transform:uppercase;color:rgba(239,227,207,.7)}

/* pílula */
#redes-sociais .pilula{
  position:absolute;left:50%;bottom:7%;transform:translateX(-50%);z-index:2;white-space:nowrap;
  display:flex;align-items:center;gap:3cqw;padding:2.6cqw 5cqw;border-radius:999px;
  background:rgba(10,5,5,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(226,6,19,.55);
  font-size:3.6cqw;font-weight:700;letter-spacing:.08em;color:var(--osso);
}
#redes-sociais .pilula svg{width:4.6cqw;height:4.6cqw;fill:var(--osso);flex:none}
#redes-sociais .pilula .sep{width:1px;height:4cqw;background:rgba(239,227,207,.35)}
#redes-sociais .pilula em{font-style:normal;font-weight:500;letter-spacing:.02em;color:rgba(239,227,207,.8)}

/* hover: tilt leve só no card ativo, peças inteiras */
@media (hover:hover){
  #redes-sociais .card.ativo:hover .face{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0)}
}

/* indicadores */
#redes-sociais .pontos{position:relative;z-index:1;display:flex;gap:10px;margin-top:clamp(8px,2vh,20px)}
#redes-sociais .pontos button{width:34px;height:3px;border:0;border-radius:2px;background:rgba(239,227,207,.25);cursor:pointer;transition:background .4s,width .4s;padding:0}
#redes-sociais .pontos button.on{background:var(--vermelho);width:52px}
#redes-sociais .pontos button:focus-visible,#redes-sociais .card:focus-visible{outline:2px solid var(--osso);outline-offset:6px}

/* pétalas de bordo */
#redes-sociais .petalas{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#redes-sociais .petala{position:absolute;top:-40px;width:var(--s);height:var(--s);opacity:.85;
  animation:rs-cair var(--d) linear var(--dl) infinite}
#redes-sociais .petala svg{width:100%;height:100%;fill:var(--c);animation:rs-girar calc(var(--d)/2.5) ease-in-out infinite alternate}
@keyframes rs-cair{0%{transform:translate(0,0)}100%{transform:translate(var(--dx),115vh)}}
@keyframes rs-girar{0%{transform:rotate(-40deg)}100%{transform:rotate(80deg)}}

/* integração: fora da tela, pausa as animações CSS (como o hero e os Depoimentos) */
#redes-sociais.is-fora .luz,
#redes-sociais.is-fora .petala,
#redes-sociais.is-fora .petala svg{animation-play-state:paused}

@media (max-width:640px){
  #redes-sociais.is-perto{background-image:url("../assets/redes/bg-shoji-mobile.webp");background-position:center 55%}
  #redes-sociais .luz{background:radial-gradient(ellipse 60% 34% at 50% 55%,rgba(226,6,19,.28),transparent 70%)}
  #redes-sociais .leque{--w:min(66vw,290px)}
  #redes-sociais .card{transform:translate(-50%,-50%) translateX(calc(var(--pos)*var(--w)*.52)) rotate(calc(var(--pos)*6deg)) scale(calc(1 - var(--abs)*.16))}
  #redes-sociais .rs-head h2{font-size:clamp(34px,10vw,48px)}
}
@media (prefers-reduced-motion:reduce){
  #redes-sociais .luz,#redes-sociais .petala,#redes-sociais .petala svg{animation:none}#redes-sociais .petalas{display:none}
  #redes-sociais .card{transition:none}
}