/* ═══ movimento.css — linguagem de movimento da home (22/09/2026) ═══
   Um sistema só para todas as seções: quando a seção entra na tela (JS acRevela → classe .ac-in),
   os elementos entram em CASCATA na ordem tag → filete → título → texto → mídia/cards → botão.
   Cada elemento recebe --d (atraso) pelo JS conforme a ordem no DOM. Easing e distâncias iguais
   às das seções que já funcionavam (Destacamos/Rótulos): 22px, .9s, cubic-bezier(.22,1,.36,1).
   As seções que já tinham entrada própria (Destacamos, Rótulos) NÃO estão aqui. */
:root{--mv-ease:cubic-bezier(.22,1,.36,1);--mv-dur:.9s}

/* elemento que revela: sobe 22px + fade */
html.mv body [data-mv]{opacity:0;transform:translateY(22px);
  transition:opacity var(--mv-dur) var(--mv-ease) var(--d,0s),transform var(--mv-dur) var(--mv-ease) var(--d,0s)}
html body .ac-in [data-mv]{opacity:1;transform:none}
/* filete dourado sob a tag: cresce da esquerda */
html.mv body [data-mv="linha"]{transform:scaleX(0);transform-origin:left center;transition:transform .7s var(--mv-ease) var(--d,0s),opacity .3s ease var(--d,0s)}
html body .ac-in [data-mv="linha"]{transform:scaleX(1)}
html.mv body [data-mv="linha-centro"]{transform:scaleX(0);transform-origin:center;transition:transform .7s var(--mv-ease) var(--d,0s),opacity .3s ease var(--d,0s)}
html body .ac-in [data-mv="linha-centro"]{transform:scaleX(1)}
/* palavra em itálico dourado dos títulos: chega um tique depois do título */
html.mv body [data-mv="titulo"] em{display:inline-block;opacity:0;transform:translateY(10px);transition:opacity .7s var(--mv-ease) calc(var(--d,0s) + .28s),transform .7s var(--mv-ease) calc(var(--d,0s) + .28s)}
html body .ac-in [data-mv="titulo"] em{opacity:1;transform:none}
/* mídia grande: sobe e assenta a escala */
html.mv body [data-mv="midia"]{transform:translateY(26px) scale(.985)}
html body .ac-in [data-mv="midia"]{transform:none}
/* cards escalonados pelo índice --i */
html body [data-mv="card"]{transition-delay:calc(var(--d,0s) + var(--i,0) * 90ms)}
/* elementos que já têm transform próprio (botões com hover scale) — só opacidade */
html body [data-mv="fade"]{transform:none}

/* hero das páginas internas: a foto de fundo assenta a escala enquanto o texto entra */
html.mv body [data-mv="hero-img"]{opacity:1;transform:scale(1.05);transition:transform 1.8s var(--mv-ease)}
html body .ac-in [data-mv="hero-img"]{transform:none}

/* ── HERO: abertura em 4 tempos — por CSS puro, sem depender do JS (o JS chegava tarde em conexões lentas
   e o hero ficava invisível enquanto o resto da página já rolava) ── */
@keyframes mvLogo{from{opacity:0;transform:scale(.94) translateY(10px);filter:drop-shadow(0 6px 28px rgba(0,0,0,0))}to{opacity:1;transform:none;filter:drop-shadow(0 6px 28px rgba(0,0,0,.36))}}
@keyframes mvLinha{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mvTag{from{clip-path:inset(0 50% 0 50%);opacity:0}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes mvSobe{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes mvFade{from{opacity:0}to{opacity:1}}
html body .ach5-logo{animation:mvLogo 1.3s var(--mv-ease) .15s both}
html body .ach5-tline{animation:mvLinha .9s var(--mv-ease) .75s both}
html body .ach5-tline:first-child{transform-origin:right center}
html body .ach5-tline:last-child{transform-origin:left center}
html body .ach5-tag{animation:mvTag 1s var(--mv-ease) .8s both}
html body .ach5-btn-gold{animation:mvSobe .8s var(--mv-ease) 1.25s both}
html body .ach5-btn-out{animation:mvSobe .8s var(--mv-ease) 1.37s both}
html body .ach5-scroll{animation:mvFade 1s ease 2s both}

/* ── faixa do slogan: as duas linhas douradas se desenham do centro ── */
html body .sec-artchik-faixa{position:relative}
html body .ac-faixa-linha{position:absolute;left:50%;width:min(1180px,calc(100% - 96px));height:1px;transform:translateX(-50%) scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(231,200,133,.7) 20%,rgba(231,200,133,.7) 80%,transparent);transition:transform 1.1s var(--mv-ease) .1s}
html body .ac-faixa-linha--t{top:14px}html body .ac-faixa-linha--b{bottom:14px}
html body .sec-artchik-faixa.ac-in .ac-faixa-linha{transform:translateX(-50%) scaleX(1)}

/* ── parallax leve em fotos grandes (JS acParallax escreve --py) ── */
html body .acvid-player-wrap video,html body .acvid-player-wrap img{transform:translateY(var(--py,0px)) scale(1.06);will-change:transform}
html body .acvid-player-wrap{overflow:hidden}

/* ── botão flutuante: entra depois do hero ── */
html body .acfab{opacity:0 !important;transform:translateY(16px);transition:opacity .6s var(--mv-ease),transform .6s var(--mv-ease) !important}
html body .acfab.ac-show{opacity:1 !important;transform:none}

@media (prefers-reduced-motion:reduce){
  html body [data-mv],html body [data-mv="titulo"] em,html body .ach5-logo,html body .ach5-tline,html body .ach5-tag,html body .ach5-btn-gold,html body .ach5-btn-out,html body .ach5-scroll,html body .acfab{opacity:1 !important;transform:none !important;clip-path:none !important;filter:none !important;translate:0 0 !important;transition:none !important}
  html body .ac-faixa-linha{transform:translateX(-50%) scaleX(1) !important}
}

/* rede de segurança: JS ligado (html.mv) mas o motor de revelação não iniciou em 3 s → mostra tudo */
html.mv.mv-lento:not(.mv-ok) body [data-mv],html.mv.mv-lento:not(.mv-ok) body [data-mv="titulo"] em{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important}
html.mv.mv-lento:not(.mv-ok) body .acfab{opacity:1 !important;transform:none !important}