/*#region Side-lined Header */
.deco-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--deco-gap, var(--space-m)); /* Расстояние от текста до декора */
    width: 100%;
}

.deco-row--center-fade::before,
.deco-row--center-fade::after {
    background: linear-gradient(to right, transparent, var(--main-color, var(--silver-main)), transparent);
}

.deco-row::before,
.deco-row::after {
    content: "";
    flex: 1; /* Заставляем декор растягиваться на всю свободную ширину */
    height: var(--deco-height, 1px);
    background-repeat: no-repeat;
}
.deco-row::after {
    transform: scaleX(-1);
}

.deco-row--wings::before,
.deco-row--wings::after {
    --deco-height: 14px;
    background-image: 
        linear-gradient(to right, transparent, var(--main-color, var(--gold-base))),
        linear-gradient(to right, transparent, var(--main-color, var(--gold-base))),
        linear-gradient(to right, transparent, var(--main-color, var(--gold-base)));
    background-position: right top, right center, right bottom;
    background-size: 100% 2px, 80% 1px, 60% 1px;
}

.deco-row--fade-line::before,
.deco-row--fade-line::after {
    background: linear-gradient(to right, transparent, var(--main-color, var(--silver-base)));
}

.deco-row--bullet::before,
.deco-row--bullet::after {
    height: 6px;
    background: 
        /* Жирная точка в конце */
        radial-gradient(circle, var(--main-color, var(--silver-base)) 2px, transparent 2.5px) no-repeat right center / 6px 6px,
        /* Линия */
        linear-gradient(to left, var(--main-color, var(--silver-base)), transparent) no-repeat right 10px center / calc(100% - 12px) 1px;
}

.deco-row-right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--deco-gap, var(--space-m)); /* Расстояние от текста до декора */
    width: 100%;
}
.deco-row-right::after {
    content: "";
    flex: 1;
    height: var(--deco-height, 1px);
    background-repeat: no-repeat;
}
.deco-row-right--bullet::after {
    height: 6px;
    background: 
    radial-gradient(circle, var(--main-color, var(--gold-base)) 2px, transparent 2.5px) no-repeat right center / 6px 6px, 
    linear-gradient(to right, transparent, var(--main-color, var(--gold-base))) no-repeat left center / calc(100% - 10px) 1px;
}

.deco-row--dot::before,
.deco-row--dot::after {
    background: 
        radial-gradient(circle, var(--main-color, var(--silver-main)) 2px, transparent 3px) no-repeat right center / 10px 10px,
        linear-gradient(to right, transparent, var(--main-color, var(--silver-main))) no-repeat right center / calc(100% - 15px) 1px;
}


.deco-row--dot-line::before {
    content: "";
    flex: 0 0 10px;
    height: 10px;
    background-color: var(--main-color, silver);
    transform: rotate(45deg); /* Делаем ромбик */
}

.deco-row--dot-line::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--main-color, silver);
}

.deco-row--arrow::before {
    content: "";
    flex: 0 0 40px; /* Ширина элемента */
    height: 14px;
    background-color: var(--main-color, silver);
    /* Рисуем форму стрелки */
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);
}

.deco-row--arrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--main-color, silver), transparent);
}

.deco-row--bracket::before {
    content: "";
    flex: 0 0 15px;
    height: 30px;
    border-left: 2px solid var(--main-color, silver);
    border-top: 2px solid var(--main-color, silver);
    border-bottom: 2px solid var(--main-color, silver);
    border-radius: 8px 0 0 8px; /* Закругляем только левую сторону */
}

.deco-row--bracket::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--main-color, silver);
}

.deco-row--sunburst::before {
    content: "";
    flex: 0 0 50px;
    height: 30px;
    background: repeating-conic-gradient(
        from -45deg,
        var(--main-color, #D4AF37) 0deg 5deg,
        transparent 5deg 10deg
    );
    /* Обрезаем в форме веера */
    clip-path: ellipse(100% 100% at 50% 100%);
}

.deco-row--sunburst::after {
    content: "";
    flex: 1;
    height: 4px;
    /* Линия с «прорезью» посередине */
    background: linear-gradient(
        to bottom, 
        var(--main-color, #D4AF37) 1px, 
        transparent 1px 3px, 
        var(--main-color, #D4AF37) 3px
    );
}

.deco-row--luxury::before {
    content: "";
    flex: 0 0 60px;
    height: 16px;
    background: repeating-linear-gradient(
        to bottom,
        var(--main-color, #D4AF37),
        var(--main-color, #D4AF37) 2px,
        transparent 3px 6px
    );
}

.deco-row--luxury::after {
    content: "";
    flex: 1;
    height: 1px;
    /* Линия, которая начинается жирно и растворяется в точку */
    background: linear-gradient(to left, var(--main-color, var(--gold-main)), transparent);
}

.deco-row--deco-arrow::before {
    content: "";
    flex: 0 0 50px;
    height: 14px;
    /* Рисуем три линии: центральная длинная, крайние короче */
    background: 
        linear-gradient(var(--main-color, var(--gold-base)) 0 0) no-repeat right center / 100% 2px,
        linear-gradient(var(--main-color, var(--gold-base)) 0 0) no-repeat right top / 60% 2px,
        linear-gradient(var(--main-color, var(--gold-base)) 0 0) no-repeat right bottom / 60% 2px;
}

.deco-row--deco-arrow::after {
    content: "";
    flex: 1;
    height: 1px;
    /* Тонкая «растворяющаяся» нить в продолжение */
    background: linear-gradient(to left, var(--main-color, var(--gold-main)), transparent);
}

.deco-row--beam-arrow::before {
    content: "";
    flex: 0 0 40px;
    height: 20px;
    /* Расходящиеся из одной точки три луча */
    background: 
        linear-gradient(30deg, transparent 45%, var(--main-color, var(--gold-base)) 45% 55%, transparent 55%) no-repeat right center / 100% 100%,
        linear-gradient(-30deg, transparent 45%, var(--main-color, var(--gold-base)) 45% 55%, transparent 55%) no-repeat right center / 100% 100%,
        linear-gradient(to left, var(--main-color, var(--gold-base)) 0 0) no-repeat right center / 100% 2px;
}

.deco-row--chevron::before {
    content: "";
    flex: 0 0 40px;
    height: 16px;
    background-color: var(--main-color, var(--gold-base));
    /* Создаем эффект наконечника с вырезом внутри */
    clip-path: polygon(
        0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%, 
        0% 0%, 10% 10%, 35% 50%, 10% 90%, 65% 90%, 90% 50%, 65% 10%, 10% 10%
    );
}

.deco-row--chevron::after {
    content: "";
    flex: 1;
    border-top: 2px solid var(--main-color, var(--gold-base));
    border-bottom: 2px solid var(--main-color, var(--gold-base));
    height: 8px;
}


.e-deco-cat-left-diamond {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding-left: 10px;
}

/* Символ слева */
.e-deco-cat-left-diamond::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--silvrer-base);
    transform: rotate(45deg);
    flex-shrink: 0; /* Чтобы ромб не сжимался */
}

/* Линия справа */
.e-deco-cat-left-diamond::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--silver-base), transparent);
}

/*#endregion */

/*#region Horizontal Divider */
.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--h, 2px);
    position: relative;
    margin: var(--m, 0) 0;
    z-index: var(--z-border);
}

.divider--line {
    background: var(--line-color, var(--silver-base));
    height: var(--line-thickness, 2px);
}

.divider--diamonds::before,
.divider--diamonds::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid var(--divider-color, var(--gold-base));
    transform: rotate(45deg);
    background-color: var(--bg-base); /* Чтобы ромб перекрывал линию, если она сплошная */
}

.divider--diamonds::before { left: var(--space-s); }
.divider--diamonds::after { right: var(--space-s); }

.divider--center-diamond::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 1px solid var(--divider-color, var(--silver-base));
    transform: rotate(45deg);
    background-color: var(--silver-base);
}

.divider-hor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: var(--z-border);
    --pc: var(--primary-color, red);
    --sc: var(--secondary-color, green);
}

.divider-hor--double-roumbus-side {
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--pc), transparent);
    margin: 10px 0px;
}
.divider-hor--double-roumbus-side::before, .divider-hor--double-roumbus-side::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid var(--pc);
    transform: rotate(45deg);
    top: -4px;
}
.divider-hor--double-roumbus-side::before { left: 10px; }
.divider-hor--double-roumbus-side::after { right: 10px; }


.divider-hor--art-deco-steps {
    --height-all: 28px;
    --height-after: 8px;
    --height-line: 4px;
    --width: 40px;
    height: var(--height-all);
    --gold: var(--primary-color, var(--gold-base));
}

.divider-hor--art-deco-steps::before {
    content: '';
    position: absolute;
    width: 100%;
    height: var(--height-line);
    background: linear-gradient(90deg, transparent 0%, var(--gold) 10%, var(--gold) 90%, transparent 100%);
}

.divider-hor--art-deco-steps::after {
    content: '';
    --height-half: calc(var(--height-after) * 0.5);
    position: absolute;
    width: var(--width);
    height: var(--height-after);
    border-top: var(--height-half) solid var(--gold);
    border-bottom: var(--height-half) solid var(--gold);
    background: transparent;
}



/*#endregion */

/*#region Vertical Divider */
.divider-v {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 16px;
    align-self: stretch; 
    min-height: var(--space-xl); 
    position: relative;
    margin: 0 var(--space-xs);
}

.divider-line-thin {
    display: flex;
    width: 1px;
    align-self: stretch;
    position: relative;

}

/* Вертикальная линия фоном */
.divider-v--line {
    background: linear-gradient(180deg, 
        transparent, 
        var(--divider-color, var(--gold-base)), 
        transparent
    ) no-repeat center / 2px 100%;
}
.divider-v--diamonds::before,
.divider-v--diamonds::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid var(--divider-color, var(--gold-base));
    transform: rotate(45deg);
    background-color: var(--bg-main);
}

.divider-v--diamonds::before { top: 0; }
.divider-v--diamonds::after { bottom: 0; }

/* Одиночный ромб точно в центре струны */
.divider-v--center-diamond::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid var(--divider-color, var(--gold-light));
    transform: translate(-50%) rotate(45deg);
    background-color: var(--gold-base);
    left: 50%; 
}

/*#endregion */

/*#region Border */

.border-side-right { border-right: var(--bw, 2px) solid var(--bc, red) }
.border-side-bottom { border-bottom: var(--bw, 2px) solid var(--bc, red) }


.e-border {
    --b-color: var(--border-color, gold); 
    --b-width: var(--border-width, 1px);
    --b-inset: var(--border-inset, 0px);
    
    position: absolute;
    inset: var(--b-inset);
    pointer-events: none;
    z-index: var(--z-border);
}
.e-border--solid {
    border: var(--b-width) solid var(--b-color);
}

.element-border--corner--inner-steps {
    --c: var(--color, red);
    inset: 0;
    border: 1px solid var(--c);
    background: 
        /* Верхний левый */
        linear-gradient(to right, var(--c) 30px, transparent 30px) 15px 15px / 100% 2px no-repeat,
        linear-gradient(to bottom, var(--c) 30px, transparent 30px) 15px 15px / 2px 100% no-repeat,
        /* Нижний правый */
        linear-gradient(to left, var(--c) 30px, transparent 30px) calc(100% - 15px) calc(100% - 15px) / 100% 2px no-repeat,
        linear-gradient(to top, var(--c) 30px, transparent 30px) calc(100% - 15px) calc(100% - 15px) / 2px 100% no-repeat;
}


/* .e-border {
    position: absolute; 
    pointer-events: none;
    z-index: var(--z-border);
} */



/*#region Corner Frame */
.e-border {
    position: absolute;
    inset: var(--c-i);
    pointer-events: none;
    z-index: var(--z-border);
    isolation: isolate; 
}
.e-border.has-glow {
    /* drop-shadow светит только там, где есть пиксели (углы и линии) */
    /* filter: drop-shadow(var(--glow-val) var(--c-color)); */
    filter: drop-shadow(var(--glow-val, 0 0 8px var(--c-color)));
}
.e-border.has-base-border {
    /* Используем основной цвет, но с прозрачностью 30% */
    border: var(--base-t, 1px) solid color-mix(in srgb, var(--c-color), transparent 70%);
}
.c-item {
    position: absolute;
    width: var(--c-size);
    height: var(--c-size);
    border: 0 solid var(--c-color);

    box-sizing: border-box;
}

.c-nw { top: 0; left: 0; border-top-width: var(--c-t); border-left-width: var(--c-t); }
.c-ne { top: 0; right: 0; border-top-width: var(--c-t); border-right-width: var(--c-t); }
.c-sw { bottom: 0; left: 0; border-bottom-width: var(--c-t); border-left-width: var(--c-t); }
.c-se { bottom: 0; right: 0; border-bottom-width: var(--c-t); border-right-width: var(--c-t); }

@keyframes borderPulse {
    0% {
        opacity: 0.6;
        filter: drop-shadow(0 0 5px var(--c-color));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(var(--glow-val, 0 0 12px) var(--c-color));
    }
    100% {
        opacity: 0.6;
        filter: drop-shadow(0 0 5px var(--c-color));
    }
}

/* Применяем анимацию только если есть класс и свечение */
.e-border.is-pulsing.has-glow {
    animation: borderPulse 3s infinite ease-in-out;
}

/* Необязательно: если хочется, чтобы пульсировали только углы без свечения */
.e-border.is-pulsing:not(.has-glow) {
    animation: borderPulse 3s infinite ease-in-out;
    filter: none; /* Убираем тень, если glow не включен */
}
.e-border.can-appear {
    opacity: 0;
    transform: scale(1.1); /* Слегка увеличим, чтобы она "сужалась" к картинке */
    transition: opacity 1s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Состояние при появлении */
.e-border.can-appear.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Если включена пульсация, пусть она начнется только после появления */
.e-border.can-appear.is-visible.is-pulsing {
    animation-delay: 2s; /* Даем время на плавное появление */
}

/*#endregion */

/*#region Single Lines  */
.l-border {
    position: absolute;
    inset: var(--l-i);
    pointer-events: none;
    z-index: var(--z-border);

}
.l-line {
    position: absolute;
    background: var(--l-color);
}
.l-top, .l-bottom {
    left: 50%;
    width: var(--l-len);
    height: var(--l-t);
    transform: translateX(-50%);
    /* Исчезновение влево и вправо */
    -webkit-mask-image: linear-gradient(to right, transparent, black 30%, black 70%, transparent);
    mask-image: linear-gradient(to right, transparent, black 30%, black 70%, transparent);
}
.l-top { top: 0; }
.l-bottom { bottom: 0; }

/* Вертикальные линии */
.l-left, .l-right {
    top: 50%;
    height: var(--l-len);
    width: var(--l-t);
    transform: translateY(-50%);
    /* Исчезновение вверх и вниз */
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}
.l-left { left: 0; }
.l-right { right: 0; }

/* Свечение */
.l-border.has-glow {
    filter: drop-shadow(0 0 5px var(--l-color));
}

/* Анимация проявления (если нужен JS) */
.l-border.can-appear { opacity: 0; transition: opacity 1.2s ease; }
.l-border.can-appear.is-visible { opacity: 1; }

.l-border.has-flare .l-line::after {
    content: '';
    position: absolute;
    background: linear-gradient(
        to right, 
        transparent, 
        rgba(255, 255, 255, 0.8) 50%, 
        transparent
    );
    z-index: 2;
}

/* Блик для горизонтальных линий */
.l-border.has-flare .l-top::after,
.l-border.has-flare .l-bottom::after {
    top: 0;
    height: 100%;
    width: 100px; /* Длина блика */
    animation: flareHorizontal 4s infinite ease-in-out;
}

/* Блик для вертикальных линий */
.l-border.has-flare .l-left::after,
.l-border.has-flare .l-right::after {
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(
        to bottom, 
        transparent, 
        rgba(255, 255, 255, 0.8) 50%, 
        transparent
    );
    animation: flareVertical 4s infinite ease-in-out;
}

/* Анимации движения */
@keyframes flareHorizontal {
    0%   { left: -150%; opacity: 0; }
    30%  { opacity: 1; }
    60%  { opacity: 1; }
    100% { left: 150%; opacity: 0; }
}

@keyframes flareVertical {
    0%   { top: -150%; opacity: 0; }
    30%  { opacity: 1; }
    60%  { opacity: 1; }
    100% { top: 150%; opacity: 0; }
}
.l-bottom::after { animation-delay: 1s !important; }
.l-left::after   { animation-delay: 2s !important; }
.l-right::after  { animation-delay: 3.2s !important; }
/*#endregion */

/*#region Double Lines */
.dg-border {
    position: absolute;
    inset: var(--dg-i);
    pointer-events: none;
    z-index: var(--z-border);
}
.dg-border.can-appear:not(.is-visible) { opacity: 0; }

.dg-outer {
    position: absolute;
    inset: 0;
    border: var(--dg-t) solid var(--dg-color);
    opacity: 1;
}
.dg-inner {
    position: absolute;
    inset: var(--dg-off);
    border: calc(var(--dg-t) / 1.5) solid var(--dg-color);
    opacity: 0.5;
}
.dg-border.is-pulsing .dg-inner {
    animation: layerPulse 3s infinite ease-in-out;
}
.dg-border.is-pulsing .dg-outer {
    animation: layerPulse 3s infinite ease-in-out;
    animation-delay: 1.5s; /* Противофаза */
}
@keyframes layerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; } /* В пике делаем ярче */
}
.dg-lock {
    position: absolute;
    width: calc(var(--dg-off) * 0.9);
    height: calc(var(--dg-off) * 0.9);
    /* Градиент создает эффект отблеска на металле */
    background: linear-gradient(135deg, 
        var(--dg-color) 0%, 
        #fff 50%, 
        var(--dg-color) 100%
    );
    display: block;
    z-index: 15;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.dg-nw { top: 0; left: 0; transform: translate(-50%, -50%) rotate(45deg); }
.dg-ne { top: 0; right: 0; transform: translate(50%, -50%) rotate(45deg); }
.dg-sw { bottom: 0; left: 0; transform: translate(-50%, 50%) rotate(45deg); }
.dg-se { bottom: 0; right: 0; transform: translate(50%, 50%) rotate(45deg); }

.dg-border.has-glow {
    /* 1 слой: мягкое заполнение вокруг, 2 слой: четкий контур, 3 слой: яркое ядро */
    filter: 
        drop-shadow(0 0 2px var(--dg-color)) 
        drop-shadow(0 0 10px var(--dg-color))
        drop-shadow(0 0 20px var(--dg-color));
    
    /* Дополнительно: повышаем насыщенность самой рамки */
    filter: brightness(1.2) contrast(1.2) 
            drop-shadow(0 0 5px var(--dg-color)) 
            drop-shadow(0 0 15px var(--dg-color));
}

/* Лайфхак для Art Deco: подсвечиваем ромбики сильнее */
.dg-border.has-glow .dg-lock {
    box-shadow: 0 0 15px var(--dg-color);
}
/*#endregion */


/* Базовый чистый контейнер рамки */
.g-border {
    position: absolute;
    inset: 0; 
    pointer-events: none;
    z-index: var(--z-border, 2);
    box-sizing: border-box;
    transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

/* Эффект мягкого внутреннего градиента (виньетки) */
.g-border.g-has-glow {
    box-shadow: 
        /* Плотный полупрозрачный край на ширину inset */
        inset 0 0 0 var(--g-i) color-mix(in srgb, var(--g-color) 10%, transparent),
        /* Мягкое размытие, уходящее еще глубже к центру */
        inset 0 0 calc(var(--g-i) * 2) color-mix(in srgb, var(--g-color) 20%, transparent);
}

/* Тонкая базовая линия, подчеркивающая внутреннюю границу градиента */
.g-border.g-has-base-border {
    outline: var(--g-base-t, 1px) solid color-mix(in srgb, var(--g-color), transparent 65%);
    outline-offset: calc(var(--g-i) * -1);
}

/* Анимация пульсации: градиент плавно "дышит" внутрь и наружу */
@keyframes gGradientPulse {
    0%, 100% {
        box-shadow: 
            inset 0 0 0 var(--g-i) color-mix(in srgb, var(--g-color) 18%, transparent),
            inset 0 0 calc(var(--g-i) * 1.8) color-mix(in srgb, var(--g-color) 25%, transparent);
    }
    50% {
        box-shadow: 
            inset 0 0 0 calc(var(--g-i) * 1.2) color-mix(in srgb, var(--g-color) 35%, transparent),
            inset 0 0 calc(var(--g-i) * 2.5) color-mix(in srgb, var(--g-color) 50%, transparent);
    }
}

.g-border.g-is-pulsing.g-has-glow {
    animation: gGradientPulse 6s infinite ease-in-out;
}

/* Логика появления (плавное проявление из прозрачности с расширением градиента) */
.g-border.g-can-appear {
    opacity: 0;
    box-shadow: inset 0 0 0 0 transparent, inset 0 0 0 0 transparent; 
}

/* Класс активации видимости */
.g-border.g-can-appear.g-is-visible {
    opacity: 1;
}




.e-border--edge {
    inset: 0;
    border: 1px solid var(--border-color, red);
}




.e-border--inner {
    inset: var(--inset, 10px);
    border: 1px solid var(--border-color, red);
    pointer-events: none;
}

.e-border--inner::before, .e-border--inner::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 3px solid var(--border-color, red);
}
.e-border--inner::before {
    top: -5px;
    left: -5px;
    border-right: none;
    border-bottom: none;
}
.e-border--inner::after {
    bottom: -5px;
    right: -5px;
    border-left: none;
    border-top: none;
}



/* Вспомогательный класс для родителя */
.border-host {
    position: relative;
    isolation: isolate; /* Чтобы z-index внутри не конфликтовал с внешним миром */
}

/* Универсальный скелет рамки */
.border-deco {   
    position: absolute;
    inset: var(--border-inset, 0px); /* Удобная настройка отступа */
    border: none;
    pointer-events: none;
    z-index: var(--z-border); /* Используем нашу шкалу слоев */
    background: transparent;
}
.border-deco--corners::before,
.border-deco--corners::after {

    content: '';
    position: absolute;
    width: var(--corner-size, 30px);
    height: var(--corner-size, 30px);
    border: var(--corner-thickness, 3px) solid var(--border-color, var(--gold-main));
}

.border-deco--corners::before {
    top: -5px; left: -5px;
    border-right: none; border-bottom: none;
}

.border-deco--corners::after {
    bottom: -5px; right: -5px;
    border-left: none; border-top: none;
}

.border-deco--corners-top::before,
.border-deco--corners-top::after {
    content: '';
    position: absolute;
    width: var(--corner-w, 30px);
    height: var(--corner-h, 30px);
    border: var(--corner-thickness, 3px) solid var(--border-color, var(--gold-main));
}
.border-deco--corners-top::before {
    top: -5px; left: -5px;
    border-right: none; border-bottom: none;
}
.border-deco--corners-top::after {
    top: -5px; right: -5px;
    border-left: none; border-bottom: none;
}

.border-deco--corners-bottom::before,
.border-deco--corners-bottom::after {
    content: '';
    position: absolute;
    width: var(--corner-w, 25px);
    height: var(--corner-h, 25px);
    border: var(--corner-thickness, 3px) solid var(--border-color, var(--gold-base));
}
.border-deco--corners-bottom::before {
    bottom: 0px; left: 0px;
    border-right: none; border-top: none;
}
.border-deco--corners-bottom::after {
    bottom: 0px; right: 0px;
    border-left: none; border-top: none;
}


.border-deco--ray-artdeco::before {
    content: '';
    position: absolute;
    --ray-center-h: 12px;
    top: calc(var(--ray-center-h) / -2); 
    left: 50%;
    transform: translateX(-50%);
    width: var(--ray-total-width, 80%);
   height: var(--ray-center-h);

    background: 
        /* 1. Центральный вертикальный прямоугольник */
        linear-gradient(
            var(--border-color, var(--gold-base)), 
            var(--border-color, var(--gold-base))
        ) no-repeat center / var(--ray-center-w, 4px) 100%,
        
        /* 2. Левый луч (угасает влево) */
        linear-gradient(
            to left, 
            var(--border-color, var(--silver-base)), 
            transparent
        ) no-repeat left center / calc(50% - var(--ray-center-w, 4px) / 2) var(--ray-thickness, 2px),
        
        /* 3. Правый луч (угасает вправо) */
        linear-gradient(
            to right, 
            var(--border-color, var(--silver-base)), 
            transparent
        ) no-repeat right center / calc(50% - var(--ray-center-w, 4px) / 2) var(--ray-thickness, 2px);
}
.border-deco--ray-artdeco::after {
    content: '';
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: 4px;
    height: 1px;
    background: var(--silver-light);
    opacity: 0.6; /* Очень бледная дублирующая линия */
}

/*#endregion */

.element-ticker { margin-left: 80px; }

/*#region Single Elements */

.element-abs {
    position: absolute;
    z-index: var(--z-border);
    top: var(--top, auto);
    bottom: var(--bottom, auto);
    left: var(--left, auto);
    right: var(--right, auto);
    display: flex;
    border: 0;

}

.vert-mid { left: 50%; transform: translate(-50%, -50%); }
.vert-mid-top { top: 0; }
.vert-mid-bottom {bottom: 0; }

.element-abs svg {
    fill: var(--shape-color, blue);
    overflow: visible !important;
    width: 42px;
    height: 42px;
    display: block;

    
}
.element-abs svg path { 
    vector-effect: non-scaling-stroke;
    stroke: var(--shape-border-color, yellow);
    stroke-width: var(--shape-border-width, 0px);

}


.element {
    display: inline-block;
    vertical-align: middle;
    
    position: relative;
    flex-shrink: 0;
    transition: all 0.3s ease;
     z-index: var(--z-border);
}

.element--diamond {
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    border: 1px solid #f9e297;
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}
.element--double-sq {
    width: 24px;
    height: 24px;
    background: var(--silver-dark);
    border: 2px solid var(--silver-base);
}
.element--double-sq::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 2px solid var(--silver-light);
}
.element--crystal {
    width: 24px;
    height: 24px;
    transform: rotate(45deg);
    /* Сложный градиент имитирует грани */
    background: linear-gradient(135deg, 
       var(--silver-light) 0%, 
        var(--silver-base) 45%, 
        var(--silver-dark) 50%, 
       var(--silver-base) 100%
    );
    border: 0.5px solid #000; /* Тонкая обводка для четкости */
}
.element--triple-line {
    width: 40px;
    height: 2px;
    background: var(--gradient-silver-blb);
}
.element--triple-line::before,
.element--triple-line::after {
    content: '';
    position: absolute;
    left: 25%;
    width: 50%;
    height: 2px;
    background: inherit;
}
.element--triple-line::before { top: -6px; }
.element--triple-line::after { bottom: -6px; }

.element--ziggurat {
    width: 20px;
    height: 4px;
    background: #d4af37;
    /* Рисуем ступеньки вниз с помощью жестких теней */
    box-shadow: 
        0 6px 0 -2px #d4af37, 
        0 12px 0 -4px #d4af37;
    /* Поднимаем, чтобы центрировать по тексту */
    position: relative;
    top: -6px; 
}

.element--pillar {
    width: 2px;
    height: 20px;
    background: #d4af37;
    position: relative;

}
.element--pillar::before,
.element--pillar::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 12px; /* Боковые линии короче центральной */
    background: #d4af37;
    top: 50%;
    transform: translateY(-50%);
}

.element--pillar::before { left: -6px; }
.element--pillar::after  { right: -6px; }

/*#endregion */

/*#region Page Top */
.element-top {
    /* Настройки по умолчанию, которые можно переопределить */
    --e-deco-color: var(--wp--preset--color--p-soft, #ff0400);
    --e-deco-width: 200px;
    --e-deco-height: 40px;
    --e-deco-line-weight: 1px;
    
    width: var(--e-deco-width);
    height: var(--e-deco-height);
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    min-height: var(--e-deco-height);
    z-index: var(--z-border);
}


.e-top--crown {
    /* Чтобы градиенты не перекрывали друг друга, задаем их четко через background */
    background-image: 
        linear-gradient(to right, transparent, var(--e-deco-color), transparent),
        linear-gradient(to right, transparent, var(--e-deco-color), transparent),
        linear-gradient(to right, transparent, var(--e-deco-color), transparent);
    
    background-repeat: no-repeat;
    
    /* Позиции и размеры: [позиция X позиция Y] / [ширина высота] */
    background-position: 
        center bottom,    /* Длинная линия */
        center 50%,       /* Средняя линия */
        center top;       /* Верхняя короткая */
        
    background-size: 
        100% var(--e-deco-line-weight), 
        60% var(--e-deco-line-weight), 
        30% var(--e-deco-line-weight);
}

.e-top--crown::before {
    content: '';
    position: absolute;
    /* Центрируем ромб по горизонтали */
    left: 50%;
    /* Сдвигаем на самый верх и немного выше края */
    top: 0;
    transform: translate(-50%, -50%) rotate(45deg);
    
    width: 8px;
    height: 8px;
    border: var(--e-deco-line-weight) solid var(--e-deco-color);
    background: #ffffff; /* Цвет должен совпадать с фоном страницы */
    z-index: 1;
}

.e-top--ziggurat {
    --e-deco-width: 100px;
    border-top: var(--e-deco-line-weight) solid var(--e-deco-color);
}

.e-top--ziggurat::before,
.e-top--ziggurat::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 15%;
    right: 15%;
    height: var(--e-deco-line-weight);
    background: var(--e-deco-color);
}

.e-top--ziggurat::after {
    top: 14px;
    left: 30%;
    right: 30%;
}

/*#endregion */

.element-bottom {
    /* Настройки по умолчанию */
    --e-deco-color: var(--copper-base, #ff0400);
    --e-deco-width: 200px;
    --e-deco-height: 40px;
    --e-deco-line-weight: 2px;
    
    width: var(--e-deco-width);
    height: var(--e-deco-height);
    margin: 0 auto;
    position: relative;
    margin: 2rem auto 0;
    display: block; 
    flex: 0 0 auto; 
    box-sizing: border-box;
}

.e-bottom--tower {
    --e-deco-width: 40px;
    --e-deco-height: 100px;

    background-image: 
        linear-gradient(to bottom, var(--e-deco-color), transparent), /* Центр */
        linear-gradient(to bottom, var(--e-deco-color), transparent), /* Лево */
        linear-gradient(to bottom, var(--e-deco-color), transparent); /* Право */
    
    background-repeat: no-repeat;

    background-position: 
        center top, 
        left top, 
        right top;

    background-size: 
        var(--e-deco-line-weight) 100%, 
        var(--e-deco-line-weight) 60%, 
        var(--e-deco-line-weight) 60%;
}

.e-bottom--arrow {
    --e-deco-width: 40px;
    --e-deco-height: 100px;

    background: 
        linear-gradient(to bottom, var(--e-deco-color), transparent) no-repeat center / 2px 100%,
        linear-gradient(to bottom, var(--e-deco-color), transparent) no-repeat left / 2px 60%,
        linear-gradient(to bottom, var(--e-deco-color), transparent) no-repeat right / 2px 60%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.e-bottom--arrow::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 1px solid var(--e-deco-color);
    transform: rotate(45deg);
    margin-top: -5px;
    background: var(--e-deco-color);

}


/*#region Pointer */
.pointer-down {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 0 20px;
    z-index: var(--z-modal);
    pointer-events: none; /* Не мешает кликам */
    animation: decoFadeInOut 2.5s infinite ease-in-out;
}
.pointer-down-text {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: red;
    white-space: nowrap;
    font-family: serif;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.pointer-down-side-element {
    flex-grow: 1;
    max-width: 60px; /* Длина усиков */
    height: 1px;
    background: red;
    position: relative;
}
.pointer-down-side-element::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1px solid red;
    border-bottom: 1px solid red;
}
.pointer-down div:first-child::after {
    right: 0;
    transform: translateY(-50%) rotate(45deg);
}
.pointer-down div:last-child::after {
    left: 0;
    transform: translateY(-50%) rotate(45deg);
}
@keyframes decoFadeInOut {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(5px); }
}
@media (min-width: 1024px) {
    .pointer-down { display: none; }
}
/*#endregion */



.border-box--side-fade {
    border-style: solid;
    border-width: 0 4px;

}
.border-box--side-fade-up {
    border-image: linear-gradient(
        to top, 
        rgba(0, 123, 255, 1) 0%, 
        rgba(0, 123, 255, 0) 100%
    ) 1;
}
.border-box--side-fade-down {
    border-image: linear-gradient(
        to bottom, 
        rgba(0, 123, 255, 1) 0%, 
        rgba(0, 123, 255, 0) 100%
    ) 1;
}

.border-box--simple {
    border: var(--border-width, 4px) solid var(--border-color, blue);

}



.fading-row {
    display: flex;
    align-items: stretch; /* Растягивает боковые блоки по высоте текста */
    width: 100%; 
    background: var(--bg-gradient);
    margin: 0;
    /* border-style: solid;
    border-width: 0 var(--edge-thickness);
    border-top: 0px;
    border-bottom: 0px;
    border-image: linear-gradient(to bottom, var(--edge-color) 0%, var(--edge-color) 50%, rgba(0,0,0,0) 100%) 0 1 0 1;
    animation: pulse-borders 3s ease-in-out infinite; */
}
@keyframes pulse-borders {
  0% {
    opacity: 0.2; /* Границы и фон затухают на 80% */
  }
  50% {
    opacity: 1.0; /* Максимальная яркость всей конструкции */
  }
  100% {
    opacity: 0.2;
  }
}


.triangle-edge {
  width: var(--edge-thickness);
  flex-shrink: 0;
  will-change: clip-path;
  width: 20px;
  background: var(--bg-gradient);
}
.fade-down {
  --bg-gradient: linear-gradient(to bottom, var(--edge-color) 0%, transparent 100%);
  /* --bg-content-gradient: linear-gradient(to bottom, rgba(0, 123, 255, 0.15) 0%, rgba(0, 123, 255, 0) 100%); */
}


.fade-down .side-left {
  background: var(--bg-gradient);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.fade-down .side-right {
  background: var(--bg-gradient);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.fade-up {
  /* Градиент для боковых стрелок снизу вверх */
  --bg-gradient: linear-gradient(to top, var(--edge-color) 0%, rgba(0, 0, 0, 0) 100%);
  
  /* Градиент для фона текста снизу вверх */
  --bg-content-gradient: linear-gradient(to top, rgba(0, 123, 255, 0.15) 0%, rgba(0, 123, 255, 0) 100%);
}
.fade-up .side-left {
  background: var(--bg-gradient);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.fade-up .side-right {
  background: var(--bg-gradient);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.accent-info {
    width: 100%;
    display: flex;
    border-bottom: 2px solid red;
}



.e-border-corners {
  /* Резервные дефолты */
  --ebc-color: blue;
  --ebc-base-color: blue; /* Резерв для цвета подложки */
  --ebc-size: 20px;
  --ec-bt: 2px;
  --ebc-i: 10px;
  --ebc-gap: 5px; 
  
  /* Автоматический расчет сдвига */
  --ebc-offset: calc(-1 * var(--ebc-t) - var(--ebc-gap));

  position: absolute;
  inset: var(--ebc-i);
  pointer-events: none;
  box-sizing: border-box;
  z-index: var(--z-border);
}

.e-border-corners.ebc-inside {
  /* Сдвиг становится положительным, уголки аккуратно отступают внутрь */
  --ebc-offset: calc(var(--ebc-base-t, 1px) + var(--ebc-gap));
}

/* Защита box-sizing */
.e-border-corners *, 
.e-border-corners *::before, 
.e-border-corners *::after {
  box-sizing: border-box;
}

/* --- БАЗОВАЯ РАМКА (Использует свой цвет) --- */
.e-border-corners.has-base-border {
  border: var(--ebc-base-t, 1px) solid var(--ebc-base-color);
}

/* --- ОБЩИЙ СТИЛЬ ДЛЯ ВСЕХ УГОЛКОВ (Используют свой цвет) --- */
.e-border-corners .ebc-item {
  position: absolute;
  width: var(--ebc-size);
  height: var(--ebc-size);
  border: var(--ebc-t) solid var(--ebc-color);
}

/* --- ПОЗИЦИОНИРОВАНИЕ КОНКРЕТНЫХ УГЛОВ --- */
.e-border-corners .ebc-nw { top: var(--ebc-offset); left: var(--ebc-offset); border-right: none; border-bottom: none; }
.e-border-corners .ebc-ne { top: var(--ebc-offset); right: var(--ebc-offset); border-left: none; border-bottom: none; }
.e-border-corners .ebc-sw { bottom: var(--ebc-offset); left: var(--ebc-offset); border-right: none; border-top: none; }
.e-border-corners .ebc-se { bottom: var(--ebc-offset); right: var(--ebc-offset); border-left: none; border-top: none; }

/* --- ДВУХЦВЕТНОЕ СВЕЧЕНИЕ --- */
.e-border-corners.has-glow {
  /* Рамка светится своим базовым цветом */
  box-shadow: var(--ebc-glow-val, 0 0 8px) var(--ebc-base-color);
}
.e-border-corners.has-glow .ebc-item {
  /* Уголки светятся своим акцентным цветом */
  filter: drop-shadow(var(--ebc-glow-val, 0 0 8px) var(--ebc-color));
}

/* --- АНИМАЦИЯ: ПУЛЬСАЦИЯ --- */
.e-border-corners.is-pulsing {
  animation: ebcPulse 3s ease-in-out infinite;
}

@keyframes ebcPulse {
  0%, 100% { opacity: 1;  }
  50% { opacity: 0.6; }
}

/* --- АНИМАЦИЯ: ПОЯВЛЕНИЕ --- */
.e-border-corners.can-appear {
  animation: ebcReveal 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes ebcReveal {
  from { opacity: 0; transform: scale(1.05); }
  to { opacity: 1; transform: scale(1); }
}



.e-border-double {
  /* Резервные дефолты */
  --ebd-out-color: blue;
  --ebd-in-color: blue;
  --ebd-out-t: 2px;
  --ebd-in-t: 1px;
  --ebd-inset: 10px;
  --ebd-gap: 6px;

  /* Позиционирование внешней рамки */
  position: absolute;
  inset: var(--ebd-inset);
  border: var(--ebd-out-t) solid var(--ebd-out-color);
  pointer-events: none;
  box-sizing: border-box;
  z-index: var(--z-border);
}

/* Безопасный box-sizing для всех вложенных элементов */
.e-border-double *,
.e-border-double *::before,
.e-border-double *::after {
  box-sizing: border-box;
}

/* --- ВНУТРЕННЯЯ РАМКА --- */
.e-border-double .ebd-inner-line {
  position: absolute;
  
  /* Идеальный автоматический расчет отступа внутренней рамки:
     берется величина зазора (gap) и учитывается толщина внешней линии, 
     чтобы отсчет шел строго от ее внутреннего края */
  inset: var(--ebd-gap);
  
  border: var(--ebd-in-t) solid var(--ebd-in-color);
}

/* --- ДВУХЦВЕТНОЕ НЕОНОВОЕ СВЕЧЕНИЕ --- */
.e-border-double.has-glow {
  /* Свечение для внешней рамки */
  box-shadow: var(--ebd-glow-val, 0 0 8px) var(--ebd-out-color);
}
.e-border-double.has-glow .ebd-inner-line {
  /* Свечение для внутренней рамки */
  box-shadow: var(--ebd-glow-val, 0 0 8px) var(--ebd-in-color);
}

/* --- АНИМАЦИЯ: ПУЛЬСАЦИЯ --- */
.e-border-double.is-pulsing {
  animation: ebdPulse 4s ease-in-out infinite;
}

@keyframes ebdPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* --- АНИМАЦИЯ: КРАСИВОЕ ПОЯВЛЕНИЕ --- */
.e-border-double.can-appear {
  animation: ebdReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ebdReveal {
  from {
    opacity: 0;
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


.i-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.3);
    border: 3px solid #fff;
    border-radius: 50%;
    z-index: var(--z-content);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease; /* Для плавности */
}

/* Рисуем треугольник через псевдоэлемент */
.i-play::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 18px solid white;
    margin-left: 5px; /* Компенсация центра для треугольника */
    transition: transform 0.3s ease;
}


.deco-quote-simple {
    position: relative;
    padding: var(--space-xl) var(--space-xl);
    margin: 20px 0;
    /* width: 100%; */
    text-align: center;
    align-self: center;
    border-left: 2px solid var(--silver-base);
    border-right: 2px solid var(--silver-base);
    background: black
}
.deco-quote-simple::before,
.deco-quote-simple::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--gold-base);
    border: 1px solid var(--copper-light);
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: 2;
}

.deco-quote-simple::before { left: -1px; }
.deco-quote-simple::after { right: -12px; }
.deco-quote-simple p {
    font-family: var(--wp--preset--font-family--oda) !important; 
    font-size: var(--fs-lg) !important;
    line-height: var(--lh-title) !important;
    text-transform: uppercase;
    font-style: italic;

    color: var(--gold-base);
}
.deco-quote-simple cite {
    display: block;
    margin-top: 15px;
    font-family: var(--wp--preset--font-family--montserrat) !important; 
    letter-spacing: 0.2em;
    font-size: var(--fs-md) !important;
    line-height: var(--lh-body) !important;
    color: var(--silver-base);
    font-style: normal;
}