/* Animações: apenas transform e opacity. Curvas e durações padronizadas em base.css */
.js [data-reveal]{opacity:0;transform:translateY(28px)}
.js [data-reveal].is-in{opacity:1;transform:none;transition:opacity .7s var(--ease-out) calc(var(--d,0) * 80ms),transform .7s var(--ease-out) calc(var(--d,0) * 80ms)}
/* depois de revelado, cards voltam a responder rápido ao hover */
.js [data-reveal].is-done{transition:transform .32s var(--ease-out),box-shadow .32s var(--ease-out),border-color .32s ease,background-color .3s ease}

/* Títulos: palavra por palavra */
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.js [data-split] .w>span{display:inline-block;transform:translateY(105%)}
.js [data-split].is-in .w>span{transform:none;transition:transform .8s var(--ease-out) calc(var(--i) * 45ms + var(--base,0ms))}

/* Entrada do hero (CSS puro, roda fora da thread principal) */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.js .hero-in{opacity:0;animation:rise .8s var(--ease-out) both;animation-delay:calc(var(--d,0) * 90ms + 150ms)}
.js .header__bar{animation:rise .8s var(--ease-out) both}

/* Pulso da marca: linha desenhada ao entrar na tela */
.pulse.is-in path{animation:draw 1.6s var(--ease-io) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* Carrosséis de marcas: a faixa desloca apenas por transform para manter o movimento leve. */
@keyframes brands-scroll{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{transform:none}
  .js [data-reveal].is-in{transition:opacity .3s ease}
  .js [data-split] .w>span{transform:none}
  .js .hero-in,.js .header__bar{animation:none;opacity:1}
  .pulse path{stroke-dashoffset:0;animation:none!important}
  .btn,.card,.pillar,.brand,.menu,.seg::before{transition-duration:.01ms!important}
  .brands__track{animation:none!important;transform:none!important}
  .brands__marquee{overflow:visible;mask-image:none;-webkit-mask-image:none}
  .brands__group{flex-wrap:wrap;white-space:normal}
  .brands__group[aria-hidden="true"]{display:none}
  .brands__desktop{grid-template-columns:1fr;gap:12px}
  .brands__desktop .brands__group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0;gap:10px}
  .brands__mobile .brands__group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0;gap:10px}
  .brands .brand{flex:initial;width:100%;height:72px;min-width:0}
}