* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Georgia', 'Times New Roman', serif;
    background: #000000;
    color: #e0e0e0;
    line-height: 1.8;
    min-height: 100vh;
    overflow-x: hidden;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 40px;
    min-height: 300vh; /* Make it scrollable */
}

.text-content {
    font-size: 38px;
    letter-spacing: 0.5px;
}

.text-content p {
    margin-bottom: 30px;
    text-align: justify;
}

/* Word span styling */
.word-span {
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center;
    line-height: 1.4;
    margin: 0 2px;
    vertical-align: baseline;
    cursor: pointer;
    position: relative;
    --intensity: 1;
}

.word-span:hover {
    transition: all 0.2s ease-out;
}

/* Умная цветовая палитра с мягкими оттенками */

/* Энергия и движение - теплые оранжево-красные тона */
.word-span.vibrant {
    color: #ff6b6b;
    text-shadow: 
        0 0 8px rgba(255, 107, 107, 0.4),
        0 0 16px rgba(255, 107, 107, 0.2),
        0 0 24px rgba(255, 107, 107, 0.1);
    filter: brightness(calc(1 + (var(--intensity) - 1) * 0.3));
}

/* Созидание и творчество - яркие пурпурно-розовые тона */
.word-span.creative {
    color: #a855f7;
    text-shadow: 
        0 0 8px rgba(168, 85, 247, 0.4),
        0 0 16px rgba(168, 85, 247, 0.2),
        0 0 24px rgba(168, 85, 247, 0.1);
    filter: brightness(calc(1 + (var(--intensity) - 1) * 0.3));
}

/* Сила и мощь - глубокие золотисто-янтарные тона */
.word-span.powerful {
    color: #f59e0b;
    text-shadow: 
        0 0 10px rgba(245, 158, 11, 0.5),
        0 0 20px rgba(245, 158, 11, 0.3),
        0 0 30px rgba(245, 158, 11, 0.15);
    filter: brightness(calc(1 + (var(--intensity) - 1) * 0.4));
}

/* Мудрость и глубина - спокойные сине-зеленые тона */
.word-span.wise {
    color: #06b6d4;
    text-shadow: 
        0 0 8px rgba(6, 182, 212, 0.4),
        0 0 16px rgba(6, 182, 212, 0.2),
        0 0 24px rgba(6, 182, 212, 0.1);
    filter: brightness(calc(1 + (var(--intensity) - 1) * 0.3));
}

/* Духовность и трансцендентность - мистические фиолетово-синие тона */
.word-span.spiritual {
    color: #8b5cf6;
    text-shadow: 
        0 0 12px rgba(139, 92, 246, 0.5),
        0 0 24px rgba(139, 92, 246, 0.3),
        0 0 36px rgba(139, 92, 246, 0.15);
    filter: brightness(calc(1 + (var(--intensity) - 1) * 0.4));
}

/* Радость и позитив - яркие желто-зеленые тона */
.word-span.joyful {
    color: #10b981;
    text-shadow: 
        0 0 8px rgba(16, 185, 129, 0.4),
        0 0 16px rgba(16, 185, 129, 0.2),
        0 0 24px rgba(16, 185, 129, 0.1);
    filter: brightness(calc(1 + (var(--intensity) - 1) * 0.3));
}

/* Тайна и глубина - темные индиго-фиолетовые тона */
.word-span.mysterious {
    color: #6366f1;
    text-shadow: 
        0 0 10px rgba(99, 102, 241, 0.5),
        0 0 20px rgba(99, 102, 241, 0.3),
        0 0 30px rgba(99, 102, 241, 0.15);
    filter: brightness(calc(1 + (var(--intensity) - 1) * 0.4));
}

/* Гармония и баланс - мягкие бирюзово-голубые тона */
.word-span.harmonious {
    color: #14b8a6;
    text-shadow: 
        0 0 8px rgba(20, 184, 166, 0.4),
        0 0 16px rgba(20, 184, 166, 0.2),
        0 0 24px rgba(20, 184, 166, 0.1);
    filter: brightness(calc(1 + (var(--intensity) - 1) * 0.3));
}

/* Преобразование и изменение - динамичные оранжево-розовые тона */
.word-span.transformative {
    color: #f97316;
    text-shadow: 
        0 0 10px rgba(249, 115, 22, 0.5),
        0 0 20px rgba(249, 115, 22, 0.3),
        0 0 30px rgba(249, 115, 22, 0.15);
    filter: brightness(calc(1 + (var(--intensity) - 1) * 0.4));
}

/* Связь и единство - теплые кораллово-персиковые тона */
.word-span.connected {
    color: #fb7185;
    text-shadow: 
        0 0 8px rgba(251, 113, 133, 0.4),
        0 0 16px rgba(251, 113, 133, 0.2),
        0 0 24px rgba(251, 113, 133, 0.1);
    filter: brightness(calc(1 + (var(--intensity) - 1) * 0.3));
}

/* Свобода и независимость - яркие голубо-бирюзовые тона */
.word-span.free {
    color: #22d3ee;
    text-shadow: 
        0 0 10px rgba(34, 211, 238, 0.5),
        0 0 20px rgba(34, 211, 238, 0.3),
        0 0 30px rgba(34, 211, 238, 0.15);
    filter: brightness(calc(1 + (var(--intensity) - 1) * 0.4));
}

/* Истина и реальность - чистые бело-серебристые тона */
.word-span.truthful {
    color: #e2e8f0;
    text-shadow: 
        0 0 8px rgba(226, 232, 240, 0.4),
        0 0 16px rgba(226, 232, 240, 0.2),
        0 0 24px rgba(226, 232, 240, 0.1);
    filter: brightness(calc(1 + (var(--intensity) - 1) * 0.3));
}

/* Нейтральные слова */
.word-span.neutral {
    color: #94a3b8;
    text-shadow: 0 0 4px rgba(148, 163, 184, 0.2);
}

/* Усиленное свечение для слов с несколькими категориями */
.word-span.multi-category {
    animation: multiGlow 3s ease-in-out infinite alternate;
    text-shadow: 
        0 0 15px currentColor,
        0 0 25px currentColor,
        0 0 35px currentColor;
}

/* Приоритет для JavaScript-установленных стилей волновой анимации */
.word-span[data-wave-active="true"] {
    animation: none !important;
}

.word-span[data-wave-active="true"].multi-category {
    animation: none !important;
}

@keyframes multiGlow {
    0% {
        text-shadow: 
            0 0 15px currentColor,
            0 0 25px currentColor,
            0 0 35px currentColor;
        transform: scale(1);
    }
    100% {
        text-shadow: 
            0 0 20px currentColor,
            0 0 35px currentColor,
            0 0 50px currentColor;
        transform: scale(1.03);
    }
}

/* Специальные комбинации категорий с уникальными эффектами */
.word-span.powerful.vibrant {
    text-shadow: 
        0 0 20px rgba(245, 158, 11, 0.8),
        0 0 35px rgba(255, 107, 107, 0.6),
        0 0 50px rgba(245, 158, 11, 0.4);
    animation: powerVibrant 2.5s ease-in-out infinite alternate;
}

@keyframes powerVibrant {
    0% {
        filter: brightness(1.2) saturate(1.3);
    }
    100% {
        filter: brightness(1.5) saturate(1.8);
    }
}

.word-span.spiritual.mysterious {
    text-shadow: 
        0 0 25px rgba(139, 92, 246, 0.9),
        0 0 40px rgba(99, 102, 241, 0.7),
        0 0 60px rgba(139, 92, 246, 0.5);
    animation: spiritualMystery 3s ease-in-out infinite alternate;
}

@keyframes spiritualMystery {
    0% {
        filter: brightness(1.1) hue-rotate(0deg);
    }
    100% {
        filter: brightness(1.4) hue-rotate(10deg);
    }
}

.word-span.joyful.creative {
    text-shadow: 
        0 0 20px rgba(16, 185, 129, 0.8),
        0 0 35px rgba(168, 85, 247, 0.6),
        0 0 50px rgba(16, 185, 129, 0.4);
    animation: joyfulCreative 2.8s ease-in-out infinite alternate;
}

@keyframes joyfulCreative {
    0% {
        filter: brightness(1.2) saturate(1.4);
    }
    100% {
        filter: brightness(1.6) saturate(1.9);
    }
}

.word-span.wise.transformative {
    text-shadow: 
        0 0 22px rgba(6, 182, 212, 0.9),
        0 0 38px rgba(249, 115, 22, 0.7),
        0 0 55px rgba(6, 182, 212, 0.5);
    animation: wiseTransform 3.2s ease-in-out infinite alternate;
}

@keyframes wiseTransform {
    0% {
        filter: brightness(1.1) contrast(1.1);
    }
    100% {
        filter: brightness(1.5) contrast(1.3);
    }
}

/* Пульсирующий эффект для особо важных комбинаций */
.word-span.powerful.spiritual.multi-category,
.word-span.creative.transformative.multi-category {
    animation: 
        powerPulse 2s ease-in-out infinite alternate,
        multiGlow 3s ease-in-out infinite alternate;
}

@keyframes powerPulse {
    0% {
        filter: brightness(1.2) saturate(1.4);
    }
    100% {
        filter: brightness(1.6) saturate(2.0);
    }
}

/* Интерактивные эффекты */
.word-span.highlighted {
    text-shadow: 
        0 0 25px currentColor,
        0 0 40px currentColor,
        0 0 60px currentColor;
    transform: scale(1.4);
    font-weight: 600;
    z-index: 10;
    position: relative;
}

.word-span.dimmed {
    opacity: 0.25;
    transform: scale(0.8);
    filter: grayscale(0.8);
}

/* Responsive design */
@media (max-width: 768px) {
    .container {
        padding: 40px 20px;
    }
    
    .text-content {
        font-size: 28px;
    }
    
    .word-span.highlighted {
        transform: scale(1.3);
    }
    
    .word-span.dimmed {
        transform: scale(0.85);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 30px 15px;
    }
    
    .text-content {
        font-size: 22px;
    }
    
    .word-span.highlighted {
        transform: scale(1.2);
    }
    
    .word-span.dimmed {
        transform: scale(0.9);
    }
}