/* ═══════════════════════════════════════════════════════════════════
   motion.css — reveals com blur-in, rail descendente, easings.
   Toda animacao aqui degrada sob prefers-reduced-motion: reduce.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Scroll reveal (blur-in + rise) ───────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition:
    opacity var(--duration-reveal) var(--ease-entrance) var(--reveal-delay, 0ms),
    transform var(--duration-reveal) var(--ease-entrance) var(--reveal-delay, 0ms),
    filter var(--duration-reveal) var(--ease-entrance) var(--reveal-delay, 0ms);
  /* Sem will-change permanente: dezenas de camadas de composicao
     custam mais do que economizam. A promocao vem da propria
     transicao de filter/transform. */
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  /* blur apenas na entrada — o estado final e 100% nitido */
  filter: blur(0);
}

/* Sem JS: nada fica escondido */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ── Marca descendente (RN_Favicon.svg) ───────────────────────────── */

/* Um unico elemento dinamico para a marca, sem trilho e sem
   transparencia. Pousa na base da primeira dobra, sob o lockup, com uma
   seta em pulso logo abaixo: e o convite para rolar. Fica parada na tela
   ate os principios comecarem a entrar; entao a seta se apaga e a marca
   desce na direcao dela ate sair pela base, antes de Areas de Atuacao. */
.rn-markline {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* Entra depois do lockup: a marca abre a cena, o convite vem em
     seguida. .is-in vem de js/hero-sequence.js. */
  opacity: 0;
  transition: opacity 1000ms var(--ease-entrance) 1500ms;
}

.rn-markline.is-in,
.no-js .rn-markline { opacity: 1; }

/* --mark-y, --mark-s, --mark-o e --arrow-o sao escritos por
   js/hero-sequence.js; os valores padrao sao o estado estatico (sem JS):
   marca e seta pousadas na base da primeira dobra, opacas. */
.rn-markline__mark {
  position: absolute;
  left: 50%;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform:
    translate3d(-50%, var(--mark-y, calc(100svh - 124px)), 0)
    scale(var(--mark-s, 1));
  transform-origin: 50% 0;
  opacity: var(--mark-o, 1);
}

.rn-markline__icon {
  display: block;
  /* Degraus em pixels inteiros, largura par (o translate de -50% cai em
     pixel cheio): a largura fluida anterior rasterizava a marca em meio
     pixel e serrilhava o contorno. */
  width: 28px;
  height: 48px;
  filter: drop-shadow(0 2px 12px rgba(10, 16, 12, 0.55));
}

@media (min-width: 900px) {
  .rn-markline__icon { width: 32px; height: 55px; }
}

@media (min-width: 1400px) {
  .rn-markline__icon { width: 36px; height: 62px; }
}

.rn-markline__arrow {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--arrow-o, 1);
  filter: drop-shadow(0 1px 6px rgba(10, 16, 12, 0.6));
}

/* Pulso sem transparencia: a seta desce alguns pixels e o traco acende
   de bone-500 a bone-100, e volta. */
.rn-markline__arrow path {
  stroke: var(--bone-500);
  transform-box: fill-box;
  transform-origin: center;
  animation: rn-arrow-pulse 1600ms var(--ease-standard) infinite;
}

@keyframes rn-arrow-pulse {
  0%, 100% { transform: translateY(-2px) scale(1);    stroke: var(--bone-500); }
  50%      { transform: translateY(4px)  scale(1.12); stroke: var(--bone-100); }
}

/* ── Fluxo de rolagem (hero) ──────────────────────────────────────── */

/* Nao ha estado "revelado" aqui: --flow-y e --flow-o sao funcao pura da
   posicao de rolagem, escritos a cada frame por js/hero-sequence.js.
   E o que torna o movimento reversivel — rolando de volta, o elemento
   refaz o caminho e desaparece.

   Sem transition, de proposito: uma transicao brigaria com o valor novo
   a cada frame. A suavidade vem de uma rolagem amortecida no proprio
   script, que converge para a posicao real.

   --flow-x e --flow-s dao a entrada lateral e o assentamento de escala;
   [data-flow-layer] desloca um filho em relacao ao bloco, para que
   titulo e texto tenham velocidades proprias dentro do mesmo item. */
[data-flow] {
  transform:
    translate3d(var(--flow-x, 0px), var(--flow-y, 0px), 0)
    scale(var(--flow-s, 1));
  opacity: var(--flow-o, 1);
}

[data-flow-layer] {
  transform: translate3d(0, var(--layer-y, 0px), 0);
}

.no-js [data-flow],
.no-js [data-flow-layer] {
  transform: none;
  opacity: 1;
}

/* Texto que se acende palavra a palavra. O paragrafo recebe um unico
   --words (0–1) por frame; cada palavra deriva a propria opacidade do
   seu indice --i, sobre o total --n. Uma escrita por paragrafo, nao
   uma por palavra. */
.rn-word {
  --wp: clamp(0, calc((var(--words, 1) * (var(--n, 1) + 5) - var(--i, 0)) / 5), 1);
  display: inline-block;
  opacity: calc(0.12 + var(--wp) * 0.88);
  transform: translate3d(0, calc((1 - var(--wp)) * 0.45em), 0);
}

/* ── Entrada da primeira dobra (cue unico, em cascata) ────────────── */

/* Marca, headline e lead tem disparo de carregamento: entram um apos o
   outro e ficam. O cue mora num elemento interno — o de fora carrega o
   fluxo de rolagem, e os dois transforms nao podem dividir o mesmo no. */
[data-hero-cue] {
  display: block;
  opacity: 0;
  transform: translateY(28px);
  filter: blur(10px);
  transition:
    opacity var(--duration-reveal) var(--ease-entrance),
    transform var(--duration-reveal) var(--ease-entrance),
    filter var(--duration-reveal) var(--ease-entrance);
}

/* A marca sobe de mais longe e demora mais: e ela que abre a cena */
[data-hero-cue="0"] {
  transform: translateY(46px);
  transition-duration: 1100ms;
}

[data-hero-cue="1"] { transition-delay: 320ms; }
[data-hero-cue="2"] { transition-delay: 760ms; }

/* filter: none, nao blur(0): um filtro que sobra ativo mantem o logo numa
   camada rasterizada, e o SVG perde nitidez de borda. A transicao ainda
   interpola de blur(10px) ate nada. */
[data-hero-cue].is-cued {
  opacity: 1;
  transform: translateY(0);
  filter: none;
}

.no-js [data-hero-cue] {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ── Efeitos de hover contidos ────────────────────────────────────── */

.rn-lift {
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

.rn-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-default);
}

/* ── Preferencia de movimento reduzido ────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transform: none;
    filter: none;
    transition: opacity 220ms linear var(--reveal-delay, 0ms);
  }

  /* A marca nao desce e a seta nao pulsa: ficam na base da primeira
     dobra e apenas se apagam quando os principios comecam a entrar. */
  .rn-markline { transition: opacity 240ms linear; }
  .rn-markline__mark {
    transform: translate3d(-50%, calc(100svh - 124px), 0) !important;
    transition: opacity 240ms linear;
  }
  .rn-markline__arrow path { animation: none !important; }

  [data-hero-cue] {
    transform: none;
    filter: none;
    transition: opacity 240ms linear;
  }

  [data-flow] {
    transform: none !important;
    opacity: 1 !important;
  }

  [data-flow-layer],
  .rn-principio__rule { transform: none !important; }

  /* A curva da hero fica desenhada e parada; o ponto de luz nao corre. */
  .rn-hero__wave-line,
  .rn-hero__wave-echo { stroke-dashoffset: 0 !important; }
  .rn-hero__wave-dot { display: none; }

  .rn-word {
    opacity: 1 !important;
    transform: none !important;
  }

  .rn-lift:hover { transform: none; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}