/* Исправление проблем с hero-content на мобильных устройствах */

/* Фиксируем отступ сверху для hero секции */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 100px !important; /* Увеличенный отступ для фиксированного хедера */
        min-height: calc(100vh - 80px);
    }
    
    /* Убеждаемся, что навбар имеет правильную высоту */
    .navbar {
        height: 70px;
        z-index: 9999;
    }
    
    /* Отменяем ТОЛЬКО 3D rotate трансформации от mousemove */
    .hero-content[style*="rotateY"],
    .hero-content[style*="rotateX"],
    .hero-content[style*="translate3d"] {
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    .hero-content {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
        max-width: 100% !important;
    }
    
    /* Отключаем 3D эффекты */
    .hero-section {
        perspective: none !important;
        -webkit-perspective: none !important;
        transform-style: flat !important;
        -webkit-transform-style: flat !important;
    }
    
    /* Фиксируем позиционирование */
    .hero-grid,
    .hero-left,
    .hero-right {
        transform: none !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }
    
    /* Отключаем pointer-events для 3D элементов */
    .hero-canvas,
    .hero-3d,
    canvas {
        pointer-events: none !important;
    }

    /* Technology Section - Fallback для блока без Lottie на мобильных */
    .tech-3d {
        min-height: 250px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6)) !important;
        border-radius: 16px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Иконка грузовика для мобильных (fallback вместо Lottie) */
    .tech-3d::before {
        content: '🚛';
        font-size: 80px;
        opacity: 0.3;
        animation: truckFloat 3s ease-in-out infinite;
        z-index: 1;
    }

    @keyframes truckFloat {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
    }

    /* Декоративные элементы */
    .tech-3d::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 50% 50%, rgba(246, 173, 85, 0.1), transparent);
        pointer-events: none;
        z-index: 0;
    }
}

/* Специально для маленьких экранов */
@media (max-width: 480px) {
    .hero-content,
    .hero-section,
    .hero-grid {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Принудительно центрируем контент */
    .hero-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px 15px !important;
    }
    
    .hero-title,
    .hero-description,
    .hero-actions {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
    }
}

/* Отключаем mousemove эффекты на touch устройствах */
@media (hover: none) and (pointer: coarse) {
    /* Отключаем только rotate трансформации от mousemove, но сохраняем анимации */
    .hero-content[style*="rotateY"],
    .hero-content[style*="rotateX"],
    .hero-content[style*="translate3d"] {
        transform: none !important;
    }
}

/* Красивые анимации для частиц */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 50%;
    pointer-events: none;
    animation: float-particle 10s infinite ease-in-out;
}

@keyframes float-particle {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.4;
    }
    90% {
        opacity: 0.4;
    }
    100% {
        transform: translateY(-100vh) translateX(50px);
        opacity: 0;
    }
}

/* Анимация парения для заголовка */
@keyframes float-text {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.hero-title {
    animation: float-text 3s ease-in-out infinite;
}

/* На мобильных делаем анимацию более subtle */
@media (max-width: 768px) {
    .hero-title {
        animation: float-text 4s ease-in-out infinite;
    }
    
    @keyframes float-text {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-5px);
        }
    }
}