borbad.s5l.ru/vue/app/pages/Events/index.styl

// vue/app/pages/Events/index.styl
// Стили исключительно для страницы мероприятий

.events-list-enter-active,
.events-list-leave-active
  transition: all 0.5s ease

.events-list-enter-from
  opacity: 0
  transform: translateY(30px)

.events-list-leave-to
  opacity: 0
  transform: translateY(-30px)

.events-list-move
  transition: transform 0.5s ease

.event-card
  .event-image
    img
      transition: transform 0.5s ease
      
    &:hover img
      transform: scale(1.05)

// Анимация появления карточек
@keyframes eventsFadeIn
  from
    opacity: 0
    transform: translateY(40px)
  to
    opacity: 1
    transform: translateY(0)

.event-card
  animation: eventsFadeIn 0.6s ease forwards
  
  for i in 1..12
    &:nth-child({i})
      animation-delay: (i * 0.1)s

// Адаптивность
@media (max-width: 768px)
  .events-grid .grid
    grid-template-columns: 1fr

// Стили для пустого состояния
.empty-state
  .empty-icon
    opacity: 0.5
    transition: opacity 0.3s ease
    
  &:hover .empty-icon
    opacity: 0.8