html, body, div, h1, p, a { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    background-color: #121212; /* Базовый темный цвет */
    
    /* Создаем сетку из точек: точка размером 1px цвета #1d1d1d, остальное — прозрачное */
    background-image: radial-gradient(#1d1d1d 1px, transparent 1px);
    
    /* Задаем шаг сетки (расстояние между точками) — 16px на 16px */
    background-size: 16px 16px; 
    
    color: #171717;
    font-family: monospace;
    
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative; 
    overflow: hidden; 
}


.welcome-container {
    text-align: center;
}

/* ЭФФЕКТЫ 1: --- ПЕРЕЛИВАЮЩИЙСЯ ГРАДИЕНТ --- */
/* --- СТИЛИ ТОЛЬКО ДЛЯ ГЛАВНОЙ СТРАНИЦЫ --- */
/* Говорим CSS: применяй этот градиент к h1 ТОЛЬКО внутри класса .main-page */
.main-page h1 {
    font-size: 3rem;
    letter-spacing: 5px;
    margin-bottom: 15px;
    text-transform: lowercase;
    position: relative;

    background: linear-gradient(45deg, #ff007f, #7f00ff, #00f0ff, #ff007f); /* Твои цвета для davian */
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 4s ease infinite;
}



/* Описание анимации движения градиента */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; } 
}

.main-page p {
    font-size: 1.2rem;
    background: linear-gradient(45deg, #ff007f, #7f00ff, #00f0ff, #ff007f); 
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 4s ease infinite;
}

/* --- СКРЫТАЯ ПАСХАЛКА В ЛЕВОМ НИЖНЕМ УГЛУ "?"--- */
.secret-trigger {
    position: absolute;
    bottom: 20px;       /* Отступ от нижнего края */
    left: 20px;         /* Отступ от левого края */
    color: #FFFFFF;     /* Цвет почти сливается с фоном #121212 */
    text-decoration: none;
    font-size: 16px;
    cursor: default;    /* Курсор не превращается в "руку", чтобы не выдавать ссылку */
    transition: color 0.3s ease;
}

/* При наведении точка станет чуть заметнее — подсказка для сыщиков */
.secret-trigger:hover {
    color: #555555;     
}

/* Стиль для текста-подсказки лора */
.lore-hint {
    margin-top: 20px;
    font-size: 0.9rem;
    color: #181818 !important; /* Очень темный серый, чтобы текст читали только внимательные */
    font-style: italic;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

/* Кнопка возврата на главную со страницы 404 */
.back-to-safety {
    display: inline-block;
    margin-top: 40px;
    color: #555555;
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.back-to-safety:hover {
    color: #ff0033; /* При наведении подсветится тревожным красным */
}



/* --- СТИЛИ ТОЛЬКО ДЛЯ СТРАНИЦЫ ОШИБКИ --- */
/* СЕРЫЙ градиент ТОЛЬКО для заголовка ошибки */

.error-page h1 {
    font-size: 3rem;
    letter-spacing: 5px;
    margin-bottom: 15px;
    background: linear-gradient(45deg, #FFFFFF, #BDC3C7, #ECF0F1);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 6s ease infinite;
}

/* Обычный серый текст для описания ошибки (без градиента!) */
.error-page p {
    font-size: 1.2rem;
    color: #FFFFFF; /* Просто серый цвет, чтобы легко читалось */
    background: none; /* Сбрасываем любые градиенты */
    -webkit-text-fill-color: initial; /* Возвращаем обычный цвет букв */
}

/* Контейнер для ввода */
.password-box {
    margin-top: 25px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* Кастомное поле ввода */
#passwordInput {
    background-color: #1a1a1a;
    border: 1px solid #333333;
    color: #FFFFFF; /* Зеленый текст хакера */
    padding: 10px 15px;
    font-family: monospace;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

#passwordInput:focus {
    border-color: #666666; /* Подсветка при клике */
}

/* Кнопка */
.password-box button {
    background-color: #808080;
    color: white;
    border: none;
    padding: 10px 20px;
    font-family: monospace;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.password-box button:hover {
    opacity: 0.8;
}

/* Текст подсказки об ошибке кода */
.error-hint {
    margin-top: 15px;
    font-size: 0.9rem;
    min-height: 20px; /* Чтобы текст не двигал экран при появлении */
}


/* --- СТИЛИ ДЛЯ СЕКРЕТНОЙ СТРАНИЦЫ SECRET.HTML --- */

/* Заголовок в стиле твоего бренда */
.secret-page h1 {
    font-size: 2.5rem;
    letter-spacing: 4px;
    margin-bottom: 10px;
    background: linear-gradient(45deg, #ff007f, #7f00ff, #00f0ff, #ff007f);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 6s ease infinite;
}

/* Текст подзаголовка */
.secret-subtitle {
    font-size: 1rem;
    color: #666666;
    margin-bottom: 40px;
    background: none;
    -webkit-text-fill-color: initial;
}

/* Блок-карточка для контента */
.download-card {
    background-color: #161616; /* Чуть светлее общего фона, чтобы выделиться */
    border: 1px solid #252525;
    padding: 30px;
    border-radius: 4px;
    max-width: 400px;
    margin: 0 auto 30px auto; /* Центруем карточку */
}

.download-card h3 {
    font-size: 1.2rem;
    letter-spacing: 2px;
    color: #ffffff;
    margin-bottom: 10px;
}

.download-card p {
    font-size: 0.9rem;
    color: #888888;
    margin-bottom: 25px;
    background: none;
    -webkit-text-fill-color: initial;
}

/* Кнопка скачивания */
.download-btn {
    display: inline-block;
    padding: 12px 24px;
    color: #00f0ff; /* Цвет одного из акцентов бренда */
    border: 1px solid #00f0ff;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* Эффект при наведении на кнопку */
.download-btn:hover {
    background-color: #00f0ff;
    color: #121212; /* Текст становится темным на светящемся фоне */
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.4); /* Мягкое неоновое свечение */
}

/* Ссылка возврата на главную */
.back-link {
    display: inline-block;
    color: #555555;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.back-link:hover {
    color: #ffffff;
}


/* --- СТИЛИ ДЛЯ АУДИОПЛЕЕРА --- */

.audio-preview {
    margin-bottom: 25px;
    text-align: left; /* Выравниваем название трека по левому краю внутри карточки */
}

/* Маленькая надпись над плеером */
.player-label {
    display: block;
    font-size: 0.8rem;
    color: #555555;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

/* Полная перекраска стандартного плеера для браузеров на базе Chrome (Chrome, Edge, Opera) */
audio {
    width: 100%;
    height: 40px;
    outline: none;
    display: block;
}

/* Магия CSS: забираемся внутрь стандартного плеера и перекрашиваем его панель */
audio::-webkit-media-controls-enclosure {
    background-color: #1c1c1c; /* Темный фон плеера */
    border: 1px solid #2d2d2d;
    border-radius: 0px; /* Убираем круглые углы, делаем строгую форму */
}

/* Перекрашиваем текст времени и кнопки управления */
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
    color: #ffffff;
    font-family: monospace;
}

/* Если хочешь, чтобы кнопка Play и иконки были в цвете твоего бренда, мы добавим им легкий оттенок */
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-mute-button {
    background-color: #555555;
    border-radius: 50%;
}

/* Уменьшаем кнопку воспроизведения (Play/Pause) */
audio::-webkit-media-controls-play-button {
    transform: scale(0.85) translateX(-3px); /* 1.0 — исходный размер, 0.85 — меньше на 15% */
}

/* Уменьшаем кнопку управления звуком (Mute) */
audio::-webkit-media-controls-mute-button {
    transform: scale(0.85);
}

/* Если на кнопке «три точки» (меню) тоже нужно уменьшить размер */
audio::-webkit-media-controls-panel-menu-button {
    transform: scale(0.85);
}


/* --- АНИМАЦИЯ ПЛАВНОГО ПОЯВЛЕНИЯ (FADE-IN) --- ВСТАВЛЯЙ В КОРОБКУ В КАЖДЫЙ НОВЫЙ РАЗДЕЛ САЙТА*/

/* Описываем саму анимацию: от полной прозрачности и легкого сдвига вниз к нормальному состоянию */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px); /* Текст плавно "поднимется" на 15 пикселей */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Создаем класс, который запускает эту анимацию */
.fade-in-element {
    animation: fadeInUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    /* cubic-bezier делает движение кинематографичным: быстрый старт и плавное замедление */
}



/* Отступ для коробки плеера, чтобы она не была впритык */
.audio-spacing {
    margin-top: 20px;
    margin-bottom: 30px; /* Делаем зазор до кнопки скачивания */
}

/* Стили для терминальной панели внизу карточки */
.terminal-stats {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px dashed #252525; /* Аккуратная пунктирная линия разделения */
    text-align: left;
    font-size: 0.8rem;
    color: #555555; /* Приглушенный цвет */
}

.stat-line {
    margin-bottom: 5px;
    letter-spacing: 1px;
}

/* Подсветим динамические данные цветом твоего бренда (например, цианом) */
.terminal-stats span {
    color: #00f0ff; 
    font-weight: bold;
}


/* --- СТИЛИ ДЛЯ КНОПКИ SOUNDCLOUD --- */

/* Контейнер-панель, который дает жирный отступ сверху от текста */
.links-panel {
    margin-top: 50px; /* Раздвигаем пространство, чтобы кнопка не липла к тексту */
    display: flex;
    gap: 30px;
    justify-content: center;
}

/* Дизайн самой кнопки */
.sc-button {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Расстояние между иконкой и текстом "soundcloud" */
    
    padding: 10px 20px;
    color: #555555; /* По умолчанию приглушенный серый */
    border: 1px solid #252525; /* Тонкая строгая рамка */
    text-decoration: none;
    font-family: monospace;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: lowercase;
    transition: all 0.3s ease;
}

/* Иконка внутри кнопки (сделаем её чуть крупнее текста) */
.sc-button i {
    font-size: 1.1rem;
}

/* Эффект при наведении курсора */
.sc-button:hover {
    color: #ff5500; /* Фирменный оранжевый цвет SoundCloud */
    border-color: #ff5500; /* Рамка тоже красится в оранжевый */
    box-shadow: 0 0 15px rgba(255, 85, 0, 0.2); /* Мягкое оранжевое свечение */
    transform: translateY(-2px); /* Кнопка слегка приподнимается при наведении */
}

/* Настройки для файла иконки */
.main-page .sc-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    
    /* Исправленный фильтр: делает черную иконку точно такой же серой, как и текст кнопки */
    filter: brightness(0) saturate(100%) invert(35%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
    opacity: 0.7; /* Легкая прозрачность, чтобы она идеально гармонировала с текстом */
    transition: all 0.3s ease;
}

/* При наведении на кнопку — иконка становится ярко-оранжевой */
.main-page .sc-button:hover .sc-icon {
    filter: brightness(0) saturate(100%) invert(44%) sepia(91%) saturate(3681%) hue-rotate(360deg) brightness(101%) contrast(105%);
    opacity: 1;
}



/* --- СТИЛИ ДЛЯ КНОПКИ INSTAGRAM --- */

/* Сама ссылка инстаграма: цвет и рамка теперь 1-в-1 как у SoundCloud */
.main-page .ig-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    color: #555555; /* Ровный приглушенный серый */
    border: 1px solid #252525; /* Строгая тонкая рамка */
    text-decoration: none;
    font-family: monospace;
    font-size: 1rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* Настройки для иконки Инстаграма в покое */
.main-page .ig-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    filter: brightness(0) saturate(100%) invert(35%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Эффект при наведении на кнопку (вспыхивает фирменным малиновым неоном) */
.main-page .ig-button:hover {
    color: #e1306c; /* Официальный цвет Instagram */
    border-color: #e1306c;
    box-shadow: 0 0 15px rgba(225, 48, 108, 0.4); /* Мягкое свечение вокруг */
    transform: translateY(-2px); /* Кнопка слегка приподнимается */
}

/* Красим саму иконку фотоаппарата при наведении в малиновый */
.main-page .ig-button:hover .ig-icon {
    filter: brightness(0) saturate(100%) invert(34%) sepia(87%) saturate(2975%) hue-rotate(323deg) brightness(91%) contrast(92%);
    opacity: 1;
}


  
/* --- СТИЛИ ДЛЯ КОНСОЛИ ЛОРА --- */
.lore-console {
    margin-top: 60px; /* Жирный отступ от пульта соцсетей */
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

/* Стилизуем строку ввода под минималистичный терминал */
#consoleInput {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px dashed #252525; /* Пунктирная линия в покое */
    color: #555555;
    font-family: monospace;
    font-size: 0.85rem;
    text-align: center;
    outline: none;
    padding-bottom: 8px;
    transition: all 0.3s ease;
}

/* Когда пользователь кликает в консоль — она мягко вспыхивает бирюзовым цветом бренда */
#consoleInput:focus {
    border-color: #00f0ff; 
    color: #ffffff;
    text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
}

/* Стили для ответов консоли */
.console-response {
    margin-top: 15px;
    font-size: 0.8rem;
    color: #7f00ff; /* Ответы горят загадочным фиолетовым неоном */
    min-height: 20px; /* Защита от дергания экрана */
    letter-spacing: 0.5px;
    font-family: monospace;
}




/* --- СТИЛИ ДЛЯ НЕОНОВОЙ ЛИНИИ --- */
.main-page .neon-line {
    width: 360px;           /* Делаем её аккуратной и не на весь экран */
    height: 1px;            /* Ультра-тонкая линия */
    margin: 40px auto 0 auto; /* Центруем её и даем отступы: 40px сверху от кнопок */
    
    /* Заливаем линию градиентом в цветах твоего имени */
    background: linear-gradient(90deg, transparent, #00f0ff, #7f00ff, transparent);
    background-size: 200% 200%;
    
    /* Добавляем мягкое неоновое свечение */
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3), 0 0 20px rgba(127, 0, 255, 0.2);
    
    /* Запускаем бесконечное плавное переливание цветов */
    animation: gradientShift 5s ease infinite;
}