/* Animações de entrada e saída — activas só com JavaScript (classe .js no <html>) */
.js .rv{
  opacity:0;transform:translate3d(0,36px,0);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),clip-path 1s cubic-bezier(.7,0,.2,1),filter .9s;
  will-change:opacity,transform;
}
.js .rv.in{opacity:1;transform:none;transition-delay:var(--d,0s)}
/* Ao sair pelo topo, sobe e desvanece */
.js .rv.out{opacity:0;transform:translate3d(0,-28px,0);transition-duration:.6s}

/* Títulos: revelação com máscara de baixo para cima */
.js .rv-h{opacity:1;clip-path:inset(0 0 100% 0);transform:translate3d(0,.35em,0)}
.js .rv-h.in{clip-path:inset(-.2em -.2em -.3em -.2em);transform:none}
.js .rv-h.out{clip-path:inset(100% 0 0 0);transform:translate3d(0,-.25em,0);opacity:1}

/* Etiquetas e números: deslizam da esquerda */
.js .rv-x{transform:translate3d(-28px,0,0)}
.js .rv-x.out{transform:translate3d(-16px,0,0)}

/* Linhas de lista: entram e o traço superior desenha-se */
.js .rv-row{transform:translate3d(0,28px,0)}

/* Imagens: janela que abre + zoom suave */
.js .rv-img{opacity:1;transform:none;clip-path:inset(12% 6% 12% 6% round 22px)}
.js .rv-img img{transform:scale(1.14);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.js .rv-img.in{clip-path:inset(0 0 0 0 round 18px)}
.js .rv-img.in img{transform:scale(1)}
.js .rv-img.out{clip-path:inset(12% 6% 12% 6% round 22px);opacity:1;transform:none}

/* Botões e cartões: ligeira escala */
.js .rv-s{transform:translate3d(0,20px,0) scale(.96)}

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv.out,.js .rv-h,.js .rv-img{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .js .rv-img img{transform:none!important}
}