/* Появление элементов. Скрытое состояние включается классом anim-est,
   который ставит скрипт: без скрипта всё видно. */
html.anim-est [data-aos]{opacity:0;will-change:opacity,transform;
  transition:opacity .55s ease-out,transform .55s ease-out}
html.anim-est [data-aos^="fade"]{transform:translateY(20px)}
html.anim-est [data-aos="fade-left"]{transform:translateX(30px)}
html.anim-est [data-aos="fade-right"]{transform:translateX(-30px)}
html.anim-est [data-aos^="zoom"]{transform:translateY(16px) scale(.94)}
html.anim-est [data-aos^="flip"]{transform:translateY(16px)}
html.anim-est [data-aos].anim-vidno{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html.anim-est [data-aos]{opacity:1;transform:none;transition:none}
}

/* --- камень отвечает на касание: подсветка пары «камень + ярлык» ---
   Используем отдельные свойства scale и filter: transform уже занят
   и появлением, и правилом .hover-zoom:hover из темы. */
#main-catalog [id^="mc_svg_pamyat_"]{transition:scale .18s ease,filter .18s ease}
#main-catalog [id^="mc_svg_pamyat_"].mk-svyaz{
  scale:1.07;filter:drop-shadow(0 10px 18px rgba(20,32,46,.34))}
#main-catalog .catalog__wrapper .item{transition:transform .18s ease}
#main-catalog .catalog__wrapper .item.mk-svyaz{transform:translateY(-3px)}
#main-catalog .catalog__wrapper .item.mk-svyaz .catalog__title h3{color:#c04f40}
#main-catalog .catalog__wrapper .item.mk-svyaz .catalog__price{
  box-shadow:0 6px 16px rgba(20,32,46,.22)}
#main-catalog [id^="mc_svg_pamyat_"]:focus-visible{
  outline:3px solid #c04f40;outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  #main-catalog [id^="mc_svg_pamyat_"],
  #main-catalog .catalog__wrapper .item{transition:none}
}