html{scroll-behavior:smooth}
/* Cards */
.card{border-radius:1rem;border:1px solid rgba(0,0,0,.08);background:#fff;padding:1.5rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
/* Simple reveal animations */
.reveal{opacity:0;transform:translateY(16px);}
.reveal.is-visible{opacity:1;transform:none;transition:opacity .6s ease, transform .6s ease}
/* Keyframes for variants */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* Utility classes applied via data-animate */
.animate-fade-up{animation:fadeUp .7s ease forwards}
.animate-fade-left{animation:fadeLeft .7s ease forwards}
.animate-fade-in{animation:fadeIn .7s ease forwards}


/* Section */
.card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.06)}

/* Цвет при прокрутке (override grayscale из Tailwind) */
img[data-color-on-scroll]{
  filter: grayscale(100%);
  opacity: .8;
  transform: translateY(8px);
  transition: filter .6s ease, opacity .6s ease, transform .6s ease;
  will-change: filter, opacity, transform;
}

/* Когда вошёл в вьюпорт — делаем цветным */
img[data-color-on-scroll].in{
  filter: grayscale(0) !important; /* перекрываем .grayscale из классов */
  opacity: 1;
  transform: translateY(0);
}