// app/pages/About/index.styl

// Анимации появления
@keyframes fadeInUp
  0%
    opacity: 0
    transform: translateY(30px)
  100%
    opacity: 1
    transform: translateY(0)

.animate-fade-in-up
  animation: fadeInUp 0.6s ease-out forwards

// Задержки для анимаций
.bg-white, .bg-accent, .bg-primary, .bg-secondary
  opacity: 0
  
  &.animate-fade-in-up
    opacity: 1
    
  &:nth-child(1)
    animation-delay: 0.1s
  &:nth-child(2)
    animation-delay: 0.2s
  &:nth-child(3)
    animation-delay: 0.3s
  &:nth-child(4)
    animation-delay: 0.4s

// Стили для карточек с иконками
.bg-white, .bg-gray-800
  transition: all 0.3s ease
  
  &:hover
    transform: translateY(-5px)
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)

// Градиентные тени для акцентных карточек
.bg-accent, .bg-primary, .bg-secondary
  position: relative
  overflow: hidden
  
  &::before
    content: ''
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%)
    pointer-events: none

// Стили для типографики
.prose
  p
    line-height: 1.7
    margin-bottom: 1rem
    
  strong
    color: #d69e2e
    font-weight: 600

// Адаптивность для мобильных устройств
@media (max-width: 768px)
  .grid
    gap: 1.5rem
    
  .bg-white, .bg-gray-800
    padding: 1.5rem
    
  .text-4xl
    font-size: 2.25rem
    line-height: 2.5rem
    
  .text-2xl
    font-size: 1.5rem
    line-height: 2rem

// Темная тема улучшения
.dark
  .bg-white
    background-color: #1f2937
    
  .prose
    p
      color: #d1d5db
      
    strong
      color: #d69e2e

// Плавный скролл для всей страницы
html
  scroll-behavior: smooth

// Кастомные стили для иконок
.w-12.h-12
  transition: all 0.3s ease
  
  &:hover
    transform: scale(1.1)

// Эффекты для кнопок призыва к действию
.bg-gradient-to-r
  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.2), transparent)
    transition: left 0.5s
    
  &:hover::after
    left: 100%