/* Дополнительные стили и цветовые схемы */

/* Градиентные фоны */
.gradient-1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-2 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.gradient-3 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.gradient-4 {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.gradient-5 {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.gradient-6 {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.gradient-7 {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.gradient-8 {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

/* Анимированные градиенты */
.animated-gradient {
    background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #f5576c, #4facfe, #00f2fe);
    background-size: 600% 600%;
    animation: gradient-animation 8s ease infinite;
}

@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

/* Стеклянный эффект */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.glass-dark {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Неоновые эффекты */
.neon-blue {
    color: #00ffff;
    text-shadow: 
        0 0 5px #00ffff,
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 0 40px #00ffff;
}

.neon-pink {
    color: #ff006e;
    text-shadow: 
        0 0 5px #ff006e,
        0 0 10px #ff006e,
        0 0 20px #ff006e,
        0 0 40px #ff006e;
}

.neon-green {
    color: #39ff14;
    text-shadow: 
        0 0 5px #39ff14,
        0 0 10px #39ff14,
        0 0 20px #39ff14,
        0 0 40px #39ff14;
}

/* Голографический эффект */
.holographic {
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
    background-size: 200% 200%;
    animation: holographic-shine 3s linear infinite;
    position: relative;
}

.holographic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0, #ff0080);
    opacity: 0.3;
    z-index: -1;
    filter: blur(5px);
}

@keyframes holographic-shine {
    0% { background-position: -200% -200%; }
    100% { background-position: 200% 200%; }
}

/* Эффект огня */
.fire-effect {
    position: relative;
    overflow: hidden;
}

.fire-effect::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #ff4757, #ff6b7a, #ff8c94, #ffaaa5, #ff6b7a, #ff4757);
    background-size: 200% 200%;
    animation: fire-flicker 2s ease-in-out infinite;
}

@keyframes fire-flicker {
    0%, 100% { 
        background-position: 0% 50%; 
        transform: scaleY(1);
    }
    50% { 
        background-position: 100% 50%; 
        transform: scaleY(1.5);
    }
}

/* Эффект воды */
.water-effect {
    position: relative;
    overflow: hidden;
}

.water-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(135, 206, 235, 0.3), transparent);
    animation: water-flow 3s ease-in-out infinite;
}

@keyframes water-flow {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Пульсирующий эффект */
.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
    from {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
    }
    to {
        box-shadow: 0 0 40px rgba(102, 126, 234, 0.8), 0 0 60px rgba(102, 126, 234, 0.4);
    }
}

/* Эффект электричества */
.electric-border {
    position: relative;
    border: 2px solid transparent;
}

.electric-border::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00, #00ffff);
    z-index: -1;
    border-radius: inherit;
    background-size: 400% 400%;
    animation: electric-flow 4s ease infinite;
}

@keyframes electric-flow {
    0%, 100% { background-position: 0% 0%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

/* Матричный эффект */
.matrix-bg {
    background-color: #000;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    position: relative;
    overflow: hidden;
}

.matrix-bg::before {
    content: '1010101010101010101010101010101010101010101010101010101010101010';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: rgba(0, 255, 0, 0.1);
    font-size: 12px;
    line-height: 1;
    word-break: break-all;
    animation: matrix-scroll 10s linear infinite;
    z-index: 0;
}

@keyframes matrix-scroll {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* Космический эффект */
.space-bg {
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    position: relative;
    overflow: hidden;
}

.space-bg::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        20px 10px white, 40px 30px white, 60px 15px white, 80px 25px white,
        100px 5px white, 120px 35px white, 140px 20px white, 160px 40px white,
        180px 8px white, 200px 28px white, 220px 18px white, 240px 38px white;
    animation: twinkle-stars 4s ease-in-out infinite alternate;
}

@keyframes twinkle-stars {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Ретро-волна эффект */
.retrowave {
    background: linear-gradient(to bottom, #ff00ff 0%, #00ffff 50%, #ffff00 100%);
    position: relative;
    overflow: hidden;
}

.retrowave::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: 
        linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.1) 50.5%, transparent 51%),
        linear-gradient(0deg, transparent 50%, rgba(255, 255, 255, 0.1) 50.5%, transparent 51%);
    background-size: 20px 20px;
    animation: retrowave-grid 2s linear infinite;
}

@keyframes retrowave-grid {
    0% { transform: translate(0, 0); }
    100% { transform: translate(20px, 20px); }
}

/* Эффект кибerpunk */
.cyberpunk {
    background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);
    color: #00ff00;
    border: 1px solid #00ff00;
    box-shadow: 
        inset 0 0 10px rgba(0, 255, 0, 0.2),
        0 0 20px rgba(0, 255, 0, 0.3);
    position: relative;
}

.cyberpunk::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ff00, transparent);
    animation: cyberpunk-scan 3s linear infinite;
}

@keyframes cyberpunk-scan {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Утилиты для смены тем */
.theme-light {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #212529;
    --text-secondary: #6c757d;
}

.theme-dark {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
}

.theme-neon {
    --bg-primary: #000000;
    --bg-secondary: #111111;
    --text-primary: #00ff00;
    --text-secondary: #00cc00;
}

.theme-ocean {
    --bg-primary: #001f3f;
    --bg-secondary: #003366;
    --text-primary: #ffffff;
    --text-secondary: #87ceeb;
}

.theme-sunset {
    --bg-primary: #ff6b35;
    --bg-secondary: #f7931e;
    --text-primary: #ffffff;
    --text-secondary: #fff8e1;
}

/* Адаптивные эффекты */
@media (max-width: 768px) {
    .holographic::before,
    .electric-border::before,
    .matrix-bg::before,
    .space-bg::before,
    .retrowave::before,
    .cyberpunk::before {
        display: none;
    }
    
    .neon-blue, .neon-pink, .neon-green, .neon-glow {
        text-shadow: 
            0 0 3px currentColor,
            0 0 6px currentColor;
    }
    
    .pulse-glow {
        animation: none;
        box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
    }
}

/* Печать - отключаем все эффекты */
@media print {
    .animated-gradient,
    .holographic,
    .fire-effect::after,
    .water-effect::before,
    .electric-border::before,
    .matrix-bg::before,
    .space-bg::before,
    .retrowave::before,
    .cyberpunk::before {
        display: none !important;
    }
    
    .glass-effect {
        background: white !important;
        backdrop-filter: none !important;
        border: 1px solid #ccc !important;
    }
    
    .neon-blue, .neon-pink, .neon-green, .neon-glow {
        color: #000 !important;
        text-shadow: none !important;
    }
}