/* ==========================================================================
   1. Base Styles & Reset
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
    background-color: #000;
    color: #ccc; 
    font-family: 'Share Tech Mono', monospace; 
    background-image: url('img/concrete.png');    
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 2rem;
    position: relative;
}

/* Noise overlay effect */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/noise.gif');
    opacity: 0.2;
    z-index: -1;
    pointer-events: none;
}

/* ==========================================================================
   2. Typography (Headings & Text)
   ========================================================================== */

h1, h2 {
    font-family: 'VT323', monospace;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 2.5rem;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    margin-bottom: 30px;
    position: relative;
    transition: color 0.3s ease;
}

h2 {
    font-size: 1.5rem;
    letter-spacing: 3px;
}

p {
    font-size: 1.1rem;
    line-height: 1.6;
    text-shadow: 0 0 2px rgba(204, 204, 204, 0.3);
}

a {
    color: #715c77;
    text-decoration: none;
    background: none;
    transition: color 0.3s ease, background-color 0.3s ease;
}

a:hover {
    color: #000;
    background-color: #fbfcfc;
}

/* ==========================================================================
   3. Main Content (Player Block)
   ========================================================================== */

main {
    width: 100%;
    max-width: 700px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid #444;
    border-image: linear-gradient(to right, #333, #666) 1;
    padding: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
}

.track {
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}

/* NEW: Styles for the track title and link container */
.track-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Separator line between tracks */
.track:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 90%;
    height: 1px;
    background-image: linear-gradient(to right, #fcf5f5 50%, transparent 50%);
    background-size: 8px 1px;
}

/* Decorative corners for the main block */
.corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: #ff0000;
    border-style: solid;
}
.corner-tl { top: -2px; left: -2px; border-width: 3px 0 0 3px; }
.corner-tr { top: -2px; right: -2px; border-width: 3px 3px 0 0; }
.corner-bl { bottom: -2px; left: -2px; border-width: 0 0 3px 3px; }
.corner-br { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; }

/* ==========================================================================
   4. Audio Player Styling
   ========================================================================== */

audio {
    width: 100%;
    height: 40px;
    margin-top: 10px;
    filter: grayscale(100%) contrast(150%) brightness(85%);
    border-radius: 0;
    transition: filter 0.3s ease;
}

audio:hover {
    filter: grayscale(80%) contrast(160%) brightness(100%);
}

audio:focus {
    outline: none;
}

/* Fix for player corners in Chrome/WebKit */
audio::-webkit-media-controls-enclosure {
    border-radius: 0 !important;
    background-color: #e60707 !important;
}
audio::-webkit-media-controls-panel {
    border-radius: 0 !important;
    background-color: #ece9e9 !important;
}

/* ==========================================================================
   5. Animations & Effects
   ========================================================================== */

/* --- A. Constant Glitch for H1 (Sharper version) --- */
h1 {
    animation: constant-glitch 3.5s infinite;
}

h1::before,
h1::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

h1::before {
    left: 2px;
    text-shadow: -2px 0 #ff00de; /* Magenta */
    animation: constant-glitch-clip 3.5s infinite; 
}

h1::after {
    left: -2px;
    text-shadow: -2px 0 #00aaff; /* Cyan */
    animation: constant-glitch-clip-2 3.5s infinite;
}

@keyframes constant-glitch {
  0%, 97% { transform: translate(0, 0); }
  98% { transform: translate(-8px, 2px) skewX(-20deg); }
  99% { transform: translate(6px, -3px); }
  100% { transform: translate(0, 0); }
}

@keyframes constant-glitch-clip {
    0%, 97% { clip-path: inset(50% 0 50% 0); }
    98% { clip-path: inset(15% 0 60% 0); }
    99% { clip-path: inset(75% 0 5% 0); }
    100% { clip-path: inset(50% 0 50% 0); }
}

@keyframes constant-glitch-clip-2 {
    0%, 98% { clip-path: inset(50% 0 50% 0); }
    99% { clip-path: inset(5% 0 88% 0); }
    100% { clip-path: inset(50% 0 50% 0); }
}

/* --- B. Hover Glitch for H2 --- */
h2:hover {
    color: #b60101;
}

h2:hover::before,
h2:hover::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

h2:hover::before {
    left: 2px;
    text-shadow: -1px 0 #00aaff;
    animation: glitch-anim 2s infinite linear alternate-reverse;
}

h2:hover::after {
    left: -2px;
    text-shadow: -1px 0 #ff00de;
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip-path: inset(45% 0 50% 0); }
    20% { clip-path: inset(10% 0 85% 0); }
    40% { clip-path: inset(70% 0 10% 0); }
    60% { clip-path: inset(90% 0 5% 0); }
    80% { clip-path: inset(40% 0 45% 0); }
    100% { clip-path: inset(60% 0 30% 0); }
}

@keyframes glitch-anim-2 {
    0% { clip-path: inset(80% 0 10% 0); }
    20% { clip-path: inset(25% 0 70% 0); }
    40% { clip-path: inset(5% 0 90% 0); }
    60% { clip-path: inset(65% 0 20% 0); }
    80% { clip-path: inset(15% 0 75% 0); }
    100% { clip-path: inset(55% 0 35% 0); }
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

footer {
    margin-top: 40px;
    font-size: 0.8em;
    color: #666;
}

/* ==========================================================================
   7. Marquee (Бегущая строка)
   ========================================================================== */

.marquee {
    position: fixed; /* Фиксируем на экране */
    left: 0;
    width: 100%;
    background-color: #111;
    border-color: #444;
    border-style: solid;
    border-width: 1px 0;
    padding: 5px 0;
    overflow: hidden; /* Скрываем все, что выходит за пределы */
    white-space: nowrap; /* Запрещаем тексту переноситься на новую строку */
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    color: #888;
    z-index: 100; /* Помещаем поверх всего остального контента */
}

/* Расположение верхней и нижней строки */
.marquee-top {
    top: 0;
}
.marquee-bottom {
    bottom: 0;
}

/* Контейнер для текста, который будет анимироваться */
.marquee-content {
    display: inline-block; /* Чтобы анимация работала корректно */
    padding-left: 100%; /* Начинаем анимацию за пределами экрана */
    animation: marquee-scroll 40s linear infinite;
}

/* Разная скорость и направление для нижней строки */
.marquee-bottom .marquee-content {
    animation-duration: 45s; /* Чуть медленнее */
    animation-direction: reverse; /* В другую сторону */
}

/* Сама анимация прокрутки */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%); /* Двигаем влево на всю свою ширину */
    }
}

/* ==========================================================================
   8. UI Enhancements (Cursor & Scrollbar)
   ========================================================================== */

/* --- Кастомный курсор --- */
html {
    cursor: crosshair; /* Заменяем стандартную стрелку на крестик-прицел */
}

/* Для ссылок и кнопок можно вернуть "указатель", но тоже стилизованный */
a, button, audio {
    cursor: cell; /* Выглядит как более толстый крестик, хорошо для кликабельных элементов */
}


/* --- Кастомный скроллбар для Chrome/Safari/Edge --- */

/* Ширина и фон всей полосы прокрутки */
::-webkit-scrollbar {
    width: 10px;
    background-color: #111;
}

/* Сам бегунок (ползунок) */
::-webkit-scrollbar-thumb {
    background-color: #ff000000; /* Яркий красный акцент */
    border: 2px solid #111; /* Рамка в цвет фона, чтобы сделать бегунок тоньше */
    border-radius: 0; /* Убираем скругление */
}

/* Кнопки "вверх" и "вниз" на скроллбаре (мы их скроем) */
::-webkit-scrollbar-button {
    display: none;
}

body::before { /* Используем псевдоэлемент ::before, т.к. ::after уже занят шумом */
    content: "";
    position: fixed; /* Фиксируем на экране */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Магия градиента: создаем повторяющийся паттерн из черной линии и прозрачной области */
    background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.3) 0,       /* Начало черной линии (непрозрачность 0.3) */
        rgba(0, 0, 0, 0.3) 1px,    /* Конец черной линии (толщина 1px) */
        transparent 1px,           /* Начало прозрачной области */
        transparent 3px            /* Конец прозрачной области (высота 2px) */
    );
    background-size: 100% 3px; /* Размер одного паттерна (линия + пустота) = 3px */
    
    z-index: 101; /* Помещаем НАД всем, включая бегущие строки (у них z-index 100) */
    pointer-events: none; /* Слой не будет мешать кликать по элементам под ним */
}