/* ═══════════════════════════════════════════════════════════════════
   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: acompanha a rolagem do topo
   da hero ate o inicio de Areas de Atuacao e se apaga exatamente onde o
   monograma do divisor assume. Vive acima do conteudo, em opacidade
   baixa — ancora a identidade sem competir com a leitura. */
.rn-markline {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.rn-markline__mark {
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(24px, 2.4vw, 34px);
  height: auto;
  /* --mark-y e --mark-o sao escritos por js/hero-sequence.js; os
     valores padrao sao o estado estatico (sem JS): a marca fica
     pousada no alto do trilho, sem descer. */
  transform: translate3d(-50%, var(--mark-y, 20vh), 0);
  opacity: var(--mark-o, 0.24);
  filter: drop-shadow(0 2px 12px rgba(10, 16, 12, 0.55));
}

/* ── 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 e o movimento chegaria atrasado a rolagem. */
[data-flow] {
  transform: translate3d(0, var(--flow-y, 0px), 0);
  opacity: var(--flow-o, 1);
}

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

/* ── Entrada do lockup (cue unico) ────────────────────────────────── */

/* A marca e o unico elemento com disparo de carregamento: entra sozinha
   em cena e fica. Tudo abaixo dela vive no fluxo, acima. */
[data-hero-cue] {
  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 a unica coisa em cena */
[data-hero-cue="0"] {
  transform: translateY(46px);
  transition-duration: 1100ms;
}

[data-hero-cue].is-cued {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.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 deixa de descer: fica fixa no alto do trilho */
  .rn-markline__mark { transform: translate3d(-50%, 12vh, 0) !important; }

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

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

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

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