/* Movimento do site: entradas e saídas ao rolar, títulos palavra por palavra, flutuação dos cards com foto,
   parallax e pequenos detalhes de vida. Só anima transform, opacity, translate e rotate (rodam no compositor, sem travar).
   Tudo respeita "reduzir movimento" (bloco no fim do arquivo). Carregado por último para sobrescrever o que for preciso. */

/* ---------- Entrada e saída ao rolar ----------
   Sem classe        = ainda não chegou (abaixo da tela): escondido
   .is-in            = visível
   .is-out           = já passou (acima da tela): some suave
   Variantes: data-reveal="left | right | zoom | fade" (o padrão sobe). Quem controla as classes é o js/motion.js. */
.js [data-reveal]{--rx:0px;--ry:1.75rem;--rs:1;
  opacity:0;transform:translate3d(var(--rx),var(--ry),0) scale(var(--rs));
  transition:opacity .9s var(--ease),transform 1.05s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal="left"]{--rx:-2.25rem;--ry:0px}
.js [data-reveal="right"]{--rx:2.25rem;--ry:0px}
.js [data-reveal="zoom"]{--ry:2rem;--rs:.94}
.js [data-reveal="fade"]{--ry:0px}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal].is-out{opacity:0;transform:translate3d(0,-1.25rem,0) scale(.985);
  transition-duration:.55s,.65s;transition-timing-function:ease;transition-delay:0ms}
.js [data-reveal="zoom"].is-out{transform:translate3d(0,-1.5rem,0) scale(.96)}

/* ---------- Títulos: palavra por palavra (o JS envolve cada palavra em .w > span) ---------- */
.js [data-split]{transition:opacity .5s ease}
.js [data-split].is-out{opacity:0}
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em 0 .18em;margin:-.14em 0 -.18em}
.js [data-split] .w>span{display:inline-block;transform:translate3d(0,118%,0);
  transition:transform 1.05s var(--ease) calc(var(--d,0ms) + var(--i,0) * 55ms)}
.js [data-split].is-in .w>span,.js [data-split].is-out .w>span{transform:none}

/* ---------- Linhas que se desenham (listas numeradas e temas) ---------- */
.sec--dark{--rule:rgb(251 248 242 / .22)}
.js .rows>li,.js .themes>li{position:relative;border-top-color:transparent}
.js .rows>li::before,.js .themes>li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule,var(--line));
  transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) calc(var(--d,0ms) + .2s)}
.js .rows>li:is(.is-in,.is-out)::before,.js .themes>li:is(.is-in,.is-out)::before{transform:none}

/* ---------- Flutuação suave dos cards com foto ----------
   Cada card tem o seu ritmo: --fd (duração), --fdelay (fase, negativa), --fy (altura) e --fr (inclinação).
   Usa as propriedades translate e rotate, que convivem com o transform da entrada. Só roda enquanto o card está na tela. */
@keyframes float{
  0%,100%{translate:0 0;rotate:0deg}
  33%{translate:calc(var(--fy,8px) * .3) calc(var(--fy,8px) * -.7);rotate:calc(var(--fr,.4deg) * -1)}
  66%{translate:calc(var(--fy,8px) * -.25) calc(var(--fy,8px) * -1);rotate:var(--fr,.4deg)}
}
[data-float]{animation:float var(--fd,8s) ease-in-out var(--fdelay,0s) infinite}
.js [data-float]:not(.is-live){animation-play-state:paused}
.js .gal[data-float]:hover,.js .rev[data-float]:hover{animation-play-state:paused} /* alvo parado na hora do clique/arraste */

/* ---------- Detalhes de vida ---------- */
/* cabeçalho entra de cima */
@keyframes drop{from{opacity:0;transform:translate3d(0,-1rem,0)}}
.hdr .wrap{animation:drop .9s var(--ease) both}

/* foto da hero: entra subindo, o arco desenha e a foto flutua */
@keyframes art-in{from{transform:translate3d(0,2.25rem,0) scale(.96)}}
@keyframes ring-in{from{opacity:0;transform:scale(.9)}}
.hero__art[data-float]{animation:art-in 1.2s var(--ease) .15s both,float var(--fd,9s) ease-in-out var(--fdelay,0s) infinite}
.hero__art::before{animation:ring-in 1.6s var(--ease) .5s both}

/* botões principais respiram (anel que se expande e some) */
@keyframes pulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.18,1.5);opacity:0}}
.btn[data-pulse]{position:relative;--pulse:var(--bordo)}
.btn--light[data-pulse]{--pulse:var(--paper)}
.btn[data-pulse]::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1.5px solid var(--pulse);pointer-events:none;
  animation:pulse 3.4s ease-out 1.2s infinite}
.js .btn[data-pulse]:not(.is-live)::after{animation-play-state:paused}

/* perguntas abrem deslizando (navegadores com ::details-content) */
@supports selector(details::details-content){
  .faq details{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:clip;transition:block-size .5s var(--ease),content-visibility .5s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* ---------- Atrelado à rolagem (CSS puro, sem JS; navegadores sem suporte simplesmente ficam parados) ---------- */
.progress{display:none}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes progress{to{transform:scaleX(1)}}
    .progress{display:block;position:fixed;inset:0 0 auto;height:3px;z-index:60;pointer-events:none;
      background:linear-gradient(90deg,var(--bordo),#B5485A);transform:scaleX(0);transform-origin:left;
      animation:progress linear both;animation-timeline:scroll(root)}

  }
}

/* ---------- Reduzir movimento: tudo parado e visível ---------- */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js [data-split]{transition:none}
  .js [data-split] .w>span{transform:none;transition:none}
  .js .rows>li::before,.js .themes>li::before{transform:none;transition:none}
  [data-float],.hero__art[data-float],.hero__art::before,.hdr .wrap,.btn[data-pulse]::after{animation:none}
  .faq details::details-content{transition:none}
}