/* =============================================================
   NSI · O rio que desce com a página (motor em /nsi-rio.js)
   Tudo aqui só vale com html.rio-on, que o JS liga. Sem o JS, a página
   continua exatamente como era. Só transform e opacity animam.
   ============================================================= */

/* A água: fixa atrás de tudo, desenhada em meia resolução e ampliada. */
body.corp > .rio { position: fixed !important; inset: 0; z-index: 0 !important; pointer-events: none; }
.rio-agua { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform: translateZ(0); }

/* Sem WebGL: o mesmo mundo, pintado. */
html.rio-sem-gl body.corp {
  background:
    radial-gradient(ellipse 14% 70% at 50% 40%, rgba(170, 200, 245, .10), transparent 70%),
    linear-gradient(90deg, #04070d 0%, #0a1527 16%, #0d1d36 50%, #0a1527 84%, #04070d 100%);
  background-attachment: fixed;
}

/* ── Seções escuras: a água aparece por trás, com um véu para a leitura ── */
html.rio-on main .sec:not(.sec-alt) {
  background: linear-gradient(180deg, rgba(8, 12, 22, .34), rgba(8, 12, 22, .62) 18%, rgba(8, 12, 22, .62) 82%, rgba(8, 12, 22, .34));
}

/* ── Seções claras: viram painéis que boiam sobre o rio ──────────────────
   O ritmo claro e escuro continua; agora o claro flutua, e a água corre
   dos dois lados dele. */
html.rio-on main .sec-alt { background: transparent; overflow: visible; }
html.rio-on main .sec-alt::after { display: none; }
html.rio-on main .sec-alt > .wrap {
  background: var(--c-papel);
  border-radius: 28px;
  padding: clamp(30px, 4.4vw, 56px) clamp(20px, 4.4vw, 52px);
  width: min(1180px, calc(100% - 28px));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 28px 70px rgba(1, 4, 12, .55), 0 0 0 1px rgba(207, 227, 255, .10);
  transform: translate3d(0, var(--boia, 0px), 0);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
  animation: rio-boia 9s ease-in-out infinite;
  animation-delay: -3s;
}
html.rio-on main .sec-alt:nth-of-type(even) > .wrap { animation-duration: 11s; animation-delay: -6s; }
/* `translate` compõe com o `transform` da inclinação: a boia e a correnteza
   não brigam pela mesma propriedade. */
@keyframes rio-boia { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* O reflexo de luar escorre pela borda do painel, bem de leve. */
html.rio-on main .sec-alt > .wrap::before {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(207, 227, 255, .55), transparent);
  opacity: .8;
}

/* ── As informações descem com a correnteza ──────────────────────────────
   A entrada padrão sobe de baixo; no rio ela desce de cima, como algo que a
   água traz. Mesma duração curta, curva um pouco mais macia. */
html.rio-on.anima .rv { transform: translate3d(0, -22px, 0); transition-duration: .62s, .62s; transition-timing-function: cubic-bezier(.16, 1, .3, 1), cubic-bezier(.16, 1, .3, 1); }
html.rio-on.anima .rv.on { transform: none; }

/* ── A costura entre o herói e o rio ─────────────────────────────────────
   O vídeo termina olhando a água de cima; a primeira seção nasce numa névoa
   do mesmo azul, então a borda do herói nunca aparece como um corte. */
html.rio-on .cin { position: relative; }
/* (A névoa escura que cobria o fim do vídeo saiu: agora o vídeo se dissolve
   no rio enquanto ainda está preso à tela; ver --sai em nsi-cinema.js.) */
html.rio-on .cin + .ancora + .sec,
html.rio-on .cin ~ .sec:first-of-type {
  background: linear-gradient(180deg, rgba(8, 12, 22, 0) 0%, rgba(8, 12, 22, .62) 34vh, rgba(8, 12, 22, .62) 82%, rgba(8, 12, 22, .34));
}

/* O brilho dourado da seção Proteção foi desenhado para o fundo escuro liso
   de antes. Sobre a água azul ele vira um retângulo amarronzado, com borda
   reta no topo (a seção corta o que passa dela). Com o rio, ele sai. */
html.rio-on .sec-protecao::before { display: none; }

/* Herói estático (celular, tablet em pé, movimento reduzido): a imagem dele
   já termina numa névoa quase sólida. A névoa da costura, que existe para o
   fim do vídeo, ficava por cima do texto e apagava os dois botões principais.
   Mesmas cinco condições do portão do herói estático em nsi-cinema.css. */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce) {
  html.rio-on .cin::after { display: none; }
}

/* O rodapé assenta na margem: a água escurece por baixo dele. */
html.rio-on .nsi-rodape { position: relative; z-index: 1; background: linear-gradient(180deg, rgba(6, 9, 17, .7), rgba(6, 9, 17, .96) 40%); }

/* Pausa em aba escondida e fora da tela não importam aqui: a boia é CSS
   barato, mas some com movimento reduzido. */
@media (prefers-reduced-motion: reduce) {
  html.rio-on main .sec-alt > .wrap { animation: none; transition: none; transform: none; }
}
@media (max-width: 720px) {
  html.rio-on main .sec-alt > .wrap { border-radius: 22px; width: calc(100% - 20px); }
}
@media print {
  .rio { display: none !important; }
  html.rio-on main .sec-alt > .wrap { box-shadow: none; animation: none; }
}