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

// 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
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
  
  &:hover
    .event-image img
      transform: scale(1.05)

.line-clamp-2
  display: -webkit-box
  -webkit-line-clamp: 2
  -webkit-box-orient: vertical
  overflow: hidden

.line-clamp-3
  display: -webkit-box
  -webkit-line-clamp: 3
  -webkit-box-orient: vertical
  overflow: hidden

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

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

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

// Кастомные стили для пустого состояния
.empty-state
  .empty-icon
    opacity: 0.5

// Стили для бейджей категорий
.event-badge
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)

// Плавная прокрутка к событиям
html
  scroll-behavior: smooth