/* ============================================================
   Movimento — traduz a entrada dos slides do Canva para a web.
   Regras: nada fica parado esperando scroll se o JS não rodar;
   tudo desliga em prefers-reduced-motion; 120–420ms, sem bounce.
   ============================================================ */

/* estado de repouso: TUDO visível. O JS é que opta por animar. */
.rev{opacity:1;transform:none}

html.js .rev{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .52s cubic-bezier(.22,.61,.36,1),
             transform .52s cubic-bezier(.22,.61,.36,1);
}
html.js .rev.in{opacity:1;transform:none}
html.js .rev.d1{transition-delay:.07s}
html.js .rev.d2{transition-delay:.14s}
html.js .rev.d3{transition-delay:.21s}

/* entrada do hero: acontece no load, não no scroll */
@keyframes slideL{from{opacity:0;transform:translateX(-7%)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:0;transform:translateX(7%)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}

html.js .anim-l{animation:slideL .72s cubic-bezier(.22,.61,.36,1) both}
html.js .anim-r{animation:slideR .72s cubic-bezier(.22,.61,.36,1) both .1s}
html.js .anim-u{animation:fadeUp .6s cubic-bezier(.22,.61,.36,1) both .2s}
html.js .anim-p{animation:popIn .5s cubic-bezier(.34,1.2,.64,1) both .34s}

/* micro-interações */
.zoomable{overflow:hidden}
.zoomable img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.zoomable:hover img{transform:scale(1.04)}

.pill{transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.pill:not(.solid):hover{background:var(--cabare);color:var(--panel);border-color:var(--cabare)}
.field .pill:not(.solid):hover{background:var(--panel);color:var(--cabare);border-color:var(--panel)}

.panel,.postcard{transition:box-shadow .3s ease}

@media (prefers-reduced-motion:reduce){
  html.js .rev{opacity:1!important;transform:none!important;transition:none!important}
  html.js .anim-l,html.js .anim-r,html.js .anim-u,html.js .anim-p{animation:none!important}
  .zoomable:hover img{transform:none}
}