/* Animações suaves (teste): entrada ao rolar, troca de página, toque nos botões e cards. Só valem com html.mo (motion.js). */

/* entrada: sobe um pouco e aparece; o atraso de cada item vem do motion.js */
.mo .mo-r { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.mo .mo-r.mo-in { opacity: 1; transform: none; }

/* hero: a arte assenta devagar e o texto entra em sequência */
.mo .hero-art > svg, .mo .hero-art > .ph { transform: scale(1.06); transition: transform 1.6s var(--ease); }
.mo .hero.mo-in .hero-art > svg, .mo .hero.mo-in .hero-art > .ph { transform: none; }
.mo .hero-copy > * { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.mo .hero.mo-in .hero-copy > * { opacity: 1; transform: none; }
.mo .hero.mo-in .hero-copy > :nth-child(2) { transition-delay: 80ms; }
.mo .hero.mo-in .hero-copy > :nth-child(3) { transition-delay: 160ms; }

/* cards e categorias: levantam de leve no hover (só mouse) */
.mo .card, .mo .tile { transition: box-shadow .25s, border-color .25s, opacity .5s var(--ease), transform .7s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .mo .card.mo-in:hover, .mo .tiles li.mo-in:hover .tile { transform: translateY(-4px); transition: box-shadow .25s, border-color .25s, transform .3s var(--ease); }
}

/* aperto: o botão afunda um pouco ao clicar */
.mo .btn { transition: background-color .2s, color .2s, transform .16s var(--ease); }
.mo .btn:active, .mo .icon-btn:active, .mo .chip:active { transform: scale(.97); }
.mo .icon-btn, .mo .chip { transition: border-color .2s, box-shadow .2s, transform .16s var(--ease); }

/* menos movimento: só aparece, sem deslocar */
@media (prefers-reduced-motion: reduce) {
  .mo .mo-r, .mo .hero-copy > *, .mo .hero-art > svg, .mo .hero-art > .ph { transform: none !important; }
  .mo .mo-r, .mo .hero-copy > * { transition: opacity .3s ease !important; }
  .mo .card.mo-in:hover, .mo .btn:active { transform: none; }
}