/* Динамический декоративный фон с фрагментами кода. */

/* Каркас сгенерированного фона */
.automated-code-bg {
    position: absolute;
    inset: 0;
    z-index: -3 !important;
    pointer-events: none !important;
    contain: strict;
    content-visibility: auto;
}

.automated-code-bg *,
.automated-code-bg div,
.automated-code-bg pre,
.automated-code-bg span {
    pointer-events: none !important;
    user-select: none !important;
    touch-action: none !important;
}

.developer-signature {
    pointer-events: none;
    user-select: none;
}

.developer-name {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--text-primary) 85%, var(--accent) 15%),
        color-mix(in srgb, var(--text-primary) 55%, var(--accent) 45%),
        var(--accent)
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    opacity: 0.08;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 18%, transparent));
}

[data-theme="light"] .developer-name {
    background-image: linear-gradient(
        90deg,
        var(--accent),
        var(--accent-back),
        var(--accent-hover)
    );
    opacity: 0.14;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 14%, transparent));
}

.automated-code-bg .developer-signature {
    position: static;
    color: inherit;
    font: inherit;
}

body > .developer-signature {
    position: fixed;
    z-index: 0;
    right: clamp(12px, 2vw, 28px);
    bottom: clamp(12px, 2vw, 28px);
    overflow: hidden;
    max-width: calc(100vw - 24px);
    color: color-mix(in srgb, var(--text-muted) 8%, transparent);
    font-family: monospace;
    font-size: clamp(0.68rem, 1vw, 0.82rem);
    line-height: 1;
    white-space: nowrap;
}

[data-theme="light"] body > .developer-signature {
    color: color-mix(in srgb, var(--text-muted) 14%, transparent);
}

body > .developer-signature .token-keyword {
    color: color-mix(in srgb, var(--accent-back) 7.5%, transparent) !important;
    font-weight: 600;
}

[data-theme="light"] body > .developer-signature .token-keyword {
    color: color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

/* Код и нумерация строк */
.automated-code-bg .code-wrapper {
    position: absolute;
    z-index: 2;
    display: flex;
    gap: 1.25rem;
    box-sizing: border-box;
}

.automated-code-bg .code-block,
.automated-code-bg .line-numbers {
    margin: 0;
    font-family: monospace;
    font-size: clamp(0.8rem, 1.3vw, 1.4rem);
    font-weight: 500;
    line-height: 1.5;
}

.automated-code-bg .code-block {
    color: color-mix(in srgb, var(--text-primary) 1.75%, transparent);
    white-space: pre;
}

.automated-code-bg .token-keyword {
    color: color-mix(in srgb, var(--accent-back) 7.5%, transparent) !important;
    font-weight: 600;
}

.automated-code-bg .line-numbers {
    display: flex;
    flex-direction: column;
    color: color-mix(in srgb, var(--text-muted) 0.8%, transparent);
}

.automated-code-bg .code-watermark {
    position: absolute;
    z-index: 1;
    color: color-mix(in srgb, var(--border) 4%, transparent);
    font-family: monospace;
    font-size: clamp(15rem, 25vw, 35rem);
    font-weight: 700;
}

/* Светлая тема */
[data-theme="light"] .automated-code-bg .code-block {
    color: color-mix(in srgb, var(--text-primary) 5%, transparent);
}

[data-theme="light"] .automated-code-bg .token-keyword {
    color: color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

[data-theme="light"] .automated-code-bg .line-numbers {
    color: color-mix(in srgb, var(--text-muted) 3%, transparent);
}

[data-theme="light"] .automated-code-bg .code-watermark {
    color: color-mix(in srgb, var(--border) 15%, transparent);
}

.automated-code-bg .line-numbers span {
    position: relative;
}

/* Маркеры изменений */
.automated-code-bg .line-numbers span.git-add::before {
    content: '';
    position: absolute;
    top: 3px;
    left: -8px;
    width: 2px;
    height: 14px;
    background: color-mix(in srgb, #22c55e 10%, transparent);
}

.automated-code-bg .line-numbers span.git-mod::before {
    content: '';
    position: absolute;
    top: 3px;
    left: -8px;
    width: 2px;
    height: 14px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Позиционные варианты */
.automated-code-bg .watermark-left {
    bottom: -5%;
    left: 5%;
}

.automated-code-bg .watermark-right {
    top: -5%;
    right: 5%;
}

.automated-code-bg .top-left.is-hero {
    padding-top: clamp(7rem, 11vh, 9rem);
}

.automated-code-bg .top-left {
    top: 0;
    left: 4rem;
}

.automated-code-bg .bottom-right {
    right: 4rem;
    bottom: 0;
    text-align: right;
}

.automated-code-bg .top-right {
    top: 0;
    right: 4rem;
    text-align: right;
}

.automated-code-bg .bottom-left {
    bottom: 0;
    left: 4rem;
}

/* Адаптивный масштаб и размещение */
@media (min-width: 2500px) {
    .automated-code-bg .code-block,
    .automated-code-bg .line-numbers {
        font-size: 2rem !important;
    }
}

@media (min-width: 1921px) and (max-width: 2499px) {
    .automated-code-bg .code-block,
    .automated-code-bg .line-numbers {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 1300px) {
    .automated-code-bg .top-left {
        left: 2.5rem;
    }

    .automated-code-bg .bottom-right {
        right: 2.5rem;
    }

    .automated-code-bg .top-right {
        right: 2.5rem;
    }

    .automated-code-bg .bottom-left {
        left: 2.5rem;
    }

    .automated-code-bg .code-watermark {
        display: none !important;
    }
}

@media (max-width: 900px) {
    .automated-code-bg .top-left,
    .automated-code-bg .bottom-left {
        left: 1.5rem;
        max-width: 80%;
    }

    .automated-code-bg .top-right,
    .automated-code-bg .bottom-right {
        right: 1.5rem;
        max-width: 80%;
    }

    .automated-code-bg .code-block {
        white-space: pre-wrap !important;
        word-break: break-all;
    }

    .automated-code-bg .code-wrapper {
        gap: 0.75rem;
    }
}

@media (max-width: 600px) {
    body > .developer-signature {
        visibility: hidden;
    }

    .automated-code-bg .top-left,
    .automated-code-bg .bottom-left {
        left: 0.75rem;
        max-width: 90%;
    }

    .automated-code-bg .top-right,
    .automated-code-bg .bottom-right {
        right: 0.75rem;
        max-width: 90%;
    }
}