:root {
    /* Основные цвета */
    --color-background: #2A3B4C;          /* Глубокий синий, как небо в сумерках */
    --color-text: #E8E6DA;                /* Светлый цвет слоновой кости для текста */
    --color-heading: #A5CAD2;             /* Бледно-голубой для заголовков */
    --color-link-hover: rgba(188, 227, 232, 0.8); /* Светло-голубой при наведении */

    /* Акцентные цвета */
    --color-accent-1: #6A8EAE;           /* Сине-стальной, как утреннее небо */
    --color-accent-2: #314455;           /* Тёмно-синий, как далёкие горы */
    --color-accent-3: #C7B7A5;           /* Песочно-бежевый, как древние камни */

    /* Фоновые цвета */
    --color-background-dark: #1C2A3A;    /* Тёмно-синий фон */
    --color-background-darker: #141F2A;  /* Ещё более тёмный синий */
    --color-background-light: rgba(165, 202, 210, 0.15); /* Полупрозрачный голубой */
    --color-background-lighter: rgba(199, 183, 165, 0.2); /* Полупрозрачный песочный */

    /* Цвета контролов */
    --color-control: #1C2A3A;            /* Тёмно-синий для контролов */
    --color-control-border: #A5CAD2;     /* Бледно-голубая граница */

    /* Цвета кнопок */
    --color-button: #A5CAD2;             /* Бледно-голубые кнопки */
    --color-button-hover: #8BB0BD;       /* Более тёмный голубой при наведении */
    --color-button-gradient-start: #A5CAD2; /* Начало градиента - бледно-голубой */
    --color-button-gradient-end: #6A8EAE;   /* Конец градиента - сине-стальной */

    /* Модальное окно */
    --color-modal-background: #E8E6DA;   /* Фон модального окна цвета слоновой кости */
    --color-modal-text: #2A3B4C;         /* Тёмно-синий текст в модальном окне */
    --color-modal-circle: #6A8EAE;       /* Сине-стальной круг в модальном окне */
}
/* Эффект мерцающих звезд на фоне */
.header::after, .footer-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(white 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.1;
    animation: twinkle 4s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.05; }
    50% { opacity: 0.2; }
}

/* Стилизация прокрутки как древний свиток */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-background-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--color-accent-3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-1);
}

/* Эффект ауры вокруг изображений */
.img-col, .img-wrapper {
    position: relative;
}

.img-col::before, .img-wrapper::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 15px;
    background: linear-gradient(45deg, var(--color-accent-3), transparent, var(--color-accent-1), transparent);
    z-index: -1;
    opacity: 0.3;
    filter: blur(5px);
}

/* Эффект развевающегося на ветру баннера */
.header-cont {
    position: relative;
    overflow: hidden;
}

.header-cont::before {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="wave"><feTurbulence baseFrequency="0.01 0.01" numOctaves="2" seed="5" /></filter><rect width="100" height="100" filter="url(%23wave)" opacity="0.03" /></svg>');
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Добавление эффекта инкрустированного орнамента */
.experience-item, .contact-wrapper, .slot-machine {
    position: relative;
}

.experience-item::after, .contact-wrapper::after, .slot-machine::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(214, 186, 140, 0.05) 10px, rgba(214, 186, 140, 0.05) 11px),
        repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(214, 186, 140, 0.05) 10px, rgba(214, 186, 140, 0.05) 11px);
    pointer-events: none;
}

/* Эффект тени и объемности для контейнеров */
.experience-wrapper, .col-wrapper, .controls {
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
}

/* Эффект свечения при фокусе на элементах */
input:focus, button:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-accent-3), 0 0 10px var(--color-accent-3);
}

/* Эффект "циклона" для кнопки spin */
button.spin {
    overflow: hidden;
    position: relative;
}

button.spin::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: conic-gradient(transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

button.spin:hover::before {
    opacity: 1;
}

/* Эффект "энергия ветра" для кнопок */
.main-button, button.spin {
    position: relative;
    overflow: hidden;
}

.main-button::before, button.spin::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--color-accent-1) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0.1);
    transition: transform 0.5s ease, opacity 0.5s ease;
    z-index: -1;
}

.main-button:hover::before, button.spin:hover::before {
    opacity: 0.2;
    transform: scale(1);
}
```## Цветовая палитра для сайта "Храм богини ветра на вершине вздыбленных скал"

```css
:root {
    /* Основные цвета */
    --color-background: #1C2B3A;          /* Тёмное грозовое небо */
    --color-text: #E8E6DA;                /* Светлый цвет слоновой кости для текста */
    --color-heading: #A5D6E5;             /* Цвет неба на рассвете для заголовков */
    --color-link-hover: rgba(188, 227, 232, 0.8); /* Светло-голубой при наведении */

    /* Акцентные цвета */
    --color-accent-1: #607D8B;           /* Сине-стальной, как небо в бурю */
    --color-accent-2: #2D4356;           /* Тёмно-синий, как далёкие горы */
    --color-accent-3: #D6BA8C;           /* Песочный, как древний камень храма */

    /* Фоновые цвета */
    --color-background-dark: #13202E;    /* Тёмно-синий фон как ночное небо */
    --color-background-darker: #0E1921;  /* Глубокий тёмно-синий как бескрайняя бездна */
    --color-background-light: rgba(165, 214, 229, 0.15); /* Полупрозрачный голубой как утренний туман */
    --color-background-lighter: rgba(214, 186, 140, 0.2); /* Полупрозрачный песочный как пыль в луче света */

    /* Цвета контролов */
    --color-control: #13202E;            /* Тёмно-синий для контролов */
    --color-control-border: #D6BA8C;     /* Песочная граница - как резьба на камне */

    /* Цвета кнопок */
    --color-button: #A5D6E5;             /* Голубые кнопки как небесные символы */
    --color-button-hover: #8BB0BD;       /* Более тёмный голубой при наведении */
    --color-button-gradient-start: #A5D6E5; /* Начало градиента - светлое небо */
    --color-button-gradient-end: #607D8B;   /* Конец градиента - сталь и буря */

    /* Модальное окно */
    --color-modal-background: #E8E6DA;   /* Фон модального окна цвета слоновой кости как свиток */
    --color-modal-text: #1C2B3A;         /* Тёмно-синий текст */
    --color-modal-circle: #D6BA8C;       /* Песочный круг как древняя печать */
}

/* Дополнительные эффекты для заголовков */
h1, h2, h3, h4 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
}

/* Специальный эффект для основного заголовка */
h1 {
    font-family: "Montserrat", sans-serif;
    letter-spacing: 3px;
    position: relative;
}

/* Создание светящегося ореола вокруг главного заголовка */
h1::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--color-accent-3) 0%, transparent 70%);
    filter: blur(15px);
    opacity: 0.3;
    z-index: -1;
}

/* Эффекты для кнопок с пульсацией при наведении */
.button, .main-button, button.spin {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
}

.button:hover, .main-button:hover, button.spin:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Атмосферный градиент для шапки с эффектом тумана */
.header {
    background: linear-gradient(135deg, var(--color-accent-1) 0%, var(--color-background-dark) 100%);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="3" seed="0"/><feDisplacementMap in="SourceGraphic" scale="120" /></filter><rect width="1200" height="600" filter="url(%23noise)" opacity="0.05" /></svg>');
    opacity: 0.5;
    mix-blend-mode: overlay;
}

/* Статичный фон без анимации */
body {
    background: linear-gradient(270deg, var(--color-background), var(--color-background-dark));
    background-size: 200% 200%;
}

/* Добавляем статичный "пыльный" эффект для элементов */
.experience-item::after, .contact-wrapper::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: -50px;
    left: 0;
    background: radial-gradient(circle, var(--color-accent-3) 0%, transparent 70%);
    filter: blur(30px);
    opacity: 0.05;
    pointer-events: none;
}

/* Эффект для изображений - сияние при наведении */
.img-col img, .img-wrapper img {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    filter: brightness(1.05) contrast(1.05);
    transition: all 0.5s ease;
    position: relative;
}

.img-col img:hover, .img-wrapper img:hover {
    transform: scale(1.02);
    filter: brightness(1.1) contrast(1.1);
}

.img-col img::after, .img-wrapper img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--color-accent-1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.img-col img:hover::after, .img-wrapper img:hover::after {
    opacity: 0.3;
}

/* Статичный эффект пыли (вместо анимированных частиц) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 100 100"><circle cx="10" cy="10" r="1" fill="%23FFFFFF" fill-opacity="0.3"/><circle cx="30" cy="40" r="0.5" fill="%23FFFFFF" fill-opacity="0.3"/><circle cx="70" cy="70" r="0.7" fill="%23FFFFFF" fill-opacity="0.3"/><circle cx="45" cy="30" r="0.4" fill="%23FFFFFF" fill-opacity="0.3"/><circle cx="90" cy="20" r="0.8" fill="%23FFFFFF" fill-opacity="0.3"/></svg>');
    opacity: 0.2;
}

/* Стилизация контейнеров как каменные блоки храма */
.experience-item, .contact-wrapper, .slot-machine {
    border-radius: 4px;
    border: 1px solid var(--color-background-light);
    background-color: var(--color-background-dark);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* Эффект древней каменной кладки для блоков */
.experience-item::before, .contact-wrapper::before, .slot-machine::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    opacity: 0.5;
}

/* Иллюзия факелов у заголовков (статичная) */
.experience-item h4, .contact-wrapper h3, h2 {
    position: relative;
}

.experience-item h4::before, .contact-wrapper h3::before, h2::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, var(--color-accent-3) 0%, transparent 70%);
    border-radius: 50%;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.2;
    filter: blur(5px);
    z-index: -1;
}

/* Эффект стильного свитка для меню */
.menu-items li a {
    position: relative;
    padding: 5px 0;
}

.menu-items li a::before {
    content: '❯';
    position: absolute;
    opacity: 0;
    left: -15px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateX(10px);
    color: var(--color-accent-3);
}

.menu-items li a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.menu-items li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--color-accent-3);
    transition: width 0.4s ease;
}

.menu-items li a:hover::after {
    width: 100%;
}

/* Стилизация кнопок как резные каменные элементы с эффектом свечения */
button.spin, .main-button {
    background: linear-gradient(to bottom, var(--color-button-gradient-start), var(--color-button-gradient-end));
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

button.spin::after, .main-button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

button.spin:hover::after, .main-button:hover::after {
    opacity: 1;
}

/* Статичный эффект потертостей для ощущения древности */
.experience-item, .contact-wrapper, .col {
    position: relative;
}

.experience-item::after, .contact-wrapper::after, .col::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="none" stroke="white" stroke-width="0.5" stroke-opacity="0.1" x="0" y="0" width="100" height="100"/></svg>');
    opacity: 0.1;
    pointer-events: none;
}