/* ==========================================================================
   Seção: REDES SOCIAIS (#redes-sociais) — o portão
   Integrada do pacote "icaro-redes-sociais" (ver docs/redes-sociais.md).
   Palco em coordenadas da arte original: 1672 × 941 (deitado)
   e 1024 × 1536 (em pé, @media orientation: portrait).
   O JS só calcula escala/posição (--base, --tx, --ty, --dolly).
   Mudanças na integração:
   - fontes em css/base/fonts.css (Shippori 500/800, League Gothic); botões = artes ilustradas;
   - paleta com prefixo --rs-* (o --rs-ink do pacote colidia com o --rs-ink do site);
   - título no componente titulo-secao (igual aos outros títulos), abaixo da navbar;
   - leque de cards descontando a navbar e sem encolher em tela baixa;
   - animações em loop pausam fora da tela (.rs-fora, posta pelo JS).
   ========================================================================== */

.rs {
  --rs-ink: #050102;
  --rs-blood: #a3111a;
  --rs-ember: #ff5a3c;
  --rs-bone: #ebe1d3;
  --rs-ash: #9a8a83;

  --t-open: 2.3s;                              /* giro das folhas abrindo */
  --e-open: cubic-bezier(.55, .02, .2, 1);     /* peso: arranca devagar, freia no fim */
  --t-close: 1.7s;
  --e-close: cubic-bezier(.55, 0, .85, .35);   /* acelera e bate */
  --t-dolly: 1.8s;
  --e-dolly: cubic-bezier(.62, 0, .28, 1);

  --base: 1; --tx: 0px; --ty: 0px; --dolly: 4;

  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  isolation: isolate;
  background: var(--rs-ink);
  color: var(--rs-bone);
  font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  -webkit-tap-highlight-color: transparent;
}
.rs *, .rs *::before, .rs *::after { box-sizing: border-box; }
.rs img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }

/* ---------- fundo para telas altas ---------- */
.rs-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(70% 22% at 50% 100%, rgba(110, 8, 14, .22), rgba(5, 1, 2, 0)), var(--rs-ink);
  opacity: 0;
}
.rs.is-tall .rs-backdrop { opacity: 1; }

/* ---------- palco ---------- */
.rs-shake { position: absolute; inset: 0; }
.rs.is-rumble .rs-shake { animation: rs-rumble .7s linear; }
.rs.is-thud .rs-shake { animation: rs-thud .45s cubic-bezier(.2, .7, .3, 1); }

.rs-stage {
  position: absolute; left: 0; top: 0;
  width: 1672px; height: 941px;
  transform-origin: 0 0;
  transform: translate(var(--tx), var(--ty)) scale(var(--base));
}
/* telas altas: bordas do palco dissolvem no fundo (somem junto com o zoom) */
.rs-edge { left: -40px; width: 1752px; height: 110px; opacity: 0; pointer-events: none; }
.rs-edge--top { top: -2px; background: linear-gradient(to bottom, var(--rs-ink), rgba(5, 1, 2, 0)); }
.rs-edge--bot { top: 833px; background: linear-gradient(to top, var(--rs-ink), rgba(5, 1, 2, 0)); }
.rs.is-tall .rs-edge { opacity: 1; }
.rs-backdrop { transition: opacity 1.2s ease; }
.rs.is-inside .rs-backdrop { opacity: 0; }

.rs-cam {
  position: absolute; inset: 0;
  transform-origin: 835px 560px;          /* centro da vila vista pelo vão */
  transform: scale(1);
  transition: transform calc(var(--t-dolly) * .8) var(--e-dolly);
  will-change: transform;
}
.rs.is-inside .rs-cam {
  transform: scale(var(--dolly));
  transition: transform var(--t-dolly) var(--e-dolly);
}

.rs-cam > *, .rs-cam > picture > img { position: absolute; }
.rs picture { display: contents; }

/* camadas desfocadas: entram durante a travessia do portão */
.rs-blur { opacity: 0; transition: opacity .9s ease; }
.rs.is-inside .rs-blur { opacity: 1; transition: opacity 1.2s ease calc(var(--t-dolly) * .22); }

/* ---------- atrás do portão ---------- */
.rs-plate { left: 552px; top: 240px; width: 562px; height: 506px; }
.rs-plate--blur { position: absolute; }
.rs-plate-dim {
  left: 552px; top: 240px; width: 562px; height: 506px;
  background: var(--rs-ink);
  opacity: .62;
  transition: opacity var(--t-close) ease;
}
.rs.is-open .rs-plate-dim { opacity: 0; transition: opacity calc(var(--t-open) * .9) ease .25s; }

/* ---------- folhas ---------- */
.rs-doors {
  left: 0; top: 0; width: 1672px; height: 941px;
  perspective: 1300px;
  perspective-origin: 835px 715px;        /* horizonte baixo, câmera no chão */
}
.rs-door {
  position: absolute; top: 248px; height: 493px;
  backface-visibility: hidden;
  transition: transform var(--t-close) var(--e-close);
}
.rs-door--l { left: 560px; width: 278px; transform-origin: 12px 50%; }
.rs-door--r { left: 836px; width: 271px; transform-origin: 259px 50%; }
.rs.is-open .rs-door { transition: transform var(--t-open) var(--e-open); }
.rs.is-open .rs-door--l { transform: rotateY(74deg); }
.rs.is-open .rs-door--r { transform: rotateY(-74deg); }

.rs-door__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.rs-door__img--blur { left: -18px; top: -18px; width: calc(100% + 36px); height: calc(100% + 36px); }

/* versão "aberta": face mais escura + contraluz vermelha na borda livre */
.rs-door__img--lit { opacity: 0; transition: opacity var(--t-close) ease; }
.rs.is-open .rs-door__img--lit { opacity: 1; transition: opacity var(--t-open) ease .2s; }

/* ---------- luz pela fresta ---------- */
.rs-seam {
  left: 826px; top: 250px; width: 22px; height: 489px;
  background:
    linear-gradient(to bottom, rgba(255, 90, 60, 0), rgba(255, 150, 120, .95) 50%, rgba(255, 90, 60, 0)) center / 2px 100% no-repeat,
    radial-gradient(closest-side, rgba(255, 45, 30, .55), rgba(255, 30, 20, 0)) center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: .28;
  transform-origin: 50% 50%;
  animation: rs-breathe 3.8s ease-in-out infinite;
  transition: opacity .5s ease, transform .5s ease;
}
.rs-sill {
  left: 566px; top: 731px; width: 534px; height: 12px;
  background:
    linear-gradient(to right, rgba(255, 90, 60, 0), rgba(255, 150, 120, .9) 50%, rgba(255, 90, 60, 0)) center / 100% 2px no-repeat,
    radial-gradient(closest-side, rgba(255, 45, 30, .45), rgba(255, 30, 20, 0)) center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: .25;
  animation: rs-breathe 3.8s ease-in-out infinite;
  transition: opacity .5s ease;
}
.rs.is-hover .rs-seam, .rs.is-hover .rs-sill { animation: none; opacity: .75; }
.rs.is-unlocking .rs-seam { animation: none; opacity: 1; transform: scaleX(1.8); }
.rs.is-unlocking .rs-sill { animation: none; opacity: 1; }
.rs.is-open .rs-seam { opacity: 0; transform: scaleX(3); transition: opacity .8s ease .3s, transform 1s ease .1s; }
.rs.is-open .rs-sill { opacity: 0; transition: opacity 1.2s ease .6s; }
/* fechando: a fresta só volta a brilhar depois da batida */
.rs.is-closing .rs-seam, .rs.is-closing .rs-sill { animation: none; opacity: 0; transition: opacity .2s ease; }

/* ---------- moldura ---------- */
.rs-frame { left: 0; top: 0; width: 1672px; height: 941px; }

/* ---------- luz no chão ---------- */
.rs-reflect {
  left: 552px; top: 739px; width: 562px; height: 202px;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: 0;
  clip-path: inset(0 50% 0 50%);
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .35) 45%, transparent 85%);
          mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .35) 45%, transparent 85%);
  transition: opacity var(--t-close) ease, clip-path var(--t-close) var(--e-close);
}
.rs-reflect img {
  position: absolute; left: 0; top: -499px; width: 562px; height: 506px;
  transform-origin: 50% 499px;
  transform: scaleY(-1);
  filter: blur(1.5px);
}
.rs.is-open .rs-reflect {
  opacity: .55;
  clip-path: inset(0 0 0 0);
  transition: opacity var(--t-open) ease .2s, clip-path var(--t-open) var(--e-open);
}

.rs-floorlight {
  left: 470px; top: 735px; width: 732px; height: 206px;
  filter: blur(14px);                     /* desfoca depois do recorte: bordas macias */
  mix-blend-mode: screen;
  opacity: 0;
  transform: scaleX(.04);
  transform-origin: 50% 0;
  transition: opacity var(--t-close) ease, transform var(--t-close) var(--e-close);
}
.rs-floorlight::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(206px 0, 526px 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, rgba(255, 55, 40, .42), rgba(210, 20, 25, .13) 45%, rgba(0, 0, 0, 0) 92%);
}
.rs.is-open .rs-floorlight {
  opacity: 1; transform: scaleX(1);
  transition: opacity var(--t-open) ease .15s, transform var(--t-open) var(--e-open);
}

.rs-moon {
  left: 1387px; top: 85px; width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 50, 35, .35), rgba(255, 30, 20, 0));
  mix-blend-mode: screen;
  animation: rs-moon 7s ease-in-out infinite;
}

/* ---------- guardião no telhado ---------- */
.rs-guard {
  left: 1000px; top: 28px; width: 99.5px; height: 125px;
  transition: opacity .7s ease, filter .7s ease;
}
.rs-guard > *, .rs-guard__fig > * { position: absolute; }
.rs-guard__glow {                      /* contraluz: separa a silhueta do céu */
  left: -20px; top: -20px; width: 139.5px; height: 165px;
  mix-blend-mode: screen;
  opacity: .5;
  animation: rs-guard-glow 7s ease-in-out infinite;   /* mesmo ritmo da lua */
}
.rs-guard__fig {
  inset: 0;
  transform-origin: 50% 100%;
  animation: rs-guard-breath 5.2s ease-in-out infinite;
}
.rs-guard__body, .rs-guard__hair { left: 0; top: 0; width: 100%; height: 100%; }
.rs-guard__hair {                      /* mecha solta: gira inteira na raiz, com o vento */
  transform-origin: 60.81% 8.15%;
  animation: rs-guard-hair 3.6s ease-in-out infinite;
}
.rs-guard__eye {
  left: var(--x); top: var(--y);
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 120, 95, .95), rgba(255, 35, 25, .55) 45%, rgba(255, 0, 0, 0));
  mix-blend-mode: screen;
  opacity: .45;
  animation: rs-guard-eye 4.2s ease-in-out infinite;
  transition: transform .5s ease;
}
/* ele percebe o visitante: olhos acendem no hover do botão */
.rs.is-hover .rs-guard__eye,
.rs.is-unlocking .rs-guard__eye { animation: none; opacity: 1; transform: scale(1.7); }
.rs.is-hover .rs-guard__glow,
.rs.is-unlocking .rs-guard__glow { animation: none; opacity: .8; transition: opacity .5s ease; }
/* clique: ele se desfaz em corvos (some rápido enquanto a revoada cobre a silhueta) */
.rs.is-guard-gone .rs-guard { opacity: 0; transition: opacity .24s ease; }
/* entrando no portão: ele sai de quadro desfocado */
.rs.is-inside .rs-guard { opacity: 0; filter: blur(3px); }

@keyframes rs-guard-breath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.004, 1.012); } }
@keyframes rs-guard-hair {
  0%, 100% { transform: rotate(0deg); }
  28% { transform: rotate(5deg); }
  44% { transform: rotate(2.5deg); }
  68% { transform: rotate(6deg); }
  84% { transform: rotate(1.5deg); }
}
@keyframes rs-guard-eye { 0%, 100% { opacity: .4; } 50% { opacity: .9; } }
@keyframes rs-guard-glow { 0%, 100% { opacity: .38; } 50% { opacity: .6; } }

/* ---------- dentro do portão ---------- */
.rs-veil {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, rgba(5, 1, 2, .2), rgba(5, 1, 2, .78));
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
}
.rs.is-inside .rs-veil { opacity: 1; transition: opacity 1.4s ease calc(var(--t-dolly) * .35); }

.rs-leaves, .rs-crows {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}

.rs-head {
  /* título CENTRALIZADO, logo abaixo da navbar fixa (a seção para no topo da janela).
     O guardião fica no telhado logo à direita do centro, na altura do título: no
     tamanho dos outros títulos, ele cobria o corpo do Itachi (o pacote usava um título
     bem menor, 2,9vw). O JS (posicionaTitulo) mede isso a cada enquadramento:
     --rs-head-guarda = topo normal, ou logo abaixo do guardião se o título cruzar com
     ele (tela deitada). Aberto o portão (o guardião virou corvos), o título volta ao
     topo (--rs-head-topo), acima do leque de cards. */
  position: absolute; left: 0; right: 0;
  top: var(--rs-head-guarda, calc(var(--nav-h, 0px) + max(10px, 1.6vh)));
  pointer-events: none;
  transition: top .8s cubic-bezier(.2, .7, .2, 1);
}
.rs.is-guard-gone .rs-head { top: var(--rs-head-topo, calc(var(--nav-h, 0px) + max(10px, 1.6vh))); }
/* título no conceito dos outros títulos do site (componente titulo-secao:
   Cinzel + textura + ensō que se desenha). Aqui só tamanho, centro e a mesma
   flutuação leve dos Depoimentos. O pacote tinha um título provisório em Shippori. */
/* centralizado pela LARGURA DA CAIXA (toda a largura disponível) e não pela largura
   medida do título: o Safari do iPhone media o título antes de a Cinzel carregar e não
   recalculava, e o título escorregava para o lado ("Depoimentos fica no canto toda vez
   que atualiza"). A grade (titulo-secao) centraliza o texto; o ensō se prende à célula
   do texto (grid-area) e não à caixa. */
.rs-title {
  justify-content: center;
  margin: 0;
  font-size: clamp(36px, 4.4vw, 76px);
  animation: rs-title-float 6.5s ease-in-out infinite;
  will-change: transform;
}
.rs-title .titulo-secao__enso { grid-area: 1 / 1; }
@keyframes rs-title-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -8px, 0) rotate(-.35deg); }
}

/* ---------- botões ----------
   Artes ilustradas do Victor (assets/redes-sociais/ui/btn-abrir.webp e btn-fechar.webp,
   preparadas por originais/redes-sociais/ferramentas/prepara-botoes.js), como o
   "Agendar sessão" do hero; o texto fica para leitor de tela (.sr-only). As duas têm a
   mesma altura (as larguras diferem um pouco: são artes distintas). O selo do "Abrir"
   veio com 閉 ("fechar") e foi trocado por 開 na pós. */
.rs-btn {
  position: absolute; left: 50%; bottom: max(36px, 7vh);
  display: block;
  height: clamp(52px, 5.6vw, 76px);
  padding: 0; border: 0; background: none;
  cursor: pointer;
  transform: translateX(-50%);
  transition: opacity .45s ease, transform .45s ease, filter .3s ease, visibility 0s;
}
.rs-btn__arte {
  display: block; height: 100%; width: auto;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.rs-btn:hover, .rs-btn:focus-visible { filter: brightness(1.12) drop-shadow(0 0 16px rgba(255, 40, 30, .35)); }
.rs-btn:hover .rs-btn__arte, .rs-btn:focus-visible .rs-btn__arte { transform: scale(1.035); }
.rs-btn:active .rs-btn__arte { transform: scale(.97); }
.rs-btn:focus-visible { outline: 2px solid var(--rs-ember); outline-offset: 6px; border-radius: 6px; }
.rs-btn[disabled] { cursor: default; filter: none; }
.rs-btn[disabled] .rs-btn__arte { transform: none; }

.rs-btn--open[disabled] { opacity: .55; }
.rs.is-unlocking .rs-btn--open {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .45s ease, transform .45s ease, visibility 0s .45s;
}

.rs-btn--close {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s .35s;
}
.rs.is-ready .rs-btn--close {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%);
  transition: opacity .6s ease .35s, transform .6s ease .35s, visibility 0s;
}

/* ---------- leque de cards (etapa 2) ---------- */
.rs-cards {
  /* max(100svh, 540px) = altura real da seção (no celular deitado a tela tem
     ~375px e os cards ficavam com 64px); meia navbar a menos porque o título desceu */
  --cw: min(74vw, calc((max(100svh, 540px) - 290px - var(--nav-h, 0px) * .5) * .75), 400px);
  position: absolute; inset: 0;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s .6s;
}
.rs.is-dealt .rs-cards { visibility: visible; transition: none; }
.rs.is-ready .rs-cards { pointer-events: auto; }

.rs-fan {
  position: absolute; left: 50%; top: 50%;
  width: var(--cw); aspect-ratio: 3 / 4;
  transform: translate(-50%, calc(-50% - 1.5vh));
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}

.rs-card {
  position: absolute; inset: 0;
  display: block;
  padding: 7px;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(48, 16, 18, .72), rgba(9, 2, 3, .86));
  border: 1px solid rgba(235, 225, 211, .14);
  box-shadow: 0 46px 80px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .55);
  color: var(--rs-bone);
  text-decoration: none;
  transform-origin: 50% 88%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* recolhido (antes de abrir o leque) */
  opacity: 0;
  transform: translateY(16%) scale(.9);
  transition: transform .45s cubic-bezier(.5, 0, .75, 0), opacity .35s ease;
}
.rs.is-dealt .rs-card {
  opacity: 1;
  transition: transform .8s cubic-bezier(.2, .85, .25, 1), opacity .45s ease;
}
.rs.is-dealt .rs-card[data-slot="front"] { transform: none; z-index: 3; }
.rs.is-dealt .rs-card[data-slot="left"]  { transform: translateX(calc(var(--cw) * -.6)) translateY(3%) rotate(-8deg) scale(.86); z-index: 2; }
.rs.is-dealt .rs-card[data-slot="right"] { transform: translateX(calc(var(--cw) * .6)) translateY(3%) rotate(8deg) scale(.86); z-index: 1; }
/* entrada: a da frente sobe primeiro, as laterais abrem o leque em seguida */
.rs.is-dealing .rs-card[data-slot="front"] { transition-delay: 0s, 0s; }
.rs.is-dealing .rs-card[data-slot="left"],
.rs.is-dealing .rs-card[data-slot="right"] { transition-delay: .22s, .12s; transition-duration: 1s, .45s; }
.rs-card[aria-disabled="true"][data-slot="front"] { cursor: default; }
.rs-card:focus-visible { outline: 2px solid var(--rs-ember); outline-offset: 5px; }

.rs-card__body {
  position: relative; display: block;
  width: 100%; height: 100%;
  border-radius: 14px;
  overflow: hidden;
  container-type: inline-size;
  background: var(--rs-ink);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.rs-card.is-tilting .rs-card__body { transition: transform .12s linear; }
.rs-card__body::after {           /* filete claro por dentro, como na referência */
  content: ""; position: absolute; inset: 0; z-index: 9;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(235, 225, 211, .26);
  pointer-events: none;
}
.rs-card__body > * { position: absolute; }
.rs-card__bg, .rs-card__cut { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rs-card__bg { z-index: 1; }
.rs-card__top { z-index: 2; inset: 0 0 auto; height: 38%; background: linear-gradient(rgba(5, 1, 2, .55), rgba(5, 1, 2, 0)); }
.rs-card__kicker {
  z-index: 5; left: 0; right: 0; top: 6.2%;
  text-align: center;
  font: 500 clamp(8px, 3.15cqi, 13px)/1 "Shippori Mincho B1", serif;
  letter-spacing: .34em; text-indent: .34em;
  text-transform: uppercase;
  color: rgba(235, 225, 211, .88);
  white-space: nowrap;
}
.rs-card__word {
  z-index: 3; left: 0; right: 0; top: 10.2%;
  text-align: center;
  font-family: "League Gothic", "Oswald", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: 66px;
  font-size: calc(var(--fit, 25) * 1cqi);
  line-height: .86;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #efe6d8;
  white-space: nowrap;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .35);
}
.rs-card__cut { z-index: 4; }
.rs-card__shade { z-index: 5; inset: auto 0 0; height: 46%; background: linear-gradient(to top, rgba(5, 1, 2, .94), rgba(5, 1, 2, .6) 34%, rgba(5, 1, 2, 0)); }
.rs-card__pill {
  z-index: 6; left: 50%; bottom: 5.2%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .62em;
  padding: .78em 1.15em;
  border-radius: 999px;
  background: rgba(14, 5, 6, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(235, 225, 211, .24);
  font: 500 clamp(9px, 3.3cqi, 13px)/1 "Shippori Mincho B1", serif;
  color: rgba(235, 225, 211, .92);
  white-space: nowrap;
}
.rs-card__pill b { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.rs-card__pill i { width: 1px; height: 1.15em; background: rgba(235, 225, 211, .35); }
.rs-card__icon { width: 1.15em; height: 1.15em; flex: none; color: var(--rs-bone); }
.rs-card__sheen {
  z-index: 7; inset: 0;
  background: radial-gradient(60% 45% at var(--mx, 50%) var(--my, 0%), rgba(255, 235, 220, .14), rgba(255, 235, 220, 0) 70%);
  opacity: 0; transition: opacity .4s ease;
  mix-blend-mode: screen;
}
.rs-card.is-tilting .rs-card__sheen { opacity: 1; }
.rs-card__dim { z-index: 8; inset: 0; background: var(--rs-ink); opacity: 0; transition: opacity .6s ease; }
.rs-card:not([data-slot="front"]) .rs-card__dim { opacity: .5; }
.rs-card:not([data-slot="front"]):hover .rs-card__dim { opacity: .32; }
.rs-card.is-nudge .rs-card__pill { animation: rs-nudge .5s ease; }

.rs-dots {
  position: absolute; left: 50%;
  top: calc(50% - 1.5vh + var(--cw) * 2 / 3 + 22px);
  transform: translateX(-50%);
  display: flex; gap: 6px;
  opacity: 0; transition: opacity .3s ease;
}
.rs.is-dealt .rs-dots { opacity: 1; transition: opacity .6s ease .5s; }
.rs-dot {
  width: 30px; height: 18px; padding: 0;
  border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.rs-dot::before {
  content: ""; display: block; width: 24px; height: 3px; border-radius: 3px;
  background: rgba(235, 225, 211, .24);
  transition: background .3s ease, width .3s ease;
}
.rs-dot[aria-current="true"]::before { width: 30px; background: var(--brand); }
.rs-dot:focus-visible { outline: 2px solid var(--rs-ember); outline-offset: 2px; border-radius: 4px; }


/* =========================================================
   TELA EM PÉ — arte vertical própria (1024 × 1536)
   As imagens trocam sozinhas via <picture>; aqui só a geometria.
   ========================================================= */
@media (orientation: portrait) {
  .rs-stage { width: 1024px; height: 1536px; }
  .rs-cam { transform-origin: 510px 905px; }
  .rs-plate, .rs-plate-dim { left: 237px; top: 620px; width: 550px; height: 458px; }
  .rs-doors { width: 1024px; height: 1536px; perspective: 1250px; perspective-origin: 510px 1050px; }
  .rs-door { top: 628px; height: 444px; }
  .rs-door--l { left: 245px; width: 266px; transform-origin: 12.5px 50%; }
  .rs-door--r { left: 509px; width: 270px; transform-origin: 257.5px 50%; }
  .rs-seam { left: 499px; top: 630px; width: 22px; height: 440px; }
  .rs-sill { left: 255px; top: 1062px; width: 514px; height: 12px; }
  .rs-frame { width: 1024px; height: 1536px; }
  .rs-reflect { left: 237px; top: 1070px; width: 550px; height: 330px; }
  .rs-reflect img { top: -450px; width: 550px; height: 458px; transform-origin: 50% 450px; }
  .rs-floorlight { left: 160px; top: 1066px; width: 700px; height: 330px; }
  .rs-floorlight::before { clip-path: polygon(205px 0, 495px 0, 100% 100%, 0 100%); }
  .rs-moon { left: 521px; top: 326px; width: 300px; height: 300px; }
  .rs-edge, .rs-backdrop { display: none; }
  /* guardião agachado na cumeeira, na frente da lua */
  /* top 380 (o pacote tinha 374): as sandálias ficavam ~5px acima da cumeeira, com a lua
     vermelha aparecendo por baixo — "o Itachi ainda tá flutuando". Medido: +6 apoia, +8 afunda */
  .rs-guard { left: 605px; top: 380px; width: 119.4px; height: 150px; }
  .rs-guard__glow { left: -24px; top: -24px; width: 167.4px; height: 198px; }
  .rs-guard__eye { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
  .rs-title { font-size: clamp(36px, 11vw, 64px); }
}

/* ---------- animações ---------- */
@keyframes rs-nudge {
  0%, 100% { transform: translateX(-50%); } 25% { transform: translateX(calc(-50% - 4px)); }
  50% { transform: translateX(calc(-50% + 4px)); } 75% { transform: translateX(calc(-50% - 2px)); }
}
@keyframes rs-breathe { 0%, 100% { opacity: .2; } 50% { opacity: .42; } }
@keyframes rs-moon { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes rs-rumble {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-1.5px, .5px); }  20% { transform: translate(1.5px, -.5px); }
  30% { transform: translate(-1px, 1px); }     40% { transform: translate(1px, 0); }
  50% { transform: translate(-1px, -.5px); }   60% { transform: translate(.8px, .5px); }
  70% { transform: translate(-.6px, 0); }      80% { transform: translate(.4px, -.3px); }
  90% { transform: translate(-.2px, .2px); }
}
@keyframes rs-thud {
  0% { transform: translateY(0); } 25% { transform: translateY(3px); }
  50% { transform: translateY(-1.5px); } 75% { transform: translateY(.6px); } 100% { transform: translateY(0); }
}

/* ---------- movimento reduzido: troca por fade ---------- */
.rs.is-reduced .rs-cam,
.rs.is-reduced .rs-door,
.rs.is-reduced .rs-blur,
.rs.is-reduced .rs-plate-dim,
.rs.is-reduced .rs-reflect,
.rs.is-reduced .rs-floorlight,
.rs.is-reduced .rs-head { transition: none !important; }
.rs-fade {
  position: absolute; inset: 0; background: var(--rs-ink);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.rs.is-fading .rs-fade { opacity: 1; }
/* fora da tela: as animações em loop do cenário param (o JS põe .rs-fora) */
.rs.rs-fora .rs-seam, .rs.rs-fora .rs-sill, .rs.rs-fora .rs-moon,
.rs.rs-fora .rs-guard__glow, .rs.rs-fora .rs-guard__fig, .rs.rs-fora .rs-guard__hair,
.rs.rs-fora .rs-guard__eye, .rs.rs-fora .rs-title { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .rs-title { animation: none; }
  .rs-seam, .rs-sill, .rs-moon { animation: none; }
  .rs-guard__fig, .rs-guard__hair, .rs-guard__eye, .rs-guard__glow { animation: none; }
  .rs-card, .rs.is-dealt .rs-card { transition: opacity .3s ease !important; transition-delay: 0s !important; }
  .rs-card__body { transform: none !important; }
}