/* ==========================================================================
   ANIMAÇÕES: leves (transform, opacity, clip-path e traço de SVG), sem biblioteca.
   1) Entrada da hero: coreografia por tempo, disparada por .hero-ready.
   2) Resto do site: ligado ao scroll e BIDIRECIONAL. O js/main.js grava em cada
      [data-reveal]/[data-scroll] as variáveis --in (0→1 entrando), --out (1→0 saindo
      pelo topo) e --c (-1→1, posição do centro, para parallax). Sem JS ou com
      "reduzir movimento", nada se mexe e tudo aparece no estado final.
   ========================================================================== */

/* ---------- 1. Entrada da hero ---------- */
.js .site-header { opacity: 0; transform: translateY(-100%); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), background-color .4s var(--ease-premium), box-shadow .4s var(--ease-premium), padding .4s var(--ease-premium); }
.hero-ready .site-header { opacity: 1; transform: none; }

.js [data-hero] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease-out) var(--hd, 0s), transform 1.1s var(--ease-out) var(--hd, 0s); }
.hero-ready [data-hero] { opacity: 1; transform: none; }
.js .hero-display[data-hero] { opacity: 1; transform: none; }

.js .hero .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) .1s; }
.hero-ready .hero .eyebrow::before { transform: none; }

/* máscara por palavra (hero e títulos h2) */
[data-palavras] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .12em 0; margin: 0 -.08em -.12em 0; }
[data-palavras] .w > span { display: inline-block; }
.js .hero-display .w > span { transform: translateY(110%) rotate(4deg); transform-origin: left bottom; transition: transform 1.15s var(--ease-out) calc(.3s + var(--i, 0) * .055s); }
.hero-ready .hero-display .w > span { transform: none; }

.js .moldura--hero .moldura-arco { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--ease-out) .35s; }
.hero-ready .moldura--hero .moldura-arco { clip-path: inset(0 0 0 0); }
.js .moldura--hero::after { opacity: 0; transform: translate(-14px, 14px); transition: opacity 1s var(--ease-out) 1.1s, transform 1.2s var(--ease-out) 1.1s; }
.hero-ready .moldura--hero::after { opacity: 1; transform: none; }
.js .moldura--hero .moldura-marca { opacity: 0; transform: scale(1.18); transition: opacity 1.2s var(--ease-out) 1s, transform 1.6s var(--ease-out) .9s; }
.hero-ready .moldura--hero .moldura-marca { opacity: .5; transform: none; }

.js .monograma-linha path { animation: none; }
.hero-ready .monograma-linha path { animation: tracar 3.6s var(--ease-out) .5s forwards; }

.js .hero-indice { border-top-color: transparent; position: relative; }
.js .hero-indice::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--linha-clara); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-out) 1s; }
.hero-ready .hero-indice::before { transform: none; }
.js .hero-indice a { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out) calc(1.15s + var(--n, 0) * .08s), transform .9s var(--ease-out) calc(1.15s + var(--n, 0) * .08s), color .3s var(--ease-premium); }
.hero-indice a:nth-child(2) { --n: 1; } .hero-indice a:nth-child(3) { --n: 2; } .hero-indice a:nth-child(4) { --n: 3; }
.hero-ready .hero-indice a { opacity: 1; transform: none; }

.hero-bg::before { animation: respirar 18s ease-in-out infinite alternate; }
@keyframes respirar { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-4%, 3%, 0) scale(1.08); } }

/* hero ligada ao scroll (--hs: 0 no topo, 1 quando a hero saiu) */
.scroll-pronto .hero-texto { translate: 0 calc(var(--hs, 0) * -110px); opacity: calc(1 - var(--hs, 0) * .85); }
.scroll-pronto .hero-visual { translate: 0 calc(var(--hs, 0) * -40px); scale: calc(1 - var(--hs, 0) * .06); }
.scroll-pronto .monograma-linha { rotate: calc(var(--hs, 0) * -14deg); scale: calc(1 + var(--hs, 0) * .2); }
.scroll-pronto .hero-bg { translate: 0 calc(var(--hs, 0) * 160px); }

/* barra de progresso de leitura */
.progresso-leitura { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; pointer-events: none; background: linear-gradient(90deg, var(--ouro), var(--ouro-claro)); transform-origin: left; transform: scaleX(0); }
.sem-movimento .progresso-leitura { display: none; }

/* ---------- 2. Blocos ligados ao scroll ---------- */
/* --p: progresso de entrada com atraso opcional --k (cascata entre irmãos na mesma linha) */
.scroll-pronto [data-reveal] {
  --p: clamp(0, calc((var(--in, 1) - var(--k, 0) * .12) / (1 - var(--k, 0) * .12)), 1);
  --e: calc(1 - var(--p));
  --sai: calc(1 - var(--out, 1));
  opacity: calc(var(--p) * (1 - var(--sai) * .7));
  transform:
    translate3d(calc(var(--e) * var(--dx, 0px)), calc(var(--e) * var(--dy, 80px) + var(--sai) * -50px), 0)
    rotate(calc(var(--e) * var(--dr, 0deg)))
    scale(calc(1 - var(--e) * var(--ds, 0)));
  will-change: transform, opacity;
}

/* direções */
.scroll-pronto [data-reveal="esq"] { --dx: -110px; --dy: 0px; }
.scroll-pronto [data-reveal="dir"] { --dx: 110px; --dy: 0px; }
.scroll-pronto .eyebrow[data-reveal] { --dx: -60px; --dy: 0px; }

/* títulos: o bloco fica; as palavras sobem de dentro da máscara, uma após a outra */
.scroll-pronto .h2[data-reveal] { opacity: calc(1 - var(--sai) * .7); transform: translate3d(0, calc(var(--sai) * -50px), 0); }
.scroll-pronto .h2[data-palavras] .w > span {
  --pw: clamp(0, calc(var(--in, 1) * 1.9 - var(--i, 0) * .1), 1);
  transform: translateY(calc((1 - var(--pw)) * 112%)) rotate(calc((1 - var(--pw)) * 5deg));
  transform-origin: left bottom;
}

/* linha do eyebrow cresce com o scroll */
.scroll-pronto .eyebrow[data-reveal]::before { transform: scaleX(var(--p)); transform-origin: left; }

/* cascata de filhos ([data-stagger]): cada item entra deslizando, atrasado pelo índice */
.scroll-pronto [data-stagger] > * {
  --q: clamp(0, calc((var(--in, 1) - var(--k, 0) * .09) * 1.9), 1);
  opacity: var(--q);
  transform: translate3d(calc((1 - var(--q)) * var(--sx, -44px)), 0, 0);
}
.scroll-pronto [data-stagger="dir"] > * { --sx: 60px; }
.scroll-pronto [data-reveal][data-stagger] { opacity: calc(1 - var(--sai) * .7); transform: translate3d(0, calc(var(--sai) * -50px), 0); }

/* áreas: cartões entram pelos lados, número desliza, ícone se desenha */
.scroll-pronto .area:nth-child(odd) { --dx: -90px; --dy: 50px; --dr: -1.5deg; }
.scroll-pronto .area:nth-child(even) { --dx: 90px; --dy: 50px; --dr: 1.5deg; --k: 1; }
.scroll-pronto .area-num { display: inline-block; transform: translateX(calc((1 - var(--p, 1)) * -50px)); opacity: var(--p, 1); }
.area-ico path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.scroll-pronto .area .area-ico path { stroke-dashoffset: clamp(0, calc((1 - var(--p, 1)) * 1.8), 1); }
.scroll-pronto .area-link { clip-path: inset(0 calc((1 - clamp(0, calc(var(--p, 1) * 1.6 - .6), 1)) * 100%) 0 0); }

/* escritório: molduras abrem em cortina e flutuam em velocidades diferentes */
.scroll-pronto .socia { --dy: 120px; }
.scroll-pronto .socia--baixo { --k: 1; }
.scroll-pronto .socia .moldura-arco { clip-path: inset(calc((1 - var(--p, 1)) * 100%) 0 0 0); }
.scroll-pronto .socia .moldura { translate: 0 calc(var(--c, 0) * 50px); }
.scroll-pronto .socia--baixo .moldura { translate: 0 calc(var(--c, 0) * 110px); }
.scroll-pronto .socia .moldura-marca { transform: scale(calc(1.3 - var(--p, 1) * .3)); }

/* como funciona: passos sobem em cascata, linha dourada corre, numeral cai */
.passo { border-top: 0; position: relative; }
.passo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(185, 156, 87, .5); transform-origin: left; }
.scroll-pronto .passo { --dy: 110px; }
.scroll-pronto .passo:nth-child(2) { --k: 1; } .scroll-pronto .passo:nth-child(3) { --k: 2; } .scroll-pronto .passo:nth-child(4) { --k: 3; }
.scroll-pronto .passo::before { transform: scaleX(var(--p, 1)); }
.scroll-pronto .passo-num { transform: translateY(calc((1 - var(--p, 1)) * -40px)); }

/* contato: cartão cresce e o monograma gira com o scroll */
.scroll-pronto .contato[data-reveal] { --dy: 90px; --ds: .07; }
.scroll-pronto .contato-marca { transform: translateY(calc(var(--c, 0) * 90px)) rotate(calc(var(--c, 0) * -14deg)); }

/* FAQ: abertura suave */
.faq-item[open] .faq-resp { animation: abrir-faq .55s var(--ease-out); }
@keyframes abrir-faq { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-bg::before { animation: none; }
}

/* Hero: segunda moldura entra depois da primeira (cortina + leve subida) */
.js .moldura--hero-2 .moldura-arco { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-out) .85s; }
.hero-ready .moldura--hero-2 .moldura-arco { clip-path: inset(0 0 0 0); }
.js .moldura--hero-2::after { opacity: 0; transform: translate(10px, 10px); transition: opacity 1s var(--ease-out) 1.4s, transform 1.2s var(--ease-out) 1.4s; }
.hero-ready .moldura--hero-2::after { opacity: 1; transform: none; }
/* Revezamento das sócias na hero: a cada troca (classe .revezar no .hero-visual, js/main.js)
   a foto que entra sobe em cortina por cima da que sai; a que sai só é recolhida depois. */
.hero-visual .moldura-arco > img { transition: clip-path 1.4s var(--ease-out), transform 2.6s var(--ease-out); }
.hero-visual .foto-a { z-index: 2; clip-path: inset(0 0 0 0); transform: none; }
.hero-visual .foto-b { z-index: 1; clip-path: inset(100% 0 0 0); transform: scale(1.1); transition: clip-path 0s 1.4s, transform 0s 1.4s; }
.hero-visual.revezar .foto-b { z-index: 2; clip-path: inset(0 0 0 0); transform: none; transition: clip-path 1.4s var(--ease-out), transform 2.6s var(--ease-out); }
.hero-visual.revezar .foto-a { z-index: 1; clip-path: inset(100% 0 0 0); transform: scale(1.1); transition: clip-path 0s 1.4s, transform 0s 1.4s; }
/* a moldura pequena troca um pouco depois da grande */
.hero-visual .moldura--hero-2 .moldura-arco > img.foto-a,
.hero-visual.revezar .moldura--hero-2 .moldura-arco > img.foto-b { transition-delay: .25s; }
.hero-visual .moldura--hero-2 .moldura-arco > img.foto-b,
.hero-visual.revezar .moldura--hero-2 .moldura-arco > img.foto-a { transition-delay: 1.65s; }
/* parallax própria da moldura menor ao rolar */
.scroll-pronto .moldura--hero-2 { translate: 0 calc(var(--hs, 0) * -70px); }
/* fotos das sócias: zoom sai com o scroll, junto da cortina */
.scroll-pronto .socia .moldura-arco > img { transform: scale(calc(1.18 - var(--p, 1) * .18)); transition: none; }