/* ==========================================================================
   MONTE NEGRO — Camada de animação
   --------------------------------------------------------------------------
   Como funciona:

   · Um script no <head> do index.html adiciona a classe `js-anim` no <html>
     antes da primeira pintura. TODO o estado inicial (invisível/deslocado)
     vive sob `.js-anim` — sem JavaScript, ou com movimento reduzido ativado,
     a classe não existe e a página aparece normalmente, sem nada escondido.

   · O js/animations.js observa os elementos com `data-reveal` e adiciona
     `.is-revealed` quando entram na viewport.

   Sumário:
   01. Curva e duração padrão
   02. Sistema de reveal (data-reveal)
   03. Títulos em linhas (data-split)
   04. Filete que se desenha (data-line)
   05. Entrada do hero
   06. Barra de progresso da rolagem
   07. Micro-interações (botões, cards, chips, links)
   08. FAQ com abertura animada
   09. Movimento reduzido
   ========================================================================== */


/* ==========================================================================
   01. CURVA E DURAÇÃO PADRÃO
   ========================================================================== */

:root {
  /* Expo-out: sai rápido e desacelera longo. É o que dá o ar "caro". */
  --mn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mn-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

  --mn-dur: 0.95s;        /* reveal padrão */
  --mn-dur-slow: 1.5s;    /* imagens e cortinas */
  --mn-dur-fast: 0.45s;   /* micro-interações */
}


/* ==========================================================================
   01b. ROLAGEM SUAVE (Lenis)
   O `scroll-behavior: smooth` do style.css é o comportamento desejado quando
   NÃO há JavaScript. Com o Lenis rodando ele precisa sair do caminho: a
   rolagem suave nativa do navegador brigaria com a interpolação da lib,
   produzindo tranco em cada clique de âncora.
   ========================================================================== */

html.lenis { scroll-behavior: auto !important; }


/* ==========================================================================
   02. SISTEMA DE REVEAL
   `--mn-delay` é preenchido pelo JS a partir de data-stagger.
   ========================================================================== */

/*
  ATENÇÃO ao mexer aqui: o estado inicial NUNCA pode zerar a caixa do
  elemento observado. O IntersectionObserver mede a caixa transformada —
  um `clip-path: inset(0 0 100% 0)` ou um `scaleX(0)` deixam área zero, o
  elemento nunca "entra" na viewport, nunca recebe .is-revealed e some da
  página para sempre. Por isso as variantes "media" e "rule" animam um
  pseudo-elemento (::after) em vez do próprio elemento.
*/
.js-anim [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--mn-dur) var(--mn-ease) var(--mn-delay, 0s),
    transform var(--mn-dur) var(--mn-ease) var(--mn-delay, 0s);
}

/* --- Estados iniciais por variante --------------------------------------- */
.js-anim [data-reveal="up"]    { transform: translate3d(0, 34px, 0); }
.js-anim [data-reveal="down"]  { transform: translate3d(0, -26px, 0); }
.js-anim [data-reveal="left"]  { transform: translate3d(-38px, 0, 0); }
.js-anim [data-reveal="right"] { transform: translate3d(38px, 0, 0); }
.js-anim [data-reveal="scale"] { transform: scale(0.955); }
.js-anim [data-reveal="fade"]  { /* só opacidade */ }

/* Filete horizontal que cresce da esquerda.
   O traço colorido é o ::after; o elemento mantém seus 64×1px para o
   observer continuar enxergando área. */
.js-anim [data-reveal="rule"] {
  opacity: 1;
  position: relative;
  background: transparent;
}
.js-anim [data-reveal="rule"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mn-wine);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--mn-ease) var(--mn-delay, 0s);
}
.js-anim [data-reveal="rule"].is-revealed::after { transform: scaleX(1); }

/* Imagem: cortina que desliza para baixo + zoom desacelerando.
   A cortina é um ::after opaco — o elemento nunca encolhe. */
.js-anim [data-reveal="media"] { opacity: 1; }
.js-anim [data-reveal="media"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--mn-ink-deep);
  transform: translate3d(0, 0, 0);
  transition: transform var(--mn-dur-slow) var(--mn-ease) var(--mn-delay, 0s);
}
.js-anim [data-reveal="media"].is-revealed::after {
  transform: translate3d(0, 101%, 0);
}
.js-anim [data-reveal="media"] .mn-media__img {
  transform: scale(1.16);
  transition: transform var(--mn-dur-slow) var(--mn-ease) var(--mn-delay, 0s);
}

/* Título fatiado em linhas — o container só controla a opacidade */
.js-anim [data-reveal="lines"] { opacity: 1; }

/* --- Estado final --------------------------------------------------------- */
.js-anim [data-reveal].is-revealed {
  opacity: 1;
  will-change: auto;
}
.js-anim [data-reveal="up"].is-revealed,
.js-anim [data-reveal="down"].is-revealed,
.js-anim [data-reveal="left"].is-revealed,
.js-anim [data-reveal="right"].is-revealed { transform: translate3d(0, 0, 0); }

.js-anim [data-reveal="scale"].is-revealed { transform: scale(1); }
.js-anim [data-reveal="media"].is-revealed .mn-media__img { transform: scale(1); }


/* ==========================================================================
   03. TÍTULOS EM LINHAS
   O JS mede onde o texto quebra e envolve cada linha em
   .mn-line > .mn-line__inner. A linha externa recorta, a interna sobe.
   ========================================================================== */

.mn-line {
  display: block;
  overflow: hidden;
  /* Compensa o corte de descendentes (g, p, q, y) pelo overflow */
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

.js-anim .mn-line__inner {
  display: block;
  transform: translate3d(0, 115%, 0);
  transition: transform 1.05s var(--mn-ease) var(--mn-line-delay, 0s);
  will-change: transform;
}
.js-anim [data-reveal="lines"].is-revealed .mn-line__inner {
  transform: translate3d(0, 0, 0);
  will-change: auto;
}


/* ==========================================================================
   04. FILETE QUE SE DESENHA (data-line)
   Substitui a border-top estática por um traço que cresce da esquerda.
   ========================================================================== */

.js-anim [data-line] {
  position: relative;
  border-top-color: transparent !important;
}
.js-anim [data-line]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.22;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--mn-ease) var(--mn-delay, 0s);
}
.js-anim [data-line].is-revealed::before { transform: scaleX(1); }

/* O último item da lista tem borda embaixo também — essa fica estática */
.js-anim .mn-benefit--last { border-bottom-color: var(--mn-bone-18) !important; }
.js-anim .mn-faq__item--last { border-bottom-color: var(--mn-ink-22) !important; }


/* ==========================================================================
   05. ENTRADA DO HERO
   ========================================================================== */

/* Indicador de rolagem: um traço vertical que pulsa para baixo */
.mn-hero__cue {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 4;
  display: block;
  width: 1px;
  height: 54px;
  margin-left: -0.5px;
  background: linear-gradient(180deg, rgba(248, 246, 242, 0) 0%, rgba(248, 246, 242, 0.55) 100%);
  overflow: hidden;
}
.mn-hero__cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mn-bone);
  animation: mn-cue 2.6s var(--mn-ease-soft) infinite;
}
@keyframes mn-cue {
  0%        { transform: translateY(-100%); opacity: 0; }
  30%       { opacity: 1; }
  70%, 100% { transform: translateY(100%); opacity: 0; }
}

/* A faixa de posicionamento desce do topo */
.js-anim .mn-announce {
  transform: translate3d(0, -100%, 0);
  transition: transform 0.8s var(--mn-ease) 0.15s;
}
.js-anim .mn-announce.is-in { transform: translate3d(0, 0, 0); }

/* O gradiente escuro do hero clareia de leve conforme o conteúdo entra */
.js-anim .mn-hero__scrim {
  opacity: 0;
  transition: opacity 1.6s var(--mn-ease);
}
.js-anim .mn-hero.is-loaded .mn-hero__scrim { opacity: 1; }


/* ==========================================================================
   06. BARRA DE PROGRESSO DA ROLAGEM
   ========================================================================== */

.mn-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 140;
  pointer-events: none;
}
.mn-progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--mn-sand);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}


/* ==========================================================================
   07. MICRO-INTERAÇÕES
   ========================================================================== */

/* --- Botões: leve elevação + brilho que atravessa ------------------------ */
.mn-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.mn-btn:hover { transform: translateY(-2px); }
.mn-btn:active { transform: translateY(0) scale(0.98); }

.mn-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(248, 246, 242, 0.18) 50%,
    transparent 65%
  );
  transform: translateX(-130%);
  transition: transform 0.9s var(--mn-ease);
}
.mn-btn:hover::after { transform: translateX(130%); }

/* Nos botões claros o brilho precisa ser escuro para aparecer */
.mn-btn--bone::after,
.mn-btn--ghost::after {
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(47, 50, 52, 0.10) 50%,
    transparent 65%
  );
}

/* --- Cards: elevam e a imagem aproxima ----------------------------------- */
.mn-card {
  transition:
    transform var(--mn-dur-fast) var(--mn-ease),
    box-shadow var(--mn-dur-fast) var(--mn-ease),
    border-color var(--mn-dur-fast) var(--mn-ease);
}
.mn-card:hover {
  transform: translateY(-8px);
  border-color: rgba(47, 50, 52, 0.16);
  box-shadow: 0 26px 60px -28px rgba(47, 50, 52, 0.38);
}
.mn-card .mn-media__img { transition: transform 0.9s var(--mn-ease); }
.mn-card:hover .mn-media__img { transform: scale(1.06); }

/* --- Blocos de credibilidade e mini-cards: preenchimento sutil ----------- */
.mn-cred__item,
.mn-mini {
  transition: background var(--mn-dur-fast) var(--mn-ease);
}
.mn-cred__item:hover,
.mn-mini:hover { background: var(--mn-white); }

/* --- Linhas de benefício e passos: deslizam ao passar o mouse ------------ */
.mn-benefit,
.mn-step {
  transition: transform var(--mn-dur-fast) var(--mn-ease);
}
.mn-benefit:hover { transform: translateX(8px); }
.mn-step:hover .mn-step__num { color: var(--mn-wine); }
.mn-step__num { transition: color var(--mn-dur-fast) var(--mn-ease); }

/* --- Linhas da prova social ---------------------------------------------- */
.mn-proof__row,
.mn-proof__project {
  transition: padding-left var(--mn-dur-fast) var(--mn-ease);
}
.mn-proof__row:hover,
.mn-proof__project:hover { padding-left: 10px; }

/* --- Chips: entram com um "pop" ------------------------------------------ */
/* O :not(.is-revealed) impede que este estado inicial, mais específico que
   o estado final genérico, deixe o chip encolhido para sempre. */
.js-anim .mn-chip[data-reveal="scale"]:not(.is-revealed) { transform: scale(0.8); }
.mn-chip {
  transition:
    background 0.25s var(--mn-ease),
    border-color 0.25s var(--mn-ease),
    color 0.25s var(--mn-ease),
    transform 0.25s var(--mn-ease);
}
.mn-chip:hover { transform: translateY(-2px); }

/* --- Campos do formulário ------------------------------------------------ */
.mn-input {
  transition: border-color 0.3s var(--mn-ease), background 0.3s var(--mn-ease);
}
.mn-input:focus { background: rgba(248, 246, 242, 0.09); }

/* --- Ícone + do FAQ gira ao abrir (já existe no style.css) --------------- */
.mn-faq__q { transition: color var(--mn-dur-fast) var(--mn-ease); }
.mn-faq__item:hover .mn-faq__q { color: var(--mn-wine); }

/* --- Devolvendo prioridade ao :hover ------------------------------------- */
/* O estado final do reveal (`[data-reveal].is-revealed`) é mais específico
   que um `:hover` simples e travaria o transform do elemento revelado.
   Estes seletores repetem o hover com peso suficiente para vencer. */
.js-anim [data-reveal].is-revealed.mn-btn:hover    { transform: translateY(-2px); }
.js-anim [data-reveal].is-revealed.mn-btn:active   { transform: translateY(0) scale(0.98); }
.js-anim [data-reveal].is-revealed.mn-card:hover   { transform: translateY(-8px); }
.js-anim [data-reveal].is-revealed.mn-benefit:hover { transform: translate3d(8px, 0, 0); }
.js-anim [data-reveal].is-revealed.mn-chip:hover   { transform: translateY(-2px) scale(1); }


/* ==========================================================================
   08. FAQ COM ABERTURA ANIMADA
   O <details> nativo abre sem transição. O JS controla a altura do painel.
   ========================================================================== */

.mn-faq__panel {
  overflow: hidden;
  transition: height 0.5s var(--mn-ease);
}
.mn-faq__panel .mn-faq__a {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.5s var(--mn-ease) 0.08s, transform 0.5s var(--mn-ease) 0.08s;
}
.mn-faq__item[open] .mn-faq__panel .mn-faq__a {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* ==========================================================================
   09. TROCA FORMULÁRIO ↔ AGRADECIMENTO
   Fica depois do bloco 02 de propósito: precisa vencer o estado final do
   data-reveal aplicado ao formulário.
   ========================================================================== */

.js-anim .mn-form[data-reveal].is-out {
  opacity: 0;
  transform: translate3d(0, -14px, 0);
  transition: opacity 0.3s var(--mn-ease), transform 0.3s var(--mn-ease);
}

.js-anim .mn-thanks {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.65s var(--mn-ease), transform 0.65s var(--mn-ease);
}
.js-anim .mn-thanks.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.js-anim .mn-thanks.is-out {
  opacity: 0;
  transform: translate3d(0, -14px, 0);
  transition: opacity 0.3s var(--mn-ease), transform 0.3s var(--mn-ease);
}


/* ==========================================================================
   10. MOVIMENTO REDUZIDO
   Rede de segurança dupla: mesmo que a classe js-anim exista por algum
   motivo, nada fica escondido nem se move.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal],
  .js-anim [data-reveal] .mn-media__img,
  .js-anim .mn-line__inner,
  .js-anim .mn-announce,
  .js-anim .mn-thanks {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .js-anim [data-line]::before,
  .js-anim [data-reveal="rule"]::after { transform: scaleX(1) !important; }
  .js-anim [data-reveal="media"]::after { display: none !important; }
  .js-anim .mn-hero__scrim { opacity: 1 !important; }
  .mn-hero__cue { display: none; }
  .mn-progress { display: none; }
  .mn-faq__panel { transition: none !important; }
}