/* Critical CSS - минимальные стили для быстрой загрузки */
:root {
    --color-primary: #10b981;
    --color-secondary: #3b82f6;
    --color-accent: #8b5cf6;
    --color-dark: #1f2937;
}

/* Font Family Override */
body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Базовая анимация для контента */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes slideUp {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Упрощенные анимации для десктопа */
@media (min-width: 1024px) {
    @keyframes scaleIn {
        0% { transform: scale(0.9); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
    }
    
    @keyframes gradient {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
    
    /* Анимации для плавающих иконок только на десктопе */
    @keyframes floatSlow {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(5deg); }
    }
    
    @keyframes floatReverse {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(15px) rotate(-3deg); }
    }
    
    @keyframes floatUp {
        0%, 100% { transform: translateY(0px) translateX(0px); }
        33% { transform: translateY(-15px) translateX(10px); }
        66% { transform: translateY(-5px) translateX(-5px); }
    }
    
    @keyframes floatDown {
        0%, 100% { transform: translateY(0px) translateX(0px); }
        50% { transform: translateY(10px) translateX(-8px); }
    }
    
    .animate-float-slow { animation: floatSlow 8s ease-in-out infinite; }
    .animate-float-reverse { animation: floatReverse 6s ease-in-out infinite; }
    .animate-float-up { animation: floatUp 7s ease-in-out infinite; }
    .animate-float-down { animation: floatDown 9s ease-in-out infinite; }
}

/* Custom Utility Classes */
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: 200% 200%;
}

@media (min-width: 1024px) {
    .gradient-bg {
        animation: gradient 8s ease infinite;
    }
}

.text-gradient {
    background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animation Classes с условной загрузкой */
.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out;
}

@media (min-width: 1024px) {
    .animate-scale-in {
        animation: scaleIn 0.4s ease-out;
    }
    
    .animate-gradient {
        animation: gradient 8s ease infinite;
    }
    
    .animate-pulse-slow {
        animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
}

/* Анимация для линии перевода - только на десктопе */
@media (min-width: 1024px) {
    @keyframes drawLine {
        0% { 
            stroke-dasharray: 0, 1000; 
            opacity: 0;
        }
        20% { 
            opacity: 1;
        }
        100% { 
            stroke-dasharray: 1000, 0; 
            opacity: 0.8;
        }
    }
    
    .animate-draw-line {
        animation: drawLine 6s ease-in-out infinite;
    }
}

/* Адаптация плавающих иконок для мобильных устройств */
@media (max-width: 768px) {
    /* Полностью скрываем плавающие иконки на мобильных для производительности */
    .hero-floating-icon-large,
    .hero-floating-icon-medium,
    .hero-floating-icon-small {
        display: none !important;
    }
    
    /* Отключаем все анимации на мобильных */
    .animate-float-slow,
    .animate-float-reverse,
    .animate-float-up,
    .animate-float-down,
    .animate-pulse-slow,
    .animate-gradient,
    .animate-scale-in {
        animation: none !important;
    }
    
    /* Упрощаем переходы */
    * {
        transition-duration: 0.2s !important;
    }
}

/* Оптимизация для очень слабых устройств */
@media (max-width: 768px) and (max-device-memory: 2GB) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Custom Component Styles */
.scroll-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform; /* Оптимизация для GPU */
}

.scroll-section.animate-slide-up {
    opacity: 1;
    transform: translateY(0);
}

/* Центрирование блоков оплаты в их контейнерах */
.payment-item {
    margin-left: auto;
    margin-right: auto;
}

/* Стили для полей формы - принудительно светлая тема */
.form-field {
    background-color: white !important;
    color: #374151 !important;
    border: 2px solid #e5e7eb !important;
    -webkit-appearance: none; /* Убираем стандартные стили iOS */
    appearance: none;
}

.form-field:focus {
    border-color: #10b981 !important;
    background-color: white !important;
    color: #374151 !important;
    outline: none; /* Убираем outline для чистого вида */
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); /* Добавляем тень для доступности */
}

.form-field::placeholder {
    color: #9ca3af !important;
}

/* Убираем стрелки у input type="number" */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Button Hover Effects - только на десктопе */
@media (min-width: 1024px) and (hover: hover) {
    .hover-scale:hover {
        transform: scale(1.05);
    }
}

/* Background Decorations - упрощение для мобильных */
.bg-decoration {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.1;
    pointer-events: none; /* Не блокируем клики */
}

@media (min-width: 768px) {
    .bg-decoration-1 {
        top: 80px;
        left: 40px;
        width: 288px;
        height: 288px;
        background-color: #c084fc;
        animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    
    .bg-decoration-2 {
        bottom: 80px;
        right: 40px;
        width: 384px;
        height: 384px;
        background-color: #93c5fd;
        animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
}

/* Оптимизация производительности */
@media (max-width: 768px) {
    /* Отключаем тени на мобильных */
    .shadow-lg,
    .shadow-xl,
    .shadow-2xl {
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Упрощаем backdrop-filter на мобильных */
    .backdrop-blur-md,
    .backdrop-blur-sm {
        backdrop-filter: none !important;
        background-color: rgba(34, 34, 34, 0.98) !important;
    }
}

/* Принудительное GPU ускорение для критических элементов */
.transform-gpu {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}