/* ==========================================================================
   EDERSON MARTINS ARQUITETO — Motion, Fase 1
   Hero · Introdução · Morar/Investir/Empreender · Método

   Princípios:
   - Estado padrão = conteúdo visível. Nada aqui oculta conteúdo de forma
     permanente; os estados iniciais "escondidos" são aplicados pelo JS
     (GSAP) e só existem enquanto o JS está em execução.
   - Só transform / opacity (e as propriedades individuais scale / translate).
   - Carregado depois do <style> inline, por isso sobrescreve sem !important
     (exceto .m-anim, que precisa vencer as transições "all" existentes).
   ========================================================================== */

/* Enquanto o GSAP tween anima um elemento, as transições CSS herdadas do site
   (.path{transition:.3s}, .button{transition:.2s}) precisam ser suspensas,
   senão brigam com o GSAP quadro a quadro. A classe é removida ao final. */
.m-anim { transition: none !important; }

/* Curadoria do pré-estado do Hero: o JS adiciona html.m-pending no <head>
   (somente sem reduced-motion) e remove assim que o GSAP assume — ou após
   3,5 s, ou se algum script falhar. visibility mantém o layout intacto. */
.m-pending .hero .eyebrow,
.m-pending .hero h1,
.m-pending .hero .sub,
.m-pending .hero .actions .button,
.m-pending .hero .hero-foot { visibility: hidden; }

/* Máscara de linhas (SplitText). overflow:clip da máscara é trocado por clip-path
   com margem negativa: o recorte ganha folga para descendentes (ç, p, g) e
   acentos, SEM padding/margin — por isso não altera a altura nem o layout
   (margens negativas entre irmãos colapsam e deslocariam o texto). */
.m-line-mask { overflow: visible !important; clip-path: inset(-.16em -.1em); }

/* ---------- A. HERO ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .hero {
    overflow: hidden;                 /* recorta o zoom/parallax da foto */
    --m-hero-rest: 1.06;              /* escala de repouso (sobra p/ parallax) */
    --m-hero-from: 1.18;              /* escala inicial do zoom de entrada */
    --m-hero-s: var(--m-hero-rest);   /* escala viva (ScrollTrigger altera)   */
    --m-hero-y: 0%;                   /* deslocamento vivo (ScrollTrigger)    */
  }
  .hero:before {
    scale: var(--m-hero-s);
    translate: 0 var(--m-hero-y);
    will-change: scale, translate;
    /* Zoom de entrada em CSS puro: funciona mesmo se o JS falhar.
       `backwards` aplica só o estado inicial e devolve o controle às variáveis. */
    animation: m-hero-zoom 2.8s cubic-bezier(.16, 1, .3, 1) backwards;
  }
  @keyframes m-hero-zoom { from { scale: var(--m-hero-from); } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  /* Celular: zoom mais curto/contido e sem parallax (o JS também não o cria). */
  .hero { --m-hero-rest: 1.03; --m-hero-from: 1.1; }
  .hero:before { will-change: auto; animation-duration: 2.2s; }
}

/* ---------- B. INTRODUÇÃO — destaque terracota ---------------------------- */
/* O JS arma (.m-em-armed) o parágrafo: o <em> começa na cor do texto e, ao
   desarmar, migra suavemente para o terracota original (var(--accent)). */
.intro em { transition: color 1.4s ease .6s; }
.intro .m-em-armed em { color: inherit; transition: none; }

/* ---------- C. CARTÕES — microinterações ---------------------------------- */
.path { position: relative; transition: background-color .3s ease; }
.path:focus-visible { background: #e8e1d6; }
.path::after {                       /* fio terracota que "desenha" no hover */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.path .num { display: inline-block; transition: color .3s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.path h3 { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.path .arrow { transition: transform .45s cubic-bezier(.2, .7, .2, 1), color .3s ease; }

/* Cor e fio valem para hover e foco de teclado; deslocamentos só com movimento permitido. */
@media (hover: hover) { .path:hover::after { transform: scaleX(1); } .path:hover .num, .path:hover .arrow { color: var(--accent); } }
.path:focus-visible::after { transform: scaleX(1); }
.path:focus-visible .num, .path:focus-visible .arrow { color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) {
    .path:hover h3 { transform: translateX(.45rem); }
    .path:hover .num { transform: translateX(.3rem); }
    .path:hover .arrow { transform: translate(5px, -5px) scale(1.12); }
  }
  .path:focus-visible h3 { transform: translateX(.45rem); }
  .path:focus-visible .num { transform: translateX(.3rem); }
  .path:focus-visible .arrow { transform: translate(5px, -5px) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .path::after, .path .num, .path h3, .path .arrow { transition: none; }
  .intro em { transition: none; }
}

/* ---------- D. MÉTODO — linhas divisórias --------------------------------- */
/* As bordas originais (1px, #ffffff40) passam a ser desenhadas por pseudo-
   elementos na mesma posição/cor, para poderem animar via transform. O valor
   padrão de --m-line é 1: sem JS, as linhas aparecem completas e idênticas. */
.steps { position: relative; border-top-color: transparent; }
.steps::before,
.step::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: #ffffff40; transform-origin: left center;
  scale: var(--m-line, 1) 1;
}
.steps::before { top: -1px; }
.step { position: relative; border-bottom-color: transparent; }
.step::after { bottom: -1px; }

/* ==========================================================================
   E. CORREÇÕES PÓS-AUDITORIA (responsividade) — sem relação com animação
   ========================================================================== */

/* P-03 — Títulos dos cartões em telas estreitas.
   Original: 3rem fixo no celular, o que em 320 px deixava "Empreender." sem
   folga e empurrava o cartão 2 px para fora da tela (rolagem horizontal).
   Agora o título acompanha a largura e continua 3rem (48 px) a partir de
   ~375 px, ou seja, nos celulares comuns, tablets e desktop nada muda. */
@media (max-width: 760px) {
  .path h3 { font-size: clamp(2.25rem, 12.8vw, 3rem); }
}

/* P-04 — Navbar em tablets (761–1024 px, foco em ~768 px).
   Com os espaços de desktop, a marca "EDERSON MARTINS" e o botão "Vamos
   conversar" quebravam em duas linhas. Os espaços diminuem de forma contínua
   (de 24 px em 768 px até os valores originais em 1024 px); textos, ordem,
   tamanhos de fonte e estilo permanecem. */
@media (min-width: 761px) and (max-width: 1024px) {
  .nav .wrap { gap: clamp(1.5rem, 9.375vw - 48px, 3rem); }
  .links { gap: clamp(1.5rem, 4.69vw - 12px, 2.25rem); }
  .brand, .nav-cta { white-space: nowrap; }
}

/* ==========================================================================
   F. FASE 2 — PORTFÓLIO (Casa Marinas · Casa Box · Casa 2x2)

   Estrutura real:
   - Marinas e Box: .project-frame (overflow:hidden) cuja FOTO é o fundo do
     pseudo-elemento :before (não existe <img>). GSAP não alcança pseudo-
     elementos, então o JS anima variáveis CSS no .project-frame e o :before
     as consome via as propriedades individuais `scale`/`translate`, que se
     compõem com o transform existente (scale(1.02) e o scale(1.045) do hover)
     sem sobrescrevê-los.
   - Casa 2x2: <img> HTML dentro de grid; o JS anima o próprio <img>.
   Todos os valores padrão = estado final: sem JS nada muda.
   ========================================================================== */

/* Pré-estado (html.m-pending, só enquanto o JS inicia; ver Fase 1): evita o
   "pisca" ao abrir direto em #projetos e libera sozinho em falha de script. */
.m-pending .project-frame > .wrap > *,
.m-pending .project-story > div > *,
.m-pending .project-two .wrap > img,
.m-pending .project-two .wrap > div > * { visibility: hidden; }
.m-pending .project-frame.box:before { clip-path: inset(100% 0 0 0); }

@media (prefers-reduced-motion: no-preference) {
  .project-frame:before {
    scale: var(--m-fs, 1);              /* Marinas: zoom por scroll · Box: folga do parallax */
    translate: 0 var(--m-fy, 0%);       /* Box: parallax (desktop) */
  }
  .project-frame.m-wc:before { will-change: scale, translate; } /* só enquanto visível */

  /* Zoom (Marinas) e parallax (Box) por scroll: onde o navegador suporta
     scroll-driven animations (Chrome/Edge 115+, Safari 26+), rodam NA THREAD DO
     COMPOSITOR, sem JS por quadro (medido: bem menos quadros perdidos em CPU
     lenta do que o scrub do GSAP). Nos demais navegadores o motion.js faz o
     mesmo com ScrollTrigger. Só ≥ 761 px, como na Fase 1; zero deslocamento de
     layout (scale/translate).
     Marinas: escala 1 → 1,07 (parte do enquadramento original).
     Box: escala fixa 1,06 (× 1,02 do CSS) e deslocamento ±2,5 % — a folga de
     ~4 % por lado cobre o deslocamento, então a foto nunca deixa borda à mostra. */
  @supports (animation-timeline: view()) {
    @media (min-width: 761px) {
      @keyframes m-push  { from { scale: 1; }    to { scale: 1.07; } }
      @keyframes m-drift { from { scale: 1.06; translate: 0 -2.5%; } to { scale: 1.06; translate: 0 2.5%; } }
      /* O quadro tem overflow:hidden (é um "scroller"), então view() direto no
         :before mediria o quadro contra ele mesmo e ficaria parado em 50 %.
         Por isso o quadro declara a timeline nomeada (medida contra a página)
         e o :before, seu descendente, a consome. */
      .project-frame { view-timeline: --m-frame block; }
      .project-frame:before {
        animation: m-push linear both;
        animation-timeline: --m-frame;
        animation-range: cover 0% cover 100%;
      }
      .project-frame.box:before { animation-name: m-drift; }
    }
  }

  /* Box: revelação vertical da foto (de baixo para cima). A classe .m-clip
     existe só durante a revelação e é removida ao final (volta ao original). */
  .project-frame.m-clip:before { clip-path: inset(var(--m-clip, 0%) 0 0 0); }
}

/* ==========================================================================
   G. FASE 3 — SEÇÕES FINAIS, FAQ, NAVEGAÇÃO
   Investir · Visualização · Sobre · FAQ · Contato · Menu
   ========================================================================== */

/* Pré-estado (html.m-pending; ver Fase 1): só enquanto o JS inicia; libera por
   conta própria (timeout/onerror). Evita o "pisca" ao abrir direto em /#contato. */
.m-pending :is(.investment, .visual, .about, .faq, .final) :is(.eyebrow, h2, p, .textlink, .button, details, aside > div) { visibility: hidden; }

/* Linhas divisórias que se desenham (Investir e FAQ): a borda original vira um
   pseudo-elemento na MESMA posição/cor, animado por `scale`. Valor padrão 1 =
   idêntico ao original, também sem JS. */
.investment aside > div,
.faq details { position: relative; border-bottom-color: transparent; }
.investment aside > div::after,
.faq details::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--line); transform-origin: left center;
  scale: var(--m-line, 1) 1; pointer-events: none;
}

/* ---------- FAQ: expandir/recolher ----------------------------------------
   Puro CSS sobre o <details> nativo: nenhum JS no toggle, então teclado
   (Enter/Espaço), leitores de tela e busca na página seguem nativos.
   ::details-content + interpolate-size animam a altura (Chrome/Edge 131+,
   Safari 18.4+). Onde não houver suporte, abre/fecha instantâneo, como antes. */
.faq summary { transition: color .25s ease; }
.faq summary:hover { color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  @supports (selector(::details-content)) {
    .faq details { interpolate-size: allow-keywords; }
    .faq details::details-content {
      block-size: 0; overflow: clip;
      transition: block-size .45s cubic-bezier(.2, .7, .2, 1), content-visibility .45s allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; }
    .faq details[open] > p { animation: m-faq-in .5s .06s cubic-bezier(.2, .7, .2, 1) both; }
  }
}
@keyframes m-faq-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Menu e rodapé: microinterações -------------------------------- */
/* Tudo em pseudo-elementos/cor: sem alterar layout e sem mover nada além de
   um fio de 1 px. O menu continua utilizável imediatamente (não é animado na carga). */
.links a { transition: color .25s ease; }
.links a:not(.nav-cta) { position: relative; }
.links a:not(.nav-cta)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1); pointer-events: none;
}
.links a:not(.nav-cta):focus-visible::after { transform: scaleX(1); }
@media (hover: hover) { .links a:not(.nav-cta):hover::after { transform: scaleX(1); } }

.nav-cta { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.nav-cta:hover, .nav-cta:focus-visible { background: #ffffff1f; border-color: #fff; }

.brand { transition: opacity .25s ease; }
a.brand:hover { opacity: .8; }
.textlink { transition: color .25s ease, border-color .25s ease; }
.textlink:focus-visible { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .links a:not(.nav-cta)::after { transition: none; }
}

/* ==== H. Fase 4B — correções e otimização ================================== */

/* Foto do Casa Box só é pedida quando o quadro se aproxima da tela
   (script no fim do <body>); antes disso fica só o gradiente-base do quadro. */
html.m-lazy-box .project-frame.box:not(.m-near) { --img-box: none; }

/* Menu mobile compacto. Sem JS: nada muda (só marca + botão, como no original).
   Com JS: html.m-menu mostra o botão e recolhe os 4 links num painel. */
.menu-links { display: contents; }
.menu-toggle { display: none; }
@media (max-width: 760px) {
  html.m-menu .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: .5rem; padding: 0;
    background: transparent; border: 1px solid #fff8; color: #fff; cursor: pointer;
  }
  html.m-menu .menu-toggle:hover { background: #ffffff1f; }
  .menu-bars, .menu-bars:before, .menu-bars:after {
    display: block; width: 18px; height: 2px; background: currentColor;
    transition: transform .25s ease, background .2s ease;
  }
  .menu-bars { position: relative; }
  .menu-bars:before, .menu-bars:after { content: ''; position: absolute; left: 0; }
  .menu-bars:before { top: -6px; }
  .menu-bars:after  { top: 6px; }
  .menu-open .menu-bars { background: transparent; }
  .menu-open .menu-bars:before { transform: translateY(6px) rotate(45deg); }
  .menu-open .menu-bars:after  { transform: translateY(-6px) rotate(-45deg); }
  html.m-menu .links .menu-links { display: none; }
  html.m-menu .nav.menu-open .menu-links {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #202020f5; padding: .25rem 20px 1rem;
    border-bottom: 1px solid #ffffff40;
  }
  html.m-menu .nav.menu-open .menu-links a {
    display: block; padding: .95rem 0; min-height: 48px; font-size: 1rem;
    border-bottom: 1px solid #ffffff26;
  }
  html.m-menu .nav.menu-open .menu-links a:last-child { border-bottom: 0; }
}
@media (max-width: 760px) {
  .nav .wrap { gap: .5rem; }
  .nav .brand, .nav-cta { white-space: nowrap; }
}
@media (max-width: 380px) {
  .nav-cta { font-size: .7rem; padding: .5rem .55rem; }
  html.m-menu .menu-toggle { margin-left: .35rem; }
  .brand { font-size: .78rem; }
  .brand small { letter-spacing: .26em; }
}
@media (max-width: 340px) {
  .brand { font-size: .72rem; }
  .brand small { font-size: .44rem; letter-spacing: .22em; }
  .nav-cta { font-size: .66rem; padding: .5rem .45rem; }
  html.m-menu .menu-toggle { width: 40px; margin-left: .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-bars, .menu-bars:before, .menu-bars:after { transition: none; }
}