/**
 * ============================================================================
 * V2 BASE — Переменные, типографика, анимации
 * ============================================================================
 * 
 * @file        web/css/v2/base.css
 * @description Базовые стили модуля V2 "Мастерская Санты"
 * @version     1.0 (Декабрь 2025)
 * 
 * ============================================================================
 * СОДЕРЖИМОЕ:
 * ────────────────────────────────────────
 * 
 * 1. CSS Variables (:root)
 *    - Цвета фона: --v2-bg-deep, --v2-bg-dark, --v2-bg-card, --v2-bg-elevated
 *    - Акценты: --v2-gold, --v2-red, --v2-green, --v2-ice-blue, --v2-purple
 *    - Тексты: --v2-text, --v2-text-muted, --v2-text-dim
 *    - Градиенты: --v2-gradient-aurora, --v2-gradient-gold, etc.
 *    - Эффекты: --v2-shadow-glow, --v2-shadow-card, --v2-shadow-hover
 *    - Геометрия: --v2-radius-sm/md/lg/xl
 *    - Анимации: --v2-ease-bounce, --v2-duration-fast/normal/slow
 * 
 * 2. Base Layout (.v2-layout)
 *    - Шрифты: Quicksand, Montserrat
 *    - Фон страницы
 *    - Заголовки h1-h6
 * 
 * 3. Keyframe Animations (@keyframes v2-*)
 *    - v2-aurora — северное сияние
 *    - v2-float — парящий эффект
 *    - v2-bounce — подпрыгивание
 *    - v2-fadeInUp/Scale/Right — появление элементов
 *    - v2-pulse — пульсация
 *    - v2-shimmer — мерцание
 *    - v2-rotate — вращение
 * 
 * 4. Animation Classes (.v2-animate-*)
 *    - .v2-animate-in — появление снизу
 *    - .v2-animate-in-scale — появление с масштабом
 *    - .v2-animate-in-right — появление справа
 *    - .v2-delay-1..6 — задержки анимации
 * 
 * ============================================================================
 * ИСПОЛЬЗОВАНИЕ:
 * 
 * Цвета через переменные:
 * background: var(--v2-bg-card);
 * color: var(--v2-gold);
 * 
 * Анимации:
 * <div class="v2-animate-in v2-delay-2">...</div>
 * 
 * ============================================================================
 */

/* ==========================================================================
   1. CSS VARIABLES — Палитра Мастерской Санты
   ========================================================================== */

:root {
    /* ─────────────────────────────────────────────────────────────────────
       Фоны — глубокая зимняя ночь (от тёмного к светлому)
       ───────────────────────────────────────────────────────────────────── */
    --v2-bg-deep: #0a0f1a;           /* Самый тёмный — ночное небо */
    --v2-bg-dark: #111827;           /* Основной фон страницы */
    --v2-bg-card: #1a2332;           /* Фон карточек */
    --v2-bg-card-on-card: #303d51;           /* Фон карточек на карточках */
    --v2-bg-card-hover: #1f2937;     /* Hover состояние карточек */
    --v2-bg-elevated: #243044;       /* Приподнятые элементы */
    
    /* ─────────────────────────────────────────────────────────────────────
       Акценты — новогодняя магия
       ───────────────────────────────────────────────────────────────────── */
    /* Золото — главный акцент (CTA, ссылки) */
    --v2-gold: #f5c842;
    --v2-gold-light: #fde68a;
    --v2-gold-glow: rgba(245, 200, 66, 0.3);
    
    /* Красный — срочное, ошибки */
    --v2-red: #dc2626;
    --v2-red-bright: #ef4444;
    --v2-red-glow: rgba(220, 38, 38, 0.3);
    
    /* Зелёный — успех, доступно */
    --v2-green: #10b981;
    --v2-green-bright: #34d399;
    --v2-green-glow: rgba(16, 185, 129, 0.3);
    
    /* Ледяной голубой — информация, этап отправки */
    --v2-ice-blue: #38bdf8;
    --v2-ice-glow: rgba(56, 189, 248, 0.2);
    
    /* Фиолетовый — магия, ожидание, премиум */
    --v2-purple: #a855f7;
    --v2-purple-glow: rgba(168, 85, 247, 0.2);
    
    /* ─────────────────────────────────────────────────────────────────────
       Тексты
       ───────────────────────────────────────────────────────────────────── */
    --v2-text: #f1f5f9;              /* Основной текст — почти белый */
    --v2-text-muted: #94a3b8;        /* Вторичный текст */
    --v2-text-dim: #64748b;          /* Приглушённый текст */
    --v2-text-dark: #0a0f1a;
    /* ─────────────────────────────────────────────────────────────────────
       Градиенты
       ───────────────────────────────────────────────────────────────────── */
    --v2-gradient-aurora: linear-gradient(135deg, #1e3a5f 0%, #0f172a 50%, #1e1b4b 100%);
    --v2-gradient-magic: linear-gradient(135deg, #dc2626 0%, #991b1b 50%, #166534 100%);
    --v2-gradient-gold: linear-gradient(135deg, #f5c842 0%, #d97706 100%);
    --v2-gradient-ice: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    --v2-gradient-festive: linear-gradient(135deg, #dc2626 0%, #b91c1c 25%, #166534 75%, #15803d 100%);
    
    /* ─────────────────────────────────────────────────────────────────────
       Тени и эффекты
       ───────────────────────────────────────────────────────────────────── */
    --v2-shadow-glow: 0 0 30px rgba(245, 200, 66, 0.15);
    --v2-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
    --v2-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(245, 200, 66, 0.1);
    
    /* ─────────────────────────────────────────────────────────────────────
       Геометрия (скругления)
       ───────────────────────────────────────────────────────────────────── */
    --v2-radius-sm: 8px;             /* Мелкие элементы (badges, tags) */
    --v2-radius-md: 12px;            /* Кнопки, поля ввода */
    --v2-radius-lg: 20px;            /* Карточки */
    --v2-radius-xl: 28px;            /* Большие блоки, hero */
    
    /* ─────────────────────────────────────────────────────────────────────
       Анимации — тайминги
       ───────────────────────────────────────────────────────────────────── */
    --v2-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --v2-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --v2-duration-fast: 0.2s;
    --v2-duration-normal: 0.4s;
    --v2-duration-slow: 0.8s;
}

/* ==========================================================================
   2. BASE LAYOUT — Основа страницы
   ========================================================================== */

.v2-layout {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--v2-gradient-aurora);
    min-height: 100vh;
}

.v2-layout #content {
    background: transparent;
}

.v2-layout .layout-px-spacing {
    background: transparent;
}

/* Заголовки — Montserrat для акцента */
.v2-layout h1, 
.v2-layout h2, 
.v2-layout h3, 
.v2-layout h4, 
.v2-layout h5, 
.v2-layout h6 {
    font-family: 'Montserrat', 'Quicksand', sans-serif;
    font-weight: 700;
    color: var(--v2-text);
}

/* ==========================================================================
   3. KEYFRAME ANIMATIONS — Анимации
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   Атмосферные эффекты
   ───────────────────────────────────────────────────────────────────────── */

/* Северное сияние на фоне */
@keyframes v2-aurora {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

/* Парящий эффект */
@keyframes v2-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Подпрыгивание */
@keyframes v2-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.05); }
}

/* Падающий снег */
@keyframes v2-snowfall {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(300px) rotate(360deg); opacity: 0; }
}

/* Плавающие частицы */
@keyframes v2-particle-float {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    50% { transform: translateY(-10px) scale(1.5); opacity: 0.6; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Интерактивные эффекты
   ───────────────────────────────────────────────────────────────────────── */

/* Мерцание */
@keyframes v2-shimmer {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Вращение */
@keyframes v2-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Блеск на прогресс-баре */
@keyframes v2-progress-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Пульсация */
@keyframes v2-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Пульсация точки */
@keyframes v2-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Мигание */
@keyframes v2-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Мерцание звёзд */
@keyframes v2-twinkle {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.2); }
}

/* CTA пульсация */
@keyframes v2-cta-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

/* Свечение профиля */
@keyframes v2-profile-glow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Пульсация кольца */
@keyframes v2-ring-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Входные анимации (Appearance)
   ───────────────────────────────────────────────────────────────────────── */

/* Появление снизу */
@keyframes v2-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Появление с масштабом */
@keyframes v2-fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Появление справа */
@keyframes v2-slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   4. ANIMATION CLASSES — Классы анимации
   ========================================================================== */

/* Появление снизу */
.v2-animate-in {
    animation: v2-fadeInUp 0.6s var(--v2-ease-smooth) forwards;
    opacity: 0;
}

/* Появление с масштабом */
.v2-animate-in-scale {
    animation: v2-fadeInScale 0.5s var(--v2-ease-smooth) forwards;
    opacity: 0;
}

/* Появление справа */
.v2-animate-in-right {
    animation: v2-slideInRight 0.5s var(--v2-ease-smooth) forwards;
    opacity: 0;
}

/* Задержки анимаций — для каскадного появления */
.v2-delay-1 { animation-delay: 0.1s; }
.v2-delay-2 { animation-delay: 0.2s; }
.v2-delay-3 { animation-delay: 0.3s; }
.v2-delay-4 { animation-delay: 0.4s; }
.v2-delay-5 { animation-delay: 0.5s; }
.v2-delay-6 { animation-delay: 0.6s; }

/* ==========================================================================
   5. ACCESSIBILITY — Доступность
   ========================================================================== */

/* Отключение анимаций для пользователей с настройкой reduced motion */
@media (prefers-reduced-motion: reduce) {
    .v2-animate-in,
    .v2-animate-in-scale,
    .v2-animate-in-right {
        animation: none;
        opacity: 1;
    }
    
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}