/* Общие стили */
body, html {
    font-family: 'Share Tech Mono', monospace;
    background-color: #121;
    box-shadow: inset 0 0 200px #020;
    height: 100%;
    background: linear-gradient(to bottom, #001100 0%, #111311 100%);
    color: #0f0;
    font-size: 16px;
}

::selection {
    background-color:green;
}

.visual1 {
    width: 100%;
    height: 200px;
    border: 1px solid green;
    position: relative;
    margin-bottom: 10px;
}

.visual1:after, .visual1:before {
    position:absolute;
    top: 0;
    left: 0;
}

.visual1:after {
    content: "";
    display: block;
    border-bottom: 1px solid green;
    width: 100%;
    height: 1%;
    animation: scan 5s infinite  linear;
}
.visual1:before {
    content: "";
    display: block;
    border-right: 1px solid green;
    height: 100%;
    width: 1%;
    animation: scan 0.3s infinite alternate linear;
}


h1,h2,h3,h4,h5,h6 {
    font-family: 'Share Tech Mono', monospace;
    text-align: center;
    text-transform: uppercase;
    margin: 10px;
    display: block;
    font-weight: bold;
    font-size: 1.1em;
    float:none;
    clear:both;
}

h2:before, h2:after, h1:before, h1:after, h3:before, h3:after {
    content:" \2733 \2733 "; /* Заменил * на символ звездочки */
}


/*Gradent Elements*/
button:hover, hr, img {
    background: repeating-linear-gradient(0deg, #0c0, #0c0 1px, #050 1px, #050 2px);
}

body {
    padding: 20px;
    animation: twitch 0.5s infinite;
    background: repeating-linear-gradient(0deg, #000, #000 2px, #020 2px, #020 4px);
}

.screen {
    font-family: 'Share Tech Mono', monospace;
    display: flex;
    animation: flicker 0.001s infinite;
    /* mix-blend-mode: screen; */ /* Временно убираем для теста */
}

section {
    margin-bottom: 10px;
}

button {
    font-family: 'Share Tech Mono', monospace;
    color: #0f0;
    background: transparent;
    padding: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: block;
    width: 100%;
    margin: 0 10px 10px 0;
    outline:none;
    border: 1px solid #0f0;
    box-shadow: 0 0 10px rgba(0,255,0,0.5);
    cursor: pointer;
}

button:hover {
    animation: flicker2 0.1s infinite alternate;
    color: #000;
    border: 1px solid transparent;
    box-shadow: 0 0 40px #0A0, inset 0 0 40px #0A0;
}

button:active {
    font-weight: bold;
}

button:visited {
    font-weight: bold;
    border: 1px solid blue;
}

.imageDisplay {
    text-align: center;
    width: 100%;
    border: 2px solid #0f0;
    position: relative;
    overflow: hidden;
    mix-blend-mode: multiply;
}

.imageDisplay video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background-color: #0f0;
}

.imageDisplay div.aspect {
    position: relative;
    width: 100%;
    background-color: #000;
    box-shadow: 0 0 80px #0A0, inset 0 0 150px 50px #090;
    background: repeating-linear-gradient(0deg, #050, #050 1px, #010 1px, #010 2px);
    /* Убрал position: absolute, чтобы он не перекрывал текст под ним */
    /* Убрал top, bottom, right, left */
    padding-top: 56.25%; /* Сохраняем соотношение сторон 16:9 */
}

/* Для div-заглушки внутри .aspect */
.imageDisplay div.aspect > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #050;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0a0; /* Цвет текста заглушки */
    font-size: 0.8em;
    text-shadow: none; /* Убираем тень у заглушки */
    box-shadow: none; /* Убираем тень у заглушки */
}

#firstVideo {
    font-family: 'Share Tech Mono', monospace;
}

#firstVideo:after {
    content: "";
}

.imageDisplay:after {
    padding-top: 56.25%;
    display: block;
    content: "";
}

.imageDisplay div img {
    border-radius: 50%;
    border: 1px solid #000;
    margin: 0 auto;
    /* align: center; - устаревшее свойство */
    background-color: #0f0;
}

iframe#iframeVideo {
    mix-blend-mode: overlay;
}

.buttonGroup {
    width: 33.3%;
    padding: 0 10px;
}

.buttonGroup hr {
    position: relative;
    height: 1em;
    color: #0f0;
    border: none; /* Убираем стандартную границу */
    background-color:#0f0;
    margin: 1em 0;
}

.buttonGroup hr:after {
    content: "\2733\2733\2733\2733\2733\2733\2733\2733\2733\2733\2733\2733\2733\2733\2733\2733\2733\2733\2733"; /* Повторил символ */
    position: absolute;
    top: 0;
    left: 0;
    color:#000;
    text-align: center;
    width: 100%;
    z-index: 10;
    line-height: 1em; /* Выравниваем по вертикали */
}

.bgVideo {
    position: fixed; /* Чтобы было на фоне */
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
}

.bgVideo iframe {
    width: 100%;
    height: 100%;
}

.buttonGroup p {
    margin-bottom: 1em;
}

.setButtons {
    display: flex;
}

.setButtons button {
    width: 100%;
}

.setButtons button:first-child {
    /* width: 100%; */ /* Лишнее */
    margin-left: 0;
}

.setButtons button:last-child {
    /* width: 100%; */ /* Лишнее */
    margin-right: 0;
}


@keyframes flicker {
    0% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

@keyframes blipIn {
    0% {
        height: 0;
    }
    100% {
        height: auto;
    }
}

@keyframes scan {
    0% {
        /* Оставил пустым */
    }
    100% {
        height: 100%;
        width: 100%;
    }
}

@keyframes twitch {
    0% {
        padding: 20px;
    }
    50% {
        padding: 20px;
    }
    51% {
        padding: 19px;
    }
    /* 50% { padding: 20px; } - дубликат */
    100% {
        padding: 20px;
    }
}

@keyframes flicker2 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@media screen and (max-width: 700px) {
    .screen {
        display: block;
    }
    .buttonGroup {
        width: auto;
        padding: 0 10px;
    }
}

/* ===== ДОБАВЛЕННЫЕ СТИЛИ ДЛЯ ТЕРМИНАЛА ===== */

#terminal-container {
    /* Убираем height: 100%, высота теперь зависит от контента и соседних блоков */
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    border: 1px solid #0f0; /* Рамка как у других блоков */
    box-shadow: 0 0 10px rgba(0,255,0,0.5); /* Свечение как у кнопок */
    padding: 10px; /* Небольшой внутренний отступ */
    margin-bottom: 10px; /* Отступ снизу как у других элементов */
}

#terminal-body {
    /* flex-grow: 1; */
    height: 500px;
    background-color: #000; /* Черный фон */
    color: #0f0;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8em; /* Уменьшено на 20% (было 1em/16px) */
    line-height: 1.4; /* Оставляем прежний интервал */
    font-weight: normal;
    padding: 10px;
    overflow-y: auto;
    position: relative;
    text-shadow: 0 0 3px #0f0, 0 0 8px rgba(0, 255, 0, 0.6);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.6);
    border-radius: 3px;
    scrollbar-width: none; /* Полностью скрываем */
}

/* Scanlines только внутри терминала */
#terminal-body::before {
    /* Содержимое временно убрано для проверки осветления */
    content: none; /* Убираем контент, чтобы псевдоэлемент не отображался */
}

#boot-log {
    margin: 0;
    padding: 0;
    white-space: pre-wrap;
    word-break: break-all;
    /* line-height: 1.4; */ /* Убрали отсюда, задаем для #terminal-body */
    position: relative;
    z-index: 2;
}

#boot-log .ok {
    color: #6f6;
    text-shadow: 0 0 5px #6f6;
}
#boot-log .fail {
    color: #f66;
    text-shadow: 0 0 5px #f66;
}
#boot-log .info {
    color: #aaa;
    text-shadow: none;
}

/* Новые классы для вывода команд/данных */
#boot-log .command {
    color: #8c8; /* Бледнее основного зеленого */
    text-shadow: none;
}

#boot-log .data {
    color: #0f0; /* Стандартный зеленый */
    padding-left: 10px; /* Небольшой отступ для данных */
}

#terminal {
    margin-top: 5px;
    position: relative; /* Чтобы был над scanlines */
    z-index: 2;
}

.prompt {
    margin-right: 8px;
    text-shadow: inherit;
}

/* Убираем стили для input */
/*
#start-command {
    background-color: transparent;
    border: none;
    color: #0f0;
    font-family: inherit;
    font-size: 1em;
    line-height: inherit;
    font-weight: inherit;
    outline: none;
    caret-color: transparent;
    width: fit-content; 
    min-width: 0; 
    max-width: calc(100% - 40px);
    border-right: 10px solid #0f0;
    animation: blink 0.8s step-end infinite;
    padding: 0;
    vertical-align: baseline;
    text-shadow: inherit;
}
*/

/* Стили для симуляции ввода */
#typed-text {
    /* Наследует стили от #terminal-body */
    white-space: pre; /* Чтобы пробелы отображались */
}

#cursor-span {
    background-color: #0f0;
    color: #0f0; /* Цвет символа внутри блока, чтобы он не был виден */
    animation: blink 0.8s step-end infinite;
    margin-left: 1px; /* Небольшой отступ */
    /* display: inline-block; */ /* Возможно, понадобится */
    /* user-select: none; */ /* Чтобы нельзя было выделить */
}

/* Анимация мигания курсора */
@keyframes blink {
    from, to { background-color: transparent; color: transparent; }
    50% { background-color: #0f0; color: #0f0; }
}

/* Анимация тряски при ошибке (теперь на #terminal) */
#terminal.shake {
    animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ===== СТИЛИ СКРОЛЛБАРА ДЛЯ ТЕРМИНАЛА (СКРЫТЫЙ) ===== */

/* Для Firefox */
#terminal-body {
    scrollbar-width: none; /* Полностью скрываем */
    /* scrollbar-color: #0f0 #000; */ /* Больше не нужно */
}

/* Для WebKit-браузеров (Chrome, Safari, Edge) */
#terminal-body::-webkit-scrollbar {
    display: none; /* Полностью скрываем */
    /* width: 3px; */ /* Больше не нужно */
}

/* Остальные правила для ::-webkit-scrollbar-* можно удалить или оставить, 
   они уже не будут применяться, так как сам скроллбар скрыт */
/*
#terminal-body::-webkit-scrollbar-track { ... }
#terminal-body::-webkit-scrollbar-thumb { ... }
#terminal-body::-webkit-scrollbar-thumb:hover { ... }
#terminal-body::-webkit-scrollbar-button { ... }
*/


#boot-log {
    margin: 0;
    padding: 0;
    white-space: pre-wrap;
    word-break: break-all;
    /* line-height: 1.4; */ /* Убрали отсюда, задаем для #terminal-body */
    position: relative;
    z-index: 2;
}

#boot-log .ok {
    color: #6f6;
    text-shadow: 0 0 5px #6f6;
}
#boot-log .fail {
    color: #f66;
    text-shadow: 0 0 5px #f66;
}
#boot-log .info {
    color: #aaa;
    text-shadow: none;
}

#terminal {
    margin-top: 5px;
    position: relative; /* Чтобы был над scanlines */
    z-index: 2;
}

.prompt {
    margin-right: 8px;
    text-shadow: inherit;
}

/* Добавляем стили для логотипа */
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px; /* Сохраняем высоту */
    border: 1px solid green; /* Оставляем рамку */
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
    perspective: 500px; /* Добавляем перспективу для 3D */
}

.spinning-logo {
    display: block;
    width: 72px;  /* Стандартный размер (JS его меняет) */
    height: 72px; /* Стандартный размер (JS его меняет) */
    animation: spin-simple 8s infinite linear;
    background: none; 
    fill: #0f0 !important; 
    /* Делаем неинтерактивным */
    pointer-events: none; /* Игнорирует события мыши */
    user-select: none; /* Запрещает выделение */
    -webkit-user-drag: none; /* Запрещает перетаскивание в WebKit */
}

/* Изменяем анимацию на вращение по Y */
@keyframes spin-simple {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

/* ===== АНИМАЦИИ ПОМЕХ ===== */

/* Новые keyframes */
@keyframes interrupt {
  0%, 100% { opacity: 1; }
  30%, 60% { opacity: 0.2; }
}

@keyframes pixelate {
  0%, 100% { filter: blur(0px); }
  50% { filter: blur(8px); } /* Увеличено размытие */
}

@keyframes jump {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(5px, -3px); } /* Увеличено смещение */
  50% { transform: translate(-4px, 4px); } /* Увеличено смещение */
  75% { transform: translate(3px, 2px); } /* Увеличено смещение */
}

/* Новые классы для эффектов */
/* Эффект 1 (для лого 3): Прерывание + Легкий скачок */
.glitch-effect-interrupt-jump {
    /* Применяем две анимации одновременно поверх основной */
    animation: 
        spin-simple 8s infinite linear, 
        interrupt 0.15s infinite steps(1, end),
        jump 0.2s infinite linear;
}

/* Эффект 2 (для лого 5): Пикселизация + Прерывание */
.glitch-effect-pixelate-interrupt {
    animation: 
        spin-simple 8s infinite linear, 
        pixelate 0.2s infinite linear, /* Ускорим пикселизацию */
        interrupt 0.25s infinite steps(1, end);
    image-rendering: pixelated;
}

/* Эффект 3 (для лого 10): Сильный скачок + Прерывание */
.glitch-effect-strong-jump {
    animation: 
        spin-simple 8s infinite linear, 
        jump 0.08s infinite linear, /* Еще быстрее скачок */
        interrupt 0.08s infinite steps(1, start);
}

/* НОВЫЙ КЛАСС: Только пикселизация */
.glitch-effect-pixelate-only {
    animation:
        spin-simple 8s infinite linear,
        pixelate 0.2s infinite linear; /* Только пикселизация */
    image-rendering: pixelated; /* Сохраняем */
}

@keyframes scan {
    0% {
        /* Оставил пустым */
    }
    100% {
        height: 100%;
        width: 100%;
    }
}

/* Стиль для эффекта мигания всего сайта */
body.site-flash-blackout {
    background: #000 !important; /* Полностью черный фон */
    opacity: 0; /* Скрываем все содержимое */
    transition: opacity 0.05s linear, background 0.05s linear; /* Очень быстрая анимация */
}

/* ----- НОВЫЕ СТИЛИ ДЛЯ ИНТЕНСИВНЫХ ГЛИТЧЕЙ ----- */

/* Глитч для логотипа во время прогресс-бара */
@keyframes heavy-glitch-combo {
  0%, 100% { transform: rotateY(0deg) translate(0, 0); opacity: 1; filter: none; }
  10% { transform: rotateY(15deg) translate(-3px, 2px); opacity: 0.6; filter: blur(1px); }
  20% { transform: rotateY(-10deg) translate(2px, -1px); opacity: 1; }
  30% { transform: rotateY(5deg) translate(0, 0); opacity: 0.3; }
  40% { transform: rotateY(0deg) translate(4px, 1px); opacity: 0.8; filter: contrast(200%); }
  50% { transform: rotateY(-20deg) translate(-2px, -2px); opacity: 1; filter: none; }
  60% { transform: rotateY(10deg) translate(1px, 3px); opacity: 0.5; }
  70% { transform: rotateY(0deg) translate(0, 0); opacity: 1; filter: blur(0.5px); }
  80% { transform: rotateY(180deg) translate(-3px, 0); opacity: 0.7; }
  90% { transform: rotateY(190deg) translate(2px, 1px); opacity: 1; filter: contrast(50%); }
}

.spinning-logo.heavy-glitch-effect {
  /* Применяем только глитч-анимацию, переопределяя spin-simple */
  animation: heavy-glitch-combo 0.5s infinite linear !important; 
}

/* Глитч для visual1 во время прогресс-бара */
@keyframes visual-glitch-combo {
  0%, 100% { opacity: 1; filter: none; transform: skewX(0deg); }
  15% { opacity: 0.4; filter: contrast(300%); transform: skewX(-5deg); }
  30% { opacity: 1; transform: skewX(0deg); }
  45% { opacity: 0.2; transform: translateX(-4px) skewX(8deg); }
  60% { opacity: 1; transform: translateX(0) skewX(0deg); }
  75% { opacity: 0.6; filter: brightness(150%) contrast(50%); transform: skewX(-3deg); }
  90% { opacity: 1; transform: translateX(2px) skewX(0deg); }
}

.visual1.visual-glitch-effect {
  /* Изменяем длительность и timing function для отличия */
  animation: visual-glitch-combo 0.4s infinite steps(4, end) !important; 
}

/* Можно добавить глитч для скан-линий visual1 */
.visual1.visual-glitch-effect::before,
.visual1.visual-glitch-effect::after {
   animation-duration: 0.1s !important; /* Ускоряем сканирование */
   opacity: 0.6;
}

/* Класс для скрытия текста справа */
#right-column-text-container.text-fade-out {
    opacity: 0;
    transition: opacity 0.5s linear;
}

/* --------------------------------------------- */

@keyframes scan {
    0% {
        /* Оставил пустым */
    }
    100% {
        height: 100%;
        width: 100%;
    }
}