/* =========================================
   1. БАЗОВЫЕ НАСТРОЙКИ И ШРИФТЫ
   ========================================= */
html { scroll-padding-top: 90px; }

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #F9FAFB;
    color: #141517;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* Блокировка скролла при открытом меню или модалке */
body.modal-open,
body.menu-open {
    overflow: hidden;
}

/* Кастомный скроллбар */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }

/* Стеклянная навигация */
.glass-nav {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Базовые стили для секций */
section {
    border-bottom: 2px solid #E2E8F0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#faq { border-bottom: none; }

/* =========================================
   2. АНИМАЦИИ ПОЯВЛЕНИЯ И 3D
   ========================================= */
.perspective-1000 { perspective: 1000px; }

.preserve-3d {
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    will-change: transform;
}

.section-fade { opacity: 0; transform: translateY(40px); }
.section-fade.visible { opacity: 1; transform: translateY(0); }

/* =========================================
   3. КАРТОЧКИ И ХОВЕР-ЭФФЕКТЫ
   ========================================= */
/* Карточки "О школе" */
.about-hover-card {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease, box-shadow 0.3s ease;
}
.about-hover-card:hover {
    transform: translateY(-12px) scale(1.03);
    border-color: #C2F052;
    box-shadow: 0px 15px 35px rgba(194, 240, 82, 0.35);
}
.about-hover-card .about-icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}
.about-hover-card:hover .about-icon { transform: scale(1.15) rotate(12deg); }

/* Интерактивные карточки курсов */
.interactive-course-card {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
}
.interactive-course-card:hover { transform: translateY(-10px) scale(1.02) rotateX(2deg); }
.interactive-course-card .card-glow-bg { transition: opacity 0.5s ease, transform 0.5s ease; opacity: 0; }
.interactive-course-card:hover .card-glow-bg { opacity: 1; transform: scale(1.2); }
.interactive-course-card .course-badge { transition: transform 0.3s ease, background-color 0.3s ease; }
.interactive-course-card:hover .course-badge { transform: scale(1.08); }
.interactive-course-card .course-icon { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.interactive-course-card:hover .course-icon { transform: scale(1.2) rotate(-8deg); }

/* =========================================
   4. ПАРАЛЛАКС
   ========================================= */
.parallax-bg, .parallax-element { will-change: transform; }

/* =========================================
   5. СЛАЙДЕР ОТЗЫВОВ (БЕСШОВНЫЙ)
   ========================================= */
.slider-container {
    display: flex;
    transition: transform 0.8s ease-in-out;
    width: 700%; /* 7 слайдов */
}

.slide-item {
    width: 14.2857%; /* 100% / 7 */
    flex-shrink: 0;
}

/* =========================================
   6. КЛЮЧЕВЫЕ КАДРЫ (KEYFRAMES)
   ========================================= */
/* Пульсация (для карточек и свечения) */
@keyframes subtle-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}
.animate-subtle { animation: subtle-pulse 3s infinite ease-in-out; }

@keyframes pulse-glow {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.1); opacity: 0.6; }
}
.animate-pulse-glow {
    animation: pulse-glow 4s ease-in-out infinite;
}

/* Тряска (для валидации форм) */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}
.animate-shake { animation: shake 0.4s ease-in-out; }

/* Вращение (для орбит/глобусов) */
@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.animate-spin-slow { animation: spin-slow 15s linear infinite; }
.animate-spin-slower { animation: spin-slow 25s linear infinite reverse; }

@keyframes spin-reverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}
.animate-spin-reverse { animation: spin-reverse 20s linear infinite; }

/* Парение (для точек и стикеров) */
@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
.animate-float-1 { animation: float-y 3s ease-in-out infinite; }
.animate-float-2 { animation: float-y 4s ease-in-out infinite; }
.animate-float-3 { animation: float-y 2.5s ease-in-out infinite; }

/* Конфетти (для отзывов) */
@keyframes confetti-fall-1 {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(300px) rotate(360deg); opacity: 0; }
}
@keyframes confetti-fall-2 {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(250px) rotate(-180deg); opacity: 0; }
}
@keyframes confetti-fall-3 {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(350px) rotate(90deg); opacity: 0; }
}

.animate-confetti-1 { animation: confetti-fall-1 5s linear infinite; }
.animate-confetti-2 { animation: confetti-fall-2 6s linear infinite; }
.animate-confetti-3 { animation: confetti-fall-3 4s linear infinite; }

/* =========================================
   7. ДОСТУПНОСТЬ (PREFERS-REDUCED-MOTION)
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .parallax-bg, .parallax-element { transform: none !important; }
}

/* =========================================
   8. СКРЫТИЕ СКРОЛЛБАРА В МОБИЛЬНОМ МЕНЮ
   ========================================= */
#mobile-menu > div::-webkit-scrollbar {
    display: none;
}
#mobile-menu > div {
    -ms-overflow-style: none;  /* IE и Edge */
    scrollbar-width: none;  /* Firefox */
}

/* =========================================
   9. ПОЛНОЕ УДАЛЕНИ ПЛАШКИ NETLIFY
   ========================================= */
#nl-badge-frame,
iframe[id="nl-badge-frame"],
iframe[title="Powered by Netlify"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    height: 0 !important;
    width: 0 !important;
}