/* Сброс стилей и базовые настройки */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: #000; /* Простой черный фон на случай, если WebGL не загрузится */
    font-family: 'Exo 2', sans-serif;
    color: #c0c0ff;

    /* Отключаем выделение текста для всех браузеров, включая мобильные */
    -webkit-user-select: none; /* Safari, Chrome, Opera, Android, iOS */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Стандартное свойство */

    /* Дополнительно отключаем контекстное меню (Копировать/Вставить) на iOS */
    -webkit-touch-callout: none;
}

/* Стили для WebGL-фона */
#webgl-canvas {
    position: fixed;
    top: 0;
    left: 0;
    outline: none;
    z-index: 1; /* Размещаем под контентом */
}

/* Основной контент */
.content {
    position: relative;
    z-index: 2; /* Размещаем над фоном */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
}

/* Glitch эффект для заголовка */
.glitch-wrapper { position: relative; }

.glitch {
    font-size: 4rem;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
    position: relative;
    letter-spacing: 0.05em;
}
.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}
.glitch::before {
    left: 3px;
    text-shadow: -2px 0 #fc004c;
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
}
.glitch::after {
    left: -3px;
    text-shadow: -2px 0 #00fffc;
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}
@keyframes glitch-anim-1{0%{clip-path:polygon(0 0,100% 0,100% 45%,0 45%)}10%{clip-path:polygon(0 25%,100% 25%,100% 30%,0 30%)}20%{clip-path:polygon(0 50%,100% 50%,100% 50%,0 50%)}30%{clip-path:polygon(0 70%,100% 70%,100% 65%,0 65%)}40%{clip-path:polygon(0 90%,100% 90%,100% 95%,0 95%)}50%{clip-path:polygon(0 40%,100% 40%,100% 42%,0 42%)}60%{clip-path:polygon(0 15%,100% 15%,100% 20%,0 20%)}70%{clip-path:polygon(0 0,100% 0,100% 5%,0 5%)}80%{clip-path:polygon(0 80%,100% 80%,100% 85%,0 85%)}90%{clip-path:polygon(0 55%,100% 55%,100% 50%,0 50%)}100%{clip-path:polygon(0 5%,100% 5%,100% 10%,0 10%)}}
@keyframes glitch-anim-2{0%{clip-path:polygon(0 100%,100% 100%,100% 55%,0 55%)}10%{clip-path:polygon(0 75%,100% 75%,100% 70%,0 70%)}20%{clip-path:polygon(0 50%,100% 50%,100% 50%,0 50%)}30%{clip-path:polygon(0 30%,100% 30%,100% 35%,0 35%)}40%{clip-path:polygon(0 10%,100% 10%,100% 5%,0 5%)}50%{clip-path:polygon(0 60%,100% 60%,100% 58%,0 58%)}60%{clip-path:polygon(0 85%,100% 85%,100% 80%,0 80%)}70%{clip-path:polygon(0 100%,100% 100%,100% 95%,0 95%)}80%{clip-path:polygon(0 20%,100% 20%,100% 15%,0 15%)}90%{clip-path:polygon(0 45%,100% 45%,100% 50%,0 50%)}100%{clip-path:polygon(0 95%,100% 95%,100% 90%,0 90%)}}

/* Подзаголовок и курсор */
.subtitle {
    font-size: 1.5rem;
    font-weight: 300;
    margin-top: 1rem;
    letter-spacing: 2px;
    height: 3em;
    color: #c0c0ff;
}
.typed-cursor {
    color: #c0c0ff;
    animation: blink 0.7s infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Ссылка на контакт */
.contact-link {
    margin-top: 2.5rem;
    padding: 12px 25px;
    border: 1px solid #c0c0ff;
    border-radius: 5px;
    color: #c0c0ff;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.contact-link:hover {
    background-color: rgba(192, 192, 255, 0.1);
    color: #fff;
    box-shadow: 0 0 15px rgba(192, 192, 255, 0.5);
}

/* Адаптивность */
@media (max-width: 768px) {
    .glitch { font-size: 2.5rem; }
    .subtitle { font-size: 1rem; }
}