/* =========================================================================
   Glassmorphism Cards CSS - CyberFox Pro Theme
   Эффект гласморфизм для карточек услуг
   ========================================================================= */

/* Основные стили для карточек с гласморфизмом */
.glassmorphism-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
    position: relative;
    overflow: hidden;
}

/* Эффект при наведении */
.glassmorphism-card:hover {
    transform: translateY(-6px) scale(1.015);
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 
        0 22px 42px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Светящийся эффект по краям */
.glassmorphism-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 18px;
    padding: 1.5px;
    background: conic-gradient(from 45deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.glassmorphism-card:hover::before {
    opacity: 1;
}

/* Анимация появления */
.glassmorphism-card.animate-visible {
    animation: glassmorphismFadeIn 0.8s ease-out forwards;
}

/* Единый неоновый стиль для кнопок и цены внутри карточек */
.glassmorphism-card .service-card__price,
.glassmorphism-card .cyber-btn {
    color: #63ccf9 !important;
    text-shadow: 0 0 12px rgba(14, 246, 204, 0.45);
}

.glassmorphism-card .cyber-btn {
    background: transparent !important;
    border: 1px solid rgba(14, 246, 204, 0.35) !important;
    box-shadow: 0 0 0 0 rgba(14, 246, 204, 0);
}

.glassmorphism-card .cyber-btn:hover {
    background: rgba(14, 246, 204, 0.1) !important;
    border-color: rgba(14, 246, 204, 0.55) !important;
    box-shadow: 0 6px 18px rgba(14, 246, 204, 0.25);
}

@keyframes glassmorphismFadeIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Стили для мобильных устройств */
@media (max-width: 768px) {
    .glassmorphism-card {
        border-radius: 16px;
        margin: 10px 0;
    }
    
    .glassmorphism-card:hover {
        transform: translateY(-4px) scale(1.01);
    }
    
    .glassmorphism-card::before {
        border-radius: 16px;
    }
}

/* Дополнительные эффекты для разных состояний */
.glassmorphism-card:active {
    transform: translateY(-1px) scale(0.99);
    transition: transform 0.1s ease;
}

.glassmorphism-card:focus-within {
    outline: none;
    box-shadow: 
        0 0 0 3px rgba(0, 170, 255, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Адаптация для темной темы */
@media (prefers-color-scheme: dark) {
    .glassmorphism-card {
        background: rgba(0, 0, 0, 0.34);
        border-color: rgba(255, 255, 255, 0.06);
    }
    
    .glassmorphism-card:hover {
        background: rgba(0, 0, 0, 0.42);
        border-color: rgba(255, 255, 255, 0.12);
    }
}

/* Оптимизация производительности */
.glassmorphism-card {
    will-change: transform, box-shadow, background;
    contain: layout style paint;
}

/* Поддержка для браузеров без backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
    .glassmorphism-card {
        background: rgba(0, 0, 0, 0.8);
        border-color: rgba(255, 255, 255, 0.2);
    }
    
    .glassmorphism-card:hover {
        background: rgba(0, 0, 0, 0.9);
        border-color: rgba(255, 255, 255, 0.3);
    }
}