/* ============================================================
   SEÇÃO REDES SOCIAIS — Capítulo 05: Transmissão
   Prefixo .rs- para não conflitar com o resto do site
   ============================================================ */
.rs{
  --rs-ink:#0a0a0a;
  --rs-paper:#f4f1ea;
  --rs-night:#121212;
  --rs-card-h:clamp(320px, calc(100vh - 21vh - 290px), 640px);
  --rs-card-h:clamp(320px, calc(100svh - 21svh - 290px), 640px);
  --rs-card-w:calc(var(--rs-card-h) * .6755);
  position:relative;
  box-sizing:border-box;
  isolation:isolate;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-items:center;
  gap:clamp(10px, 2vh, 22px);
  padding:clamp(28px, 5vh, 56px) 16px clamp(22px, 4vh, 40px);
  overflow:hidden;
  color:var(--rs-ink);
  background:var(--rs-night);
  font-family:'Bangers', system-ui, sans-serif;
}
.rs *{box-sizing:border-box}

/* ---------- fundo ---------- */
.rs-bg{
  position:absolute; inset:-14px; z-index:-2;
  background:url('img/bg-redes-2560.webp') center/cover no-repeat;
  transform:translate3d(var(--rs-px,0), var(--rs-py,0), 0) scale(1.02);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
@media (max-width:1100px){ .rs-bg{ background-image:url('img/bg-redes-1280.webp'); } }
/* celular / tablet em pé: fundo vertical */
@media (orientation:portrait) and (max-width:1024px){
  .rs-bg{ background-image:url('img/bg-redes-mobile.webp'); background-position:center top; }
}
/* vinheta + luz suave atrás dos cards */
.rs-tone{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 30% 38% at 50% 60%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.15), transparent 30%, transparent 75%, rgba(0,0,0,.35));
}
/* moldura branca fina, igual às outras seções */
.rs::after{
  content:""; position:absolute; inset:10px; z-index:5; pointer-events:none;
  border:3px solid #fff; outline:2px solid var(--rs-ink); outline-offset:-5px;
}

/* ---------- onomatopeias nas bordas ---------- */
.rs-sfx{
  position:absolute; z-index:1; pointer-events:none; line-height:.9; white-space:nowrap;
  font-family:'Dela Gothic One', sans-serif; color:#fff; letter-spacing:-.04em;
  -webkit-text-stroke:.07em var(--rs-ink); paint-order:stroke fill;
  text-shadow:.06em .07em 0 var(--rs-ink);
  opacity:.92;
  animation:rs-jitter 2.6s steps(2) infinite;
}
.rs-sfx--a{ left:-.12em; top:44%; font-size:clamp(70px, 9vw, 150px); --r:-14deg; transform:rotate(var(--r)) }
.rs-sfx--b{ right:-.08em; bottom:7%; font-size:clamp(60px, 7.4vw, 124px); --r:12deg; transform:rotate(var(--r)); animation-delay:-1.3s }
@keyframes rs-jitter{ 0%,100%{ transform:rotate(var(--r)) translate(0,0) } 50%{ transform:rotate(var(--r)) translate(1px,-2px) } }

/* ---------- cabeçalho ---------- */
.rs-head{ text-align:center; display:grid; justify-items:center; gap:6px; position:relative; z-index:3 }
.rs-chapter{
  display:inline-block; transform:rotate(-2deg);
  background:#fff; color:var(--rs-ink);
  border:3px solid var(--rs-ink); box-shadow:0 0 0 2px #fff, 6px 6px 0 2px var(--rs-ink), 6px 6px 0 4px #fff;
  padding:6px 14px 3px; font-size:clamp(15px, 1.5vw, 20px); letter-spacing:1.5px;
}
.rs-title{ position:relative; margin:-2px 0 -4px; line-height:.9; font-weight:400; display:grid; justify-items:center }
/* carimbo 戦 batido no canto do título */
.rs-title img.rs-stamp{
  position:absolute; right:-11%; top:-26%; width:auto; height:74%; max-width:none;
  transform:rotate(12deg); transform-origin:50% 50%;
  filter:drop-shadow(5px 6px 0 var(--rs-ink)) drop-shadow(0 0 1px rgba(255,255,255,.4));
  pointer-events:none; z-index:2;
}
.rs:not(.is-in) .rs-stamp{ opacity:0 }
.rs.is-in .rs-stamp{ animation:rs-stamp .55s .45s cubic-bezier(.2,1.4,.4,1) both }
@keyframes rs-stamp{
  0%{ opacity:0; transform:rotate(32deg) scale(2.3) }
  60%{ opacity:1; transform:rotate(9deg) scale(.92) }
  80%{ transform:rotate(13deg) scale(1.04) }
  100%{ opacity:1; transform:rotate(12deg) scale(1) }
}
.rs-title img{ display:block; height:clamp(100px, 21vh, 210px); width:auto; max-width:88vw; object-fit:contain;
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.35)); }
.rs-sub{
  margin:6px 0 0; display:inline-block; transform:rotate(-1deg);
  background:var(--rs-ink); color:#fff; padding:6px 14px 3px;
  font-size:clamp(13px, 1.25vw, 18px); letter-spacing:2px; border:2px solid #fff; outline:2px solid var(--rs-ink);
}
.rs-sub b{ font-weight:400; background:#fff; color:var(--rs-ink); padding:0 6px; white-space:nowrap }

/* ---------- palco / carrossel ---------- */
.rs-stage{
  position:relative; z-index:2; height:calc(var(--rs-card-h) + 30px);
  display:flex; align-items:center; justify-content:center;
}
.rs-track{
  list-style:none; margin:0; padding:0; position:relative;
  width:var(--rs-card-w); height:var(--rs-card-h);
  perspective:1400px; touch-action:pan-y; user-select:none;
}
.rs-card{
  position:absolute; inset:0;
  transition:transform .7s cubic-bezier(.2,.8,.2,1), filter .7s, opacity .7s;
  will-change:transform;
}
.rs-card a{ display:block; width:100%; height:100%; position:relative; outline:none }
.rs-card img{
  display:block; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(12px 14px 0 var(--rs-ink)) drop-shadow(0 0 1px rgba(255,255,255,.35));
  transition:filter .3s, transform .3s;
  -webkit-user-drag:none;
}
/* posições: definidas pelo JS em data-pos */
.rs-card[data-pos="0"]{ transform:translate3d(0,0,0) rotateZ(0) scale(1); z-index:3 }
.rs-card[data-pos="-1"]{ transform:translate3d(-74%, 4%, -160px) rotateY(16deg) rotateZ(-5deg) scale(.84); z-index:2; filter:brightness(.7) contrast(1.05) }
.rs-card[data-pos="1"]{ transform:translate3d(74%, 4%, -160px) rotateY(-16deg) rotateZ(5deg) scale(.84); z-index:2; filter:brightness(.7) contrast(1.05) }
.rs-card[data-pos="-1"] a,.rs-card[data-pos="1"] a{ cursor:pointer }
.rs-card[data-pos="0"] a:hover img,
.rs-card[data-pos="0"] a:focus-visible img{ transform:translateY(-8px) rotate(-.6deg); filter:drop-shadow(16px 20px 0 var(--rs-ink)) }
.rs-card[data-pos="0"] a:focus-visible{ outline:4px dashed var(--rs-ink); outline-offset:10px }

/* chiado de TV ao trocar de canal */
.rs-static{
  position:absolute; inset:3.5% 5.3% 3.6% 5.2%; pointer-events:none; opacity:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 2px, transparent 2px 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    #111;
  mix-blend-mode:normal;
}
.rs-card.is-tuning .rs-static{ animation:rs-tune .42s steps(6) both }
@keyframes rs-tune{
  0%{ opacity:.95; background-position:0 0, 0 0 }
  50%{ opacity:.8; background-position:0 6px, 40px -30px }
  100%{ opacity:0; background-position:0 12px, -30px 50px }
}

/* setas (mesmo estilo do portfólio) */
.rs-arrow{
  position:absolute; top:50%; z-index:4; transform:translateY(-50%);
  width:54px; height:54px; display:grid; place-items:center; cursor:pointer;
  background:#fff; border:3px solid var(--rs-ink); box-shadow:5px 5px 0 var(--rs-ink), 5px 5px 0 2px #fff;
  transition:transform .15s, box-shadow .15s;
}
.rs-arrow svg{ width:22px; height:22px; fill:var(--rs-ink) }
.rs-arrow:hover{ transform:translateY(calc(-50% - 2px)); box-shadow:7px 7px 0 var(--rs-ink), 7px 7px 0 2px #fff }
.rs-arrow:active{ transform:translateY(calc(-50% + 3px)); box-shadow:2px 2px 0 var(--rs-ink), 2px 2px 0 2px #fff }
.rs-arrow:focus-visible{ outline:3px dashed var(--rs-ink); outline-offset:4px }
.rs-prev{ left:max(18px, calc(50% - var(--rs-card-w) * 1.22 - 66px)) }
.rs-next{ right:max(18px, calc(50% - var(--rs-card-w) * 1.22 - 66px)) }

/* ---------- rodapé: contador + barras ---------- */
.rs-foot{ display:flex; align-items:center; justify-content:center; gap:16px; position:relative; z-index:3 }
.rs-count{
  background:var(--rs-ink); color:#fff; border:3px solid #fff; outline:3px solid var(--rs-ink);
  padding:6px 14px 2px; font-size:24px; letter-spacing:2px; transform:skewX(-8deg);
}
.rs-count b{ font-weight:400 }
.rs-dots{ display:flex; gap:8px; padding:8px 10px; background:var(--rs-ink); transform:skewX(-8deg); outline:3px solid #fff }
.rs-dot{
  width:34px; height:10px; padding:0; cursor:pointer;
  background:transparent; border:2px solid #fff; transition:width .3s, background .3s;
}
.rs-dot[aria-selected="true"]{ width:56px; background:#fff }
.rs-dot:focus-visible{ outline:2px dashed #fff; outline-offset:3px }

/* ---------- entrada da seção ---------- */
.rs:not(.is-in) .rs-card{ opacity:0; transform:translate3d(0,40px,0) rotateZ(-6deg) scale(.9) }
.rs:not(.is-in) .rs-head{ opacity:0; transform:translateY(-14px) }
.rs-head{ transition:opacity .6s, transform .6s }

/* ---------- responsivo ---------- */
@media (max-width:820px){
  .rs{ --rs-card-h:min(calc(100vh - 440px), calc(70vw / .6755)); --rs-card-h:min(calc(100svh - 440px), calc(70vw / .6755)); }
  .rs-card[data-pos="-1"]{ transform:translate3d(-48%, 5%, -200px) rotateY(18deg) rotateZ(-5deg) scale(.78) }
  .rs-card[data-pos="1"]{ transform:translate3d(48%, 5%, -200px) rotateY(-18deg) rotateZ(5deg) scale(.78) }
  .rs-arrow{ width:42px; height:42px; box-shadow:4px 4px 0 var(--rs-ink) }
  .rs-prev{ left:6px } .rs-next{ right:6px }
  .rs-stage{ height:calc(var(--rs-card-h) + 24px) }
  .rs-title img:not(.rs-stamp){ width:min(78vw, calc(14vh * 3.1)); height:auto }
}
/* celular: o card manda no tamanho (largura da tela), a seção pode passar de uma tela */
@media (max-width:600px){
  .rs{ --rs-card-h:calc(78vw / .6755); gap:14px }
  .rs-card[data-pos="-1"]{ transform:translate3d(-40%, 4%, -220px) rotateY(18deg) rotateZ(-5deg) scale(.8) }
  .rs-card[data-pos="1"]{ transform:translate3d(40%, 4%, -220px) rotateY(-18deg) rotateZ(5deg) scale(.8) }
  /* setas descem para a linha do contador, deixando o card livre */
  .rs-arrow{ width:38px; height:38px; top:auto; bottom:-53px; transform:none; box-shadow:3px 3px 0 var(--rs-ink), 3px 3px 0 2px #fff }
  .rs-arrow:hover,.rs-arrow:active{ transform:none }
  .rs-arrow svg{ width:16px; height:16px }
  .rs-prev{ left:14px } .rs-next{ right:14px }
  .rs-stage{ height:calc(var(--rs-card-h) + 20px) }
}
@media (max-width:480px){
  .rs-sub{ letter-spacing:1px; max-width:88vw; font-size:12px; line-height:1.5 }
  .rs-sfx{ display:none }
  .rs-title img.rs-stamp{ right:-6%; top:-34%; height:62% }
  .rs-count{ font-size:19px; padding:6px 10px 2px }
  .rs-foot{ gap:12px }
  .rs-dot{ width:20px } .rs-dot[aria-selected="true"]{ width:34px }
}
@media (prefers-reduced-motion:reduce){
  .rs-card,.rs-bg,.rs-head{ transition:none }
  .rs-card.is-tuning .rs-static{ animation:none }
  .rs-sfx{ animation:none }
  .rs.is-in .rs-stamp{ animation:none }
}