borbad.s5l.ru/vue/app/shared/EventDetailModal/index.styl

// app/shared/EventDetailModal/index.styl

.event-detail
  .event-stats
    .stat
      transition: all 0.3s ease
      border: 1px solid transparent
      
      &:hover
        border-color: #d69e2e
        transform: translateY(-2px)
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
      
      .stat-value
        transition: color 0.3s ease
        
      .stat-label
        transition: color 0.3s ease

  .info-item
    transition: all 0.3s ease
    padding: 0.5rem
    border-radius: 0.5rem
    
    &:hover
      background-color: rgba(0, 0, 0, 0.02)
      
      .dark &
        background-color: rgba(255, 255, 255, 0.02)
    
    .icon
      transition: transform 0.3s ease
      
    &:hover .icon
      transform: scale(1.1)

  .action-buttons
    button
      transition: all 0.3s ease
      position: relative
      overflow: hidden
      
      &::before
        content: ''
        position: absolute
        top: 50%
        left: 50%
        width: 0
        height: 0
        background: rgba(255, 255, 255, 0.2)
        border-radius: 50%
        transform: translate(-50%, -50%)
        transition: width 0.6s, height 0.6s
        
      &:hover::before
        width: 300px
        height: 300px
        
      &:active
        transform: scale(0.98)

  .social-share
    button
      transition: all 0.3s ease
      position: relative
      overflow: hidden
      
      &::after
        content: ''
        position: absolute
        top: 0
        left: -100%
        width: 100%
        height: 100%
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent)
        transition: left 0.5s
        
      &:hover::after
        left: 100%

// Анимации для модального контента
.modal-content
  .event-visual
    img
      transition: transform 0.5s ease
      
    &:hover img
      transform: scale(1.02)

// Кастомные стили для категорий
.category-badge
  &.classical
    background: linear-gradient(135deg, #3b82f6, #1d4ed8)
    
  &.folk
    background: linear-gradient(135deg, #10b981, #047857)
    
  &.jazz
    background: linear-gradient(135deg, #8b5cf6, #7c3aed)
    
  &.pop
    background: linear-gradient(135deg, #ec4899, #db2777)
    
  &.dance
    background: linear-gradient(135deg, #f59e0b, #d97706)
    
  &.experimental
    background: linear-gradient(135deg, #6366f1, #4f46e5)
    
  &.theater
    background: linear-gradient(135deg, #ef4444, #dc2626)
    
  &.opera
    background: linear-gradient(135deg, #14b8a6, #0d9488)

// Адаптивность
@media (max-width: 1024px)
  .event-detail
    .grid
      grid-template-columns: 1fr !important
      
    .event-stats
      grid-template-columns: repeat(3, 1fr)
      
    .action-buttons
      flex-direction: column

@media (max-width: 640px)
  .event-detail
    .event-stats
      grid-template-columns: 1fr
      gap: 0.5rem
      
    .info-item
      flex-direction: column
      align-items: flex-start
      
      .icon
        margin-bottom: 0.5rem
        margin-right: 0

// Анимация появления статистики
@keyframes statAppear
  0%
    opacity: 0
    transform: translateY(20px)
  100%
    opacity: 1
    transform: translateY(0)

.event-stats .stat
  animation: statAppear 0.6s ease forwards
  
  &:nth-child(1)
    animation-delay: 0.1s
  &:nth-child(2)
    animation-delay: 0.2s
  &:nth-child(3)
    animation-delay: 0.3s

// Стили для состояния "мало билетов"
.low-availability
  .stat-value
    animation: pulse 2s infinite
    
  @keyframes pulse
    0%, 100%
      opacity: 1
    50%
      opacity: 0.7

// Стили для иконок
.icon
  svg
    transition: all 0.3s ease
    
  &:hover svg
    filter: drop-shadow(0 2px 4px rgba(214, 158, 46, 0.3))

// Темная тема улучшения
.dark
  .event-detail
    .info-item:hover
      background-color: rgba(255, 255, 255, 0.05)
      
    .stat
      background: linear-gradient(135deg, rgba(55, 65, 81, 0.8), rgba(31, 41, 55, 0.8))
      border: 1px solid rgba(75, 85, 99, 0.5)
      
      &:hover
        border-color: #d69e2e
        background: linear-gradient(135deg, rgba(55, 65, 81, 1), rgba(31, 41, 55, 1))

// Плавные переходы для всего контента
.event-detail > *
  transition: all 0.3s ease

// Кастомный скроллбар для модального окна
.modal-content
  &::-webkit-scrollbar
    width: 6px
    
  &::-webkit-scrollbar-track
    background: rgba(0, 0, 0, 0.1)
    border-radius: 3px
    
    .dark &
      background: rgba(255, 255, 255, 0.1)
      
  &::-webkit-scrollbar-thumb
    background: #d69e2e
    border-radius: 3px
    
    &:hover
      background: #b8860b