.pos-rel { position: relative; }
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Чтобы оверлей не мешал кликать по кнопкам под ним */
    z-index: var(--z-overlay);
}
.overlay_page { z-index: var(--z-back) !important; }
.overlay_bg { z-index: var(--z-overlay-bg) !important; }
.overlay_element { z-index: var(--z-overlay); }

.overlay-txt-liner {
    background-color: var(--green-dark);
    backdrop-filter: blur(5px);
}
.overlay--rays-hard {
    /* 1. Убираем жесткий var(--bg-darker), оставляем только градиенты */
    background: 
        radial-gradient(
            circle at 50% 50%, 
            color-mix(in srgb, var(--catalog-accent), transparent 50%) 0%, 
            transparent 65%
        ),
        repeating-conic-gradient(
            from 0deg, 
            transparent 0deg 15deg, 
            /* Делаем лучи очень бледными, чтобы они не кричали */
            color-mix(in srgb, var(--catalog-accent), transparent 93%) 15deg 30deg
        );

    /* 2. Магия арт-деко: мягко вплавляем цвет каталога в ваш темный фон сайта */
    mix-blend-mode: screen; 
    
    /* 3. Золотая или серебряная тонкая кайма сверху */
    border-top: 1px solid color-mix(in srgb, var(--silver-main), transparent 80%);
}

.overlay--rays-artdeco {
    background: 
        /* Центральный световой блик под товарами */
        radial-gradient(
            circle at 50% 50%, 
            color-mix(in srgb, var(--catalog-accent), transparent 40%) 0%, 
            transparent 60%
        ),
        /* Тонкие, частые лучи эпохи джаза */
        repeating-conic-gradient(
            from 0deg, 
            transparent 0deg 10deg, 
            color-mix(in srgb, var(--catalog-accent), transparent 94%) 10deg 20deg
        );
    mix-blend-mode: screen;
}
.overlay--rays-grouped {
    background: 
        radial-gradient(
            circle at 50% 50%, 
            color-mix(in srgb, var(--catalog-accent), transparent 30%) 0%, 
            transparent 65%
        ),
        /* Чередование широких и узких световых секторов */
        repeating-conic-gradient(
            from 0deg at 50% 50%, 
            transparent 0deg 20deg, 
            color-mix(in srgb, var(--catalog-accent), transparent 93%) 20deg 25deg,
            transparent 25deg 40deg,
            color-mix(in srgb, var(--catalog-accent), transparent 90%) 40deg 42deg
        );
    mix-blend-mode: screen;
}
.overlay--concentric-target {
    background: 
        /* 1. Верхний слой: Жесткие кольца с шагом 30px */
        repeating-radial-gradient(
            circle at 50% 50%, 
            color-mix(in srgb, var(--catalog-accent), transparent 85%) 0px, 
            color-mix(in srgb, var(--catalog-accent), transparent 85%) 3px, 
            transparent 3px, 
            transparent 30px
        ),
        /* 2. Нижний слой: Световой подложке уменьшаем интенсивность */
        radial-gradient(
            circle at 50% 50%, 
            color-mix(in srgb, var(--catalog-accent), transparent 50%) 0%, 
            transparent 60%
        );
    mix-blend-mode: plus-lighter;
}
.overlay--vortex-focus {
    background: 
        /* 1. Верхний слой: Плавный закрученный веерный градиент */
        conic-gradient(
            from 0deg at 50% 50%,
            transparent 0%,
            color-mix(in srgb, var(--catalog-accent), transparent 85%) 25%,
            transparent 50%,
            color-mix(in srgb, var(--catalog-accent), transparent 85%) 75%,
            transparent 100%
        ),
        /* 2. Средний слой: Частые мягкие лучи для создания текстуры */
        repeating-conic-gradient(
            from 15deg at 50% 50%,
            transparent 0deg 5deg,
            color-mix(in srgb, var(--catalog-accent), transparent 94%) 5deg 10deg,
            transparent 10deg 20deg
        ),
        /* 3. Нижний слой: Радиальная маска, которая гасит лучи к краям и оставляет фокус в центре */
        radial-gradient(
            circle at 50% 50%, 
            color-mix(in srgb, var(--catalog-accent), transparent 40%) 0%, 
            transparent 55%
        );
    mix-blend-mode: plus-lighter;
}

.card-sunburst {
  background: 
    /* Центральный контрастный ромб */
    linear-gradient(135deg, #7a5c11 25%, transparent 25%) 50% 50% / 60px 60px no-repeat,
    linear-gradient(225deg, #7a5c11 25%, transparent 25%) 50% 50% / 60px 60px no-repeat,
    linear-gradient(45deg, #d4af37 25%, transparent 25%) 50% 50% / 60px 60px no-repeat,
    linear-gradient(315deg, #d4af37 25%, transparent 25%) 50% 50% / 60px 60px no-repeat,
    /* Зацикленные контрастные лучи от центра */
    repeating-conic-gradient(from 0deg at 50% 50%, #111 0deg 10deg, #d4af37 10deg 12deg, #111 12deg 22deg);
}
.card-ziggurat {
  background: radial-gradient(
    /* От центра к краям ступенями */
    circle at 50% 50%,
    #111 0% 30%,
    #d4af37 30% 33%,
    #1a1a1a 33% 50%,
    #d4af37 50% 53%,
    #222 53% 70%,
    #d4af37 70% 73%,
    #111 73% 100%
  );
}
.card-keyhole {
  background: 
    radial-gradient(circle at 50% 50%, #fff 0%, #d4af37 15%, transparent 16%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0%, transparent 20px, #d4af37 21px, #d4af37 23px, transparent 24px),
    radial-gradient(circle at 50% 50%, #222 0%, #050505 100%);
}
.card-flare {
  background: 
    /* Мягкая золотая вспышка в центре */
    radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.8) 0%, rgba(212, 175, 55, 0.2) 30%, transparent 70%),
    /* Тонкая сетка лучей */
    repeating-conic-gradient(from 0deg at 50% 50%, #111 0deg 5deg, #333 5deg 6deg, #111 6deg 10deg);
}
.card-deco-mandala {
  background: 
    /* Слой 1: Центральная ромбовидная маска */
    linear-gradient(135deg, rgba(212,175,55,0.3) 25%, transparent 25%) 50% 50% / 80px 80px,
    linear-gradient(225deg, rgba(212,175,55,0.3) 25%, transparent 25%) 50% 50% / 80px 80px,
    /* Слой 2: Тонкие концентрические кольца-мишени */
    repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 15px, rgba(212,175,55,0.4) 16px, rgba(212,175,55,0.4) 18px),
    /* Слой 3: Мягкие контрастные лучи из центра */
    repeating-conic-gradient(from 0deg at 50% 50%, #0d0d0d 0deg 15deg, #2a220f 15deg 30deg);
  
  /* Магия смешивания слоев */
  background-blend-mode: overlay, normal, normal;
  background-color: #111;
}
.card-deco-portal {
  background: 
    /* Слой 1: Световой прожектор, бьющий из центра */
    radial-gradient(circle at 50% 50%, #fff 0%, #d4af37 20%, #4a3707 50%, #000 80%),
    /* Слой 2: Геометрические лучи шестеренки */
    repeating-conic-gradient(from 0deg at 50% 50%, #fff 0deg 5deg, transparent 5deg 15deg, #000 15deg 20deg);
  
  background-blend-mode: screen;
  background-color: #0a0a0a;
}

.overlay--footer-dark {
    display: flex;
    visibility: hidden;
    position: fixed;
    opacity: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.8);
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: -1;
}

.overlay--footer-dark.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.overlay-footer-extra {
    background: var(--gradient-green-footer-extra);
     z-index: -1;
}
.overlay-faq-question {
    background: var(--gradient-faq);
    z-index: -1;
}
.overlay-faq-answer {
    background-color: var(--bg-card, var(--bg-darker));
    
    /* Градиент: Слева направо (черный -> прозрачный -> черный) */
    background-image: linear-gradient(
        to right, 
        rgba(0, 0, 0, 0.4) 0%, 
        transparent 15%, 
        transparent 85%, 
        rgba(0, 0, 0, 0.4) 100%
    );
}
.content-overlay--faded {
    inset: 0;
    z-index: -1;
    
    --overlay-color: var(--bg-card, var(--silver-dark));
    --overlay-color-tr-min: color-mix(in srgb, var(--overlay-color), transparent 25%);
    --overlay-color-tr-max: color-mix(in srgb, var(--overlay-color), transparent 50%);

    background: linear-gradient(
        to left,
        var(--overlay-color-tr-max) 0%,
        var(--overlay-color-tr-min) 20%,
        var(--overlay-color) 40%,
        var(--overlay-color) 60%,
        var(--overlay-color-tr-min) 80%,
        var(--overlay-color-tr-max) 100%
    );
}



.overlay--lines {
    background: repeating-linear-gradient(90deg, transparent, transparent 40px, color-mix(in srgb, var(--gold-base), transparent 80%) 41px, transparent 42px);
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}
.overlay--lines-rich {
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 40px,
        rgba(255, 255, 255, 0.05) 41px, /* Светлая сторона линии */
        rgba(0, 0, 0, 0.2) 42px,       /* Тень линии */
        transparent 43px
    );
}


.overlay--dimmed {
    background-color: var(--overlay-bg, rgba(0, 0, 0, 0.5));
    backdrop-filter: blur(var(--overlay-blur, 0px));
}

.overlay--noir {
    backdrop-filter: contrast(1.2) brightness(0.8) grayscale(var(--noir-grayscale, 0.5));
    background: radial-gradient(
        circle, 
        transparent 20%, 
        rgba(0, 0, 0, var(--noir-shadow, 0.4)) 100%
    );
}


.overlay--vignette-simple-plus {
    --vignette-opacity-min: 0;
    --vignette-opacity-max: 1;
    --color: var(--c, var(--green-dark));
    --color_tp: color-mix(in srgb, var(--color), transparent var(--transparency, 0%));
    background: radial-gradient(circle, transparent 30%, var(--color_tp) 100%);
    animation: vignette-custom-breathe 6s ease-in-out infinite alternate;
    will-change: opacity;
}



.overlay--vignette-simple {
    background: radial-gradient(circle, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
}
.overlay--vignette-hor {
    --black: color-mix(in srgb, var(--v-color, black), transparent var(--transparency, 75%));
    background: linear-gradient(to right, var(--black) 0%, transparent var(--step-1, 30%), transparent var(--step-2, 70%), var(--black) 100%);

}
.overlay--vignette-rad {
    --black: color-mix(in srgb, var(--v-color, black), transparent var(--transparency, 75%));
    background: radial-gradient(ellipse, var(--black) 0%, transparent var(--step-1, 25%), transparent var(--step-2, 75%), var(--black) 100%);

}


.overlay--vignette-noir-color {
    backdrop-filter: contrast(1.2) brightness(0.8) grayscale(var(--noir-grayscale, 0.5));
    background: radial-gradient(
        circle, 
        transparent 20%, 
        color-mix(in srgb, var(--color, black), transparent 25%) 100%
    );
}
.overlay--dark-simple {

    box-shadow: inset 0 0 40px -15px rgba(0, 0, 0, 0.8);
}

.overlay--golden-glow {
    /* Смешиваем сепию и теплое тонирование */
    backdrop-filter: sepia(0.3) saturate(1.2) blur(var(--glow-softness, 0.5px));
    background-color: rgba(212, 175, 55, 0.1);
    mix-blend-mode: soft-light;
}
.overlay--dramatic-light {
    --light-color: rgba(255, 255, 255, 0.2);
    --dark-color: rgba(0, 0, 0, 0.7);
    background: linear-gradient(
        to top, 
        var(--dark-color) 0%, 
        transparent 50%, 
        var(--light-color) 100%
    );
    mix-blend-mode: multiply;
}
.overlay--frosted {
    --frost-blur: 8px;
    --frost-opacity: 0.3;
    backdrop-filter: blur(var(--frost-blur)) saturate(1.5);
    background: rgba(255, 255, 255, var(--frost-opacity));
    /* Добавляем зернистость для реализма стекла */
    mask-image: radial-gradient(circle, black, transparent); 

}
.overlay--diffusion {
    backdrop-filter: brightness(1.1) blur(2px);
    mix-blend-mode: overlay;
}


/*#region Complex Overlays */

.overlay--shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    overflow: hidden;
    border-radius: inherit;

    /* Модульные настройки системы */
    --shimmer-duration: 6s;
    --shimmer-width: 55%; /* Ширина самого луча */
    --shimmer-deg: 135deg; /* Угол наклона */
    --shimmer-color: var(--shimmer-gold-dbd-soft);
}
.overlay--shimmer::before {
    content: '';
    position: absolute;
    
    /* 1. Делаем огромный квадрат по центру карточки */
    top: -100%;
    bottom: -100%;
    left: 50%;
    transform-origin: center center;
    width: var(--shimmer-width);
    background: var(--shimmer-color);

    will-change: transform;
    
}
.overlay--shimmer-active { animation: shine-with-pause var(--shimmer-duration) infinite linear; }

@keyframes shine {
    0% {
        /* СНАЧАЛА выносим элемент далеко влево за пределы карточки (-150%) */
        /* ЗАТЕМ применяем наклон. Для угла 135deg скос (skewX) составит -45deg */
        transform: translateX(-150%) skewX(calc(90deg - var(--shimmer-deg)));
    }
    100% {
        /* Проносим строго горизонтально вправо за пределы карточки (+250%) */
        /* Наклон остается неизменным на всем пути */
        transform: translateX(250%) skewX(calc(90deg - var(--shimmer-deg)));
    }
}
@keyframes shine-with-pause {
    0% {
        transform: translateX(-150%) skewX(calc(90deg - var(--shimmer-deg)));
    }
    33.33% {
        transform: translateX(250%) skewX(calc(90deg - var(--shimmer-deg)));
    }
    100% {
        transform: translateX(250%) skewX(calc(90deg - var(--shimmer-deg)));
    }
}


.overlay--vignette-custom {
    border-radius: inherit;
    overflow: hidden;

    --vignette-color: var(--green-dark); 
    --vignette-tint-color: black;
    --vignette-duration: 4s;             /* Скорость одного "вдоха" */
    --vignette-center-size: 20%;         /* Размер прозрачного окна в центре карточки */
    --vignette-edge-size: 110%;          /* Насколько далеко за края уходит градиент */
    
    --vignette-opacity-min: 0.2;         /* Прозрачность на выдохе */
    --vignette-opacity-max: 0.5;         /* Прозрачность на вдохе */
    --vignette-blend-mode: multiply;
  
    background: radial-gradient(
        ellipse, 
        var(--vignette-tint-color) var(--vignette-center-size),
        color-mix(in srgb, var(--vignette-color), var(--vignette-tint-color)) var(--vignette-edge-size)
    );

    will-change: opacity;
    mix-blend-mode: var(--vignette-blend-mode);
}
.overlay--vignette-active { animation: vignette-custom-breathe var(--vignette-duration) ease-in-out infinite alternate; }

@keyframes vignette-custom-breathe {
    0% {
        opacity: var(--vignette-opacity-min);
    }
    100% {
        opacity: var(--vignette-opacity-max);
    }
}

.overlay--aurora {
    position: absolute; /* Убедитесь, что позиционирование задано */
    inset: 0;           /* Растягиваем на всю родительскую карточку */
    border-radius: inherit;
    overflow: hidden;

    /* --- ПОЛНЫЙ НАБОР ПЕРЕМЕННЫХ ДЛЯ JSON --- */
    --aurora-color-1: var(--gold-dark);
    --aurora-color-2: var(--gold-base);
    --aurora-color-3: rgba(255, 255, 255, 0.3);
    
    --aurora-speed: 12s;
    --aurora-opacity: 0.6;
    --aurora-scale: 250%;           /* Увеличили масштаб, чтобы компенсировать размытие краев */
    
    /* Новые регулировочные параметры */
    --aurora-direction: normal;     /* normal или reverse */
    --aurora-pulse: 1.15;           /* степень искажения (от 1.01 до 1.30) */
    --aurora-blend: screen;         /* режим наложения цвета */

    opacity: var(--aurora-opacity); 
    mix-blend-mode: var(--aurora-blend);
    
    isolation: isolate; 
}

.overlay--aurora::before {
    content: '';
    position: absolute;
    /* Центрируем увеличенный элемент относительно карточки */
    top: 50%; left: 50%;
    width: var(--aurora-scale);
    height: var(--aurora-scale);
    transform: translate(-50%, -50%);
    
    /* Уменьшили радиус пятен (с 50% до 40%), чтобы они не упирались в края */
    background: radial-gradient(circle at 25% 30%, var(--aurora-color-1) 0%, transparent 40%),
                radial-gradient(circle at 75% 70%, var(--aurora-color-2) 0%, transparent 40%),
                radial-gradient(circle at 50% 50%, var(--aurora-color-3) 0%, transparent 35%);
    
    transform-origin: center center;
    
    /* КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ: Размываем края градиентов */
    filter: blur(60px);
    
    /* ДОПОЛНИТЕЛЬНАЯ КРАЕВАЯ МАСКА: гарантирует нулевую прозрачность на границах */
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
    
    will-change: transform, filter;
}

/* Изменили анимацию: теперь translate(-50%, -50%) сохраняется при вращении */
.overlay--aurora-active::before { 
    animation: aurora-liquid var(--aurora-speed) infinite linear var(--aurora-direction); 
}

@keyframes aurora-liquid {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg) scale(var(--aurora-pulse));
        /* Кардинально меняем форму углов в середине цикла */
        border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%;
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}


.overlay-color {
    --c-color: transparent;
    background: var(--c-color);
}

.overlay--color_grading {
    --fx-sat: 100%;
    --fx-gray: 0%;
    --fx-contrast: 100%;
    --fx-bright: 100%;
    --fx-sepia: 0%;
    --fx-hue: 0deg;

    --fx-duration: 6s;
    --fx-timing: ease-in-out;
    
    will-change: backdrop-filter;
    
    transition: backdrop-filter 0.5s ease; /* Для плавности */

    /* Сборка единого фильтра подложки */
    backdrop-filter: 
        saturate(var(--fx-sat))
        grayscale(var(--fx-gray))
        contrast(var(--fx-contrast))
        brightness(var(--fx-bright))
        sepia(var(--fx-sepia))
        hue-rotate(var(--fx-hue));
}

.overlay--color_grading-hue {
    animation: overlay-color-hue var(--fx-duration) infinite var(--fx-timing);
}
@keyframes overlay-color-hue {
    0%, 100% {
      backdrop-filter: 
        hue-rotate(var(--fx-hue));
  
    }
    50% {
      backdrop-filter: 
      hue-rotate(0deg);
    }
  }


.overlay--color_grading-breathe {
    animation: overlay-color-breathe var(--fx-duration) infinite var(--fx-timing);
}
@keyframes overlay-color-breathe {
  0%, 100% {
    --fx-gray: 100%;
    --fx-sat: 0%;
    --fx-contrast: 90%;
    backdrop-filter: 
        saturate(0%)
        grayscale(100%)
        contrast(90%);

  }
  50% {
    backdrop-filter: 
        saturate(160%)
        grayscale(0%)
        contrast(110%);
  }
}
.overlay--color_grading-flicker {
    animation: fx-vintage-flicker var(--fx-duration) infinite var(--fx-timing);
}
@keyframes fx-vintage-flicker {
  0%, 100% {
    --fx-bright: 100%;
    --fx-contrast: 100%;
    --fx-sepia: 30%;
  }
  10% { --fx-bright: 96%;  --fx-contrast: 105%; }
  20% { --fx-bright: 104%; --fx-contrast: 95%;  }
  30% { --fx-bright: 93%;  --fx-contrast: 110%; }
  40% { --fx-bright: 101%; --fx-contrast: 98%;  }
  50% { --fx-bright: 97%;  --fx-contrast: 103%; }
  60% { --fx-bright: 105%; --fx-contrast: 95%;  }
  70% { --fx-bright: 92%;  --fx-contrast: 108%; }
  80% { --fx-bright: 102%; --fx-contrast: 100%; }
  90% { --fx-bright: 95%;  --fx-contrast: 105%; }
}
.overlay--color_grading-daylight {
    animation: fx-ambient-daylight var(--fx-duration) infinite var(--fx-timing);
}
@keyframes fx-ambient-daylight {
  0%, 100% {
    /* Полдень: высокая яркость, естественные цвета */
    --fx-bright: 105%;
    --fx-sat: 110%;
    --fx-contrast: 105%;
    --fx-hue: 0deg;
  }
  50% {
    /* Ночь: приглушенные цвета, уход спектра в холодный синий */
    --fx-bright: 75%;
    --fx-sat: 60%;
    --fx-contrast: 90%;
    --fx-hue: 210deg; /* Сдвиг в синие тона */
  }
}
.overlay--color_grading-flow {
    animation: fx-dreamy-flow var(--fx-duration) infinite var(--fx-timing);
}
@keyframes fx-dreamy-flow {
  0% {
    --fx-hue: 0deg;
    --fx-sat: 120%;
  }
  50% {
    --fx-hue: 180deg; /* Картинка инвертирует свои цвета в противоположные */
    --fx-sat: 100%;
  }
  100% {
    --fx-hue: 360deg; /* Полный круг возвращает исходные цвета */
    --fx-sat: 120%;
  }
}
.overlay--color_grading-golden-glow {
    animation: fx-artdeco-golden-glow var(--fx-duration) infinite var(--fx-timing);
}
@keyframes fx-artdeco-golden-glow {
  0%, 100% {
    --fx-bright: 95%;
    --fx-contrast: 105%;
    --fx-sat: 90%;
    --fx-sepia: 15%; /* Легкий винтажный тон */
    backdrop-filter: 
        saturate(90%)
        sepia(15%)
        contrast(105%)
        brightness(95%);
  }
  50% {
    --fx-bright: 110%; /* Мягкое свечение */
    --fx-contrast: 125%; /* Глубокие тени */
    --fx-sat: 120%;      /* Золотые оттенки становятся сочнее */
    --fx-sepia: 35%;     /* Усиливаем золотистый подтон */
    backdrop-filter: 
        saturate(120%)
        sepia(35%)
        contrast(125%)
        brightness(110%);
  }
}
.overlay--color_grading-noir {
    animation: fx-artdeco-noir-velvet var(--fx-duration) infinite var(--fx-timing);
}
@keyframes fx-artdeco-noir-velvet {
  0%, 100% {
    backdrop-filter: 
        saturate(100%)
        contrast(100%)
        brightness(100%);
  }
  50% {
    backdrop-filter: 
        saturate(70%)
        contrast(160%)
        brightness(50%);
  }
}
.overlay--color_grading-sparkle {
    animation: fx-artdeco-sparkle var(--fx-duration) infinite var(--fx-timing);
}
@keyframes fx-artdeco-sparkle {
  0%, 100% {
    --fx-bright: 100%;
    --fx-contrast: 100%;
  }
  48%, 52% {
    --fx-bright: 100%;
    --fx-contrast: 100%;
  }
  50% {
    --fx-bright: 125%;   /* Быстрый блик света */
    --fx-contrast: 115%;  /* Подчеркиваем грани */
  }
}
.overlay--color_grading-autochrome {
    animation: fx-artdeco-autochrome var(--fx-duration) infinite var(--fx-timing);
}
@keyframes fx-artdeco-autochrome {
  0%, 100% {
    --fx-hue: 0deg;
    --fx-sat: 100%;
    --fx-contrast: 100%;
  }
  50% {
    --fx-hue: -15deg;   /* Тонкие изменения: уводим красные тона в золото/бордо */
    --fx-sat: 85%;     /* Чуть матовые, пастельные цвета */
    --fx-contrast: 110%;
  }
}

.overlay--wave {
  /* НАСТРОЙКИ ГЕОМЕТРИИ И ЦВЕТА (управляемые через JSON) */
  --fx-wave-angle: 90deg;          /* Направление волны (90deg - горизонт, 135deg - диагональ) */
  --fx-wave-color-start: #141414;  /* Плотный цвет тени/блика */
  --fx-wave-color-mid: rgba(20, 20, 20, 0.4); /* Полутон */
  --fx-wave-color-end: transparent; /* Куда волна исчезает */
  
  /* Переменные для тонкой настройки фазы волны */
  --fx-wave-stop-1: 0%;
  --fx-wave-stop-2: 15%;
  --fx-wave-stop-3: 50%;
  --fx-wave-stop-4: 100%;
  

  /* НАСТРОЙКИ ДИНАМИКИ */
  --fx-wave-size-x: 200%;          /* Ширина полотна градиента */
  --fx-wave-size-y: 100%;          /* Высота полотна градиента */
  --fx-wave-pos-start: 0% 0%;      /* Исходное положение */
  --fx-wave-pos-end: 30% 0%;       /* Крайняя точка движения */
  --fx-wave-duration: 8s;
  --fx-wave-timing: ease-in-out;

  will-change: background-position;

  /* Сборка градиента на основе переменных */
  background: linear-gradient(
    var(--fx-wave-angle), 
    var(--fx-wave-color-start) 0%, 
    var(--fx-wave-color-start) var(--fx-wave-stop-1), 
    var(--fx-wave-color-mid) var(--fx-wave-stop-2), 
    var(--fx-wave-color-end) var(--fx-wave-stop-3)
  );
  background-size: var(--fx-wave-size-x) var(--fx-wave-size-y);
}

/* Модификатор запуска анимации */
.overlay--wave-active {
  animation: fx-wave-move var(--fx-wave-duration) infinite var(--fx-wave-timing);
}

/* Анимация двигает только позицию фона */
@keyframes fx-wave-move {
  0%, 100% {
    background-position: var(--fx-wave-pos-start);
  }
  50% {
    background-position: var(--fx-wave-pos-end);
  }
}
/*#endregion */

/*#region Cut Forms */
.overlay--cut-diamond {
    clip-rule: evenodd; 
    clip-path: polygon(evenodd,
        /* 1. Внешний контур (заливка оверлея) */
        0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 
        25% 0%,
        75% 0%,
        100% 25%,
        100% 75%,
        75% 100%,
        25% 100%,
        0% 75%, 0% 25%, 25% 0%
    );
}
div.overlay--cut-diamond:not(.pattern) {
    background: var(--bg-color, var(--silver-base));
}

.overlay--cut-sights {
    clip-path: polygon(evenodd, 
        0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 
        35% 25%, 65% 25%, 75% 35%, 75% 65%, 65% 75%, 35% 75%, 25% 65%, 25% 35%, 35% 25%
    );
}
div.overlay--cut-sights:not(.pattern) {
    background: var(--bg-color, var(--silver-base));
}

.overlay--cut-slash {
    clip-path: polygon(evenodd, 
        0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 
        10% 0%, 100% 0%, 80% 100%, 0% 100%, 20% 0%
    );
  
}
div.overlay--cut-slash:not(.pattern) {
    background: var(--bg-color, var(--silver-base));
}

/*#endregion */