/* =====================================================================
   REDES SOCIAIS · Dom Calais (a última seção da página)
   Um carrossel de ilhas: cada rede é um card de moldura dourada em cima de uma ilha flutuante,
   e as seis giram em volta da câmera, sobre o cenário das ilhas desfocado. Só a da frente
   aparece: a que sai voa para o fundo de um lado, a próxima vem do fundo do outro e pousa com
   uma onda de ki. O cenário gira junto, um pouco. Embaixo, as esferas do dragão (1 a 6
   estrelas, as mesmas da esfera de cada card) escolhem a rede; a da vez tem um anel que enche
   enquanto o carrossel anda sozinho (para no primeiro toque, seta ou tecla).
   Artes do cliente: título, moldura, ilha e os ícones em pixel art; o miolo escuro da moldura
   foi vazado para o ícone ir atrás dela, como na referência.
   Classes .rd-*. Comportamento em js/redes.js.
   ===================================================================== */
@font-face{ font-family:'Bangers'; src:url("../assets/fonts/bangers-latin-400-normal.woff2?v=2bc90bd8") format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

/* --T é a largura da ilha e mede tudo no carrossel (card, setas, onda, nome). Ela sai da altura
   da tela: o título, as esferas e as folgas somam ~290px, e a pilha card + ilha tem 1,14 T de
   altura, mais 0,03 T em cima para a flutuação não levar a esfera do card até o título (1,17 T).
   Assim o card fica o maior possível sem a seção passar de uma tela */
.rd{
  --T:clamp(170px, min(40vw, calc((100vh - 290px) / 1.17)), 640px);
  --T:clamp(170px, min(40vw, calc((100svh - 290px) / 1.17)), 640px);
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(8px, 1.6vh, 18px);
  padding:clamp(14px, 3vh, 34px) clamp(12px, 3vw, 56px) clamp(16px, 3.5vh, 40px);
  background:#2a6fc0; color:#fff;
  -webkit-tap-highlight-color:transparent;
}
.rd *, .rd *::before, .rd *::after{ box-sizing:border-box }

/* ---------- cenário: as ilhas da Mentoria, desfocadas no próprio arquivo (desfoque em CSS
   numa imagem de tela cheia custa caro no celular). O arquivo é pequeno: o desfoque esconde a
   resolução. Passa 5% de cada lado para girar com o carrossel (--giro, de -2,5 a 2,5) ---------- */
.rd-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden }
.rd-bg picture{ display:contents }
.rd-bg img{
  position:absolute; inset:-3% -5%; width:110%; height:106%; max-width:none; object-fit:cover; object-position:50% 40%;
  translate:calc(var(--giro, 0) * -1.4%) 0;
  transition:translate 1.2s cubic-bezier(.3,.7,.3,1);
}
.rd-bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(3,14,44,.42) 100%),
    linear-gradient(180deg, rgba(3,18,58,.18), transparent 30%, transparent 75%, rgba(3,18,58,.3));
}
.rd-faiscas{ position:absolute; inset:0 }
.rd-faisca{
  position:absolute; bottom:-4%; left:var(--x); width:var(--s); height:var(--s); border-radius:50%;
  background:radial-gradient(circle, #fff8c8 0%, #ffd84a 45%, rgba(255,190,0,0) 72%);
  opacity:0; animation:rdSubir var(--d) linear var(--dl) infinite;
}
@keyframes rdSubir{
  0%{ transform:translateY(0) scale(.6); opacity:0 } 12%{ opacity:.85 } 80%{ opacity:.5 }
  100%{ transform:translateY(-105vh) scale(1.1); opacity:0 }
}

/* ---------- título, no topo ---------- */
.rd-titulo{ position:relative; z-index:3; margin:0; line-height:0; width:min(38vw, 540px); filter:drop-shadow(0 8px 14px rgba(0,10,40,.4)) }
.rd-titulo img{ display:block; width:100%; height:auto }
.rd-titulo:focus{ outline:none }

/* ---------- o carrossel ocupa o resto da tela, com o palco no meio ---------- */
.rd-carrossel{
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(10px, 2.2vh, 24px); width:var(--T);
}
.rd-palco{ position:relative; width:var(--T); margin-top:calc(var(--T) * .03); touch-action:pan-y }
.rd-ilhas{ position:relative; z-index:1; list-style:none; margin:0; padding:0; display:grid }

/* uma ilha: o card em cima, a terra embaixo, com a borda de baixo do card pousada no gramado */
.rd-ilha{
  --dur:6s; --atraso:0s;
  grid-area:1 / 1; position:relative; display:flex; flex-direction:column; align-items:center;
  animation:rdFlutua var(--dur) ease-in-out var(--atraso) infinite;
}
/* cada ilha flutua no seu ritmo (durações sem divisor comum, como as nuvens do hero) */
.rd-ilha:nth-child(1){ --dur:5.3s; --atraso:-1.1s }
.rd-ilha:nth-child(2){ --dur:6.1s; --atraso:-3.7s }
.rd-ilha:nth-child(3){ --dur:4.7s; --atraso:-.4s }
.rd-ilha:nth-child(4){ --dur:6.7s; --atraso:-2.3s }
.rd-ilha:nth-child(5){ --dur:5.9s; --atraso:-4.6s }
.rd-ilha:nth-child(6){ --dur:6.4s; --atraso:-2.9s }
@keyframes rdFlutua{ 50%{ transform:translateY(calc(var(--T) * -.03)) } }

/* o card: a moldura por cima, o ícone da rede atrás dela, no miolo vazado. Medidas em % da
   moldura (1313x1198 na arte): miolo de x 233 a 1080 e y 266 a 924 (+12px de folga por baixo
   do contorno); esfera do topo com centro em (655, 153) e raio 115; placa do nome de x 276 a
   1023 e y 968 a 1067. O card tem 75,86% da ilha */
.rd-card{
  position:relative; z-index:2; display:block; width:75.86%; aspect-ratio:1313 / 1198;
  color:inherit; text-decoration:none; outline:none;
  transition:transform .25s cubic-bezier(.3,1.4,.5,1);
  -webkit-user-drag:none; user-select:none;
}
.rd-card__tela{ position:absolute; left:16.83%; top:21.2%; width:66.34%; height:56.93%; overflow:hidden; background:#0b0b0b }
/* ícone quadrado num vão mais largo que alto: cobre o vão cortando em cima e embaixo (a moldura
   esconde essas bordas), sem esticar a arte */
.rd-card__icone{ display:block; width:100%; height:100%; object-fit:cover }
.rd-card__moldura{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; filter:drop-shadow(0 8px 10px rgba(0,12,45,.4)) }
.rd-card__estrelas{ position:absolute; left:41.13%; top:3.21%; width:17.52%; aspect-ratio:1; overflow:visible; pointer-events:none }
.rd-card__estrelas polygon, .rd-esfera polygon{ fill:#d7261e; stroke:#8e0f0a; stroke-width:4; stroke-linejoin:round }
.rd-card__nome{
  position:absolute; left:21.02%; top:80.8%; width:56.89%; height:8.26%;
  display:grid; place-items:center;
  font:400 calc(var(--T) * .046)/1 'Bangers', Impact, sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:#ffe45c; text-shadow:0 2px 0 #0c0a12, 0 0 6px rgba(0,0,0,.5);
}
.rd-ilha__terra{ position:relative; z-index:1; display:block; width:100%; height:auto; margin-top:-14.66%; pointer-events:none; user-select:none }

/* mouse ou foco: o card sobe e a moldura acende */
.rd-card:hover, .rd-card:focus-visible{ transform:translateY(-8px) scale(1.04) }
.rd-card:hover .rd-card__moldura, .rd-card:focus-visible .rd-card__moldura{ filter:drop-shadow(0 0 14px rgba(255,214,80,.85)) drop-shadow(0 8px 10px rgba(0,12,45,.4)) }
.rd-card:focus-visible .rd-card__nome{ color:#fff }

/* ---------- o giro (só com JS; data-pos vem do redes.js: 0 é a da frente, ±1 as vizinhas,
   ±2 e 3 as de trás). A posição usa translate/scale/rotate e a flutuação usa transform: as duas
   convivem. Quem sai apaga logo; quem chega acende um pouco depois, já perto do centro ---------- */
.rd--js .rd-ilha{
  --curva:cubic-bezier(.55,.05,.25,1);
  opacity:0; pointer-events:none;
  transition:translate .9s var(--curva), scale .9s var(--curva), rotate .9s var(--curva), opacity .4s ease;
}
.rd--js .rd-ilha[data-pos="0"]{
  opacity:1; pointer-events:auto;
  translate:var(--arrasto, 0px) 0; rotate:var(--inclina, 0deg);
  transition:translate .9s var(--curva), scale .9s var(--curva), rotate .9s var(--curva), opacity .5s .25s ease;
}
.rd--js .rd-ilha[data-pos="1"]{ translate:68% -18%; scale:.34; rotate:9deg }
.rd--js .rd-ilha[data-pos="-1"]{ translate:-68% -18%; scale:.34; rotate:-9deg }
.rd--js .rd-ilha[data-pos="2"]{ translate:30% -30%; scale:.18 }
.rd--js .rd-ilha[data-pos="-2"]{ translate:-30% -30%; scale:.18 }
.rd--js .rd-ilha[data-pos="3"], .rd--js .rd-ilha[data-pos="-3"]{ translate:0 -34%; scale:.12 }
.rd--js .rd-ilha:not([data-pos="0"]){ animation-play-state:paused }
/* arrastando com o dedo: a ilha segue o dedo, sem transição */
.rd--arrastando .rd-ilha{ transition:none !important }

/* a onda de ki do pouso, atrás da ilha, centrada no card (o redes.js anima) */
.rd-onda{
  position:absolute; z-index:0; left:50%; top:calc(var(--T) * .346);
  width:calc(var(--T) * .82); aspect-ratio:1; margin:calc(var(--T) * -.41) 0 0 calc(var(--T) * -.41);
  border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(255,236,150,0) 50%, rgba(255,226,110,.8) 61%, rgba(255,184,40,.35) 67%, rgba(255,160,0,0) 73%);
}

/* ---------- setas, as mesmas da Mentoria, na altura do meio do card ---------- */
.rd-seta{
  --vao:clamp(4px, 3.4vw, 64px);
  position:absolute; z-index:3; top:calc(var(--T) * .346);
  width:clamp(30px, 3.2vw, 52px); aspect-ratio:40 / 56; margin:0; padding:0;
  translate:0 -50%;
  display:grid; place-items:center; border:0; background:none; color:inherit; cursor:pointer;
  filter:drop-shadow(0 3px 4px rgba(0,10,40,.45));
  transition:scale .2s;
}
.rd-seta--ant{ right:calc(87.93% + var(--vao)); animation:rdCutucaE 1.8s ease-in-out infinite }
.rd-seta--prox{ left:calc(87.93% + var(--vao)); animation:rdCutucaD 1.8s ease-in-out infinite }
.rd-seta svg{ width:100%; height:100%; overflow:visible; fill:none; stroke-linecap:round; stroke-linejoin:round }
.rd-seta .o{ stroke:#1a0b02; stroke-width:15 }
.rd-seta .i{ stroke:#ffcf3a; stroke-width:8; transition:stroke .2s }
.rd-seta:hover{ scale:1.12 }
.rd-seta:hover .i, .rd-seta:focus-visible .i{ stroke:#fff6b0 }
.rd-seta:focus-visible{ outline:none; filter:drop-shadow(0 0 8px rgba(255,214,60,.9)) }
@keyframes rdCutucaE{ 50%{ transform:translateX(-5px) } }
@keyframes rdCutucaD{ 50%{ transform:translateX(5px) } }

/* ---------- as esferas do dragão (criadas pelo redes.js) ---------- */
.rd-esferas{
  --bola:clamp(30px, 2.7vw, 44px);
  display:flex; align-items:center; justify-content:center; gap:clamp(12px, 1.4vw, 24px);
  min-height:calc(var(--bola) * 1.4);
}
.rd-esfera{
  position:relative; flex:none; width:var(--bola); aspect-ratio:1; margin:0; padding:0;
  border:0; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 34% 30%, #fff8d6 0 8%, #ffcf5a 22%, #f58a14 60%, #b54a06 100%);
  box-shadow:0 0 0 2px #4a2205, 0 4px 8px rgba(0,12,45,.4);
  filter:saturate(.5) brightness(.78);
  transition:scale .3s cubic-bezier(.3,1.5,.5,1), filter .3s, box-shadow .3s;
}
.rd-esfera:hover{ filter:none }
.rd-esfera[aria-current="true"]{ scale:1.3; filter:none; box-shadow:0 0 0 2px #4a2205, 0 0 16px 3px rgba(255,190,50,.85) }
.rd-esfera:focus-visible{ outline:2px solid #fff; outline-offset:5px }
.rd-esfera__estrelas{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none }
/* o anel do giro automático: enche em 5 s e, quando fecha, o carrossel anda (animationend no
   redes.js). Por ser animação de CSS, ele para sozinho com a seção fora da tela (pagina.css),
   com o mouse em cima ou o foco no carrossel */
.rd-esfera__anel{ position:absolute; inset:-5px; width:calc(100% + 10px); height:calc(100% + 10px); rotate:-90deg; overflow:visible; opacity:0; pointer-events:none }
.rd-esfera__anel circle{ fill:none; stroke:#fff3b0; stroke-width:2.6; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100 }
.rd--auto.rd--dentro .rd-esfera[aria-current="true"] .rd-esfera__anel{ opacity:1 }
.rd--auto.rd--dentro .rd-esfera[aria-current="true"] .rd-esfera__anel circle{ animation:rdAnel 5s linear forwards }
.rd-carrossel:hover .rd-esfera__anel circle, .rd-carrossel:focus-within .rd-esfera__anel circle{ animation-play-state:paused }
@keyframes rdAnel{ to{ stroke-dashoffset:0 } }

.rd-sr{ position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ---------- sem JavaScript: as ilhas lado a lado, sem setas ---------- */
.rd:not(.rd--js) .rd-carrossel, .rd:not(.rd--js) .rd-palco{ width:min(100%, 1400px) }
.rd:not(.rd--js) .rd-ilhas{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px }
.rd:not(.rd--js) .rd-ilha{ --T:clamp(150px, 18vw, 260px); width:var(--T) }
.rd:not(.rd--js) .rd-seta{ display:none }

/* ---------- entrada (só com JS: sem ele, tudo já aparece) ---------- */
.rd--js:not(.rd--dentro) .rd-titulo{ opacity:0; transform:translateY(-30px) scale(.94) }
.rd--js:not(.rd--dentro) .rd-palco, .rd--js:not(.rd--dentro) .rd-esferas{ opacity:0 }
.rd--dentro .rd-titulo{ animation:rdDesce .7s cubic-bezier(.2,1.3,.4,1) both }
.rd--dentro .rd-palco{ animation:rdSobe .8s .12s cubic-bezier(.2,1.2,.4,1) both }
.rd--dentro .rd-esferas{ animation:rdSobe .6s .3s ease both }
@keyframes rdDesce{ from{ opacity:0; transform:translateY(-30px) scale(.94) } to{ opacity:1; transform:none } }
@keyframes rdSobe{ from{ opacity:0; transform:translateY(50px) scale(.92) } to{ opacity:1; transform:none } }

/* =====================================================================
   CELULAR E RETRATO: a ilha quase na largura da tela, setas nas laterais do card
   ===================================================================== */
@media (max-width:767px), (max-aspect-ratio:1/1){
  /* a ilha na largura inteira da tela: o card fica com 76% dela */
  .rd{
    --T:clamp(200px, min(100vw, calc((100vh - 250px) / 1.17)), 560px);
    --T:clamp(200px, min(100vw, calc((100svh - 250px) / 1.17)), 560px);
    padding-inline:0;
  }
  .rd-titulo{ width:min(88vw, 560px) }
  .rd-seta{ --vao:clamp(4px, 1.6vw, 12px); width:clamp(28px, 8vw, 42px) }
  .rd-esferas{ --bola:clamp(28px, 8vw, 40px); gap:clamp(12px, 4vw, 22px) }
}

@media (prefers-reduced-motion: reduce){
  .rd-ilha, .rd-titulo, .rd-palco, .rd-esferas, .rd-seta{ animation:none !important }
  .rd--js:not(.rd--dentro) .rd-titulo, .rd--js:not(.rd--dentro) .rd-palco, .rd--js:not(.rd--dentro) .rd-esferas{ opacity:1; transform:none }
  /* sem o voo: a ilha da vez só aparece no lugar */
  .rd--js .rd-ilha{ translate:none !important; scale:none !important; rotate:none !important; transition:opacity .25s !important }
  .rd-bg img{ transition:none }
  .rd-faiscas, .rd-onda{ display:none }
  .rd-card{ transition:none }
}