/* ============================================================================
   lines-theme.css — оформление фоновой анимации линий (тема "dragon")
   ----------------------------------------------------------------------------
   Зависимости: подключите ПЕРЕД этим файлом colors.css, в котором заданы
   переменные --lines-* (раздел 9). Все цвета/размеры берутся оттуда,
   поэтому меняйте внешний вид правкой colors.css, а не этого файла.
   ============================================================================ */

/* --- Canvas: фоновый слой во весь экран, всегда позади контента --- */
.lines-canvas {
    position: fixed;
    inset: 0;                  /* top/right/bottom/left = 0 */
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;                /* под контентом (контент → z-index >= 1) */
    background: var(--lines-bg);
}

/* Тело страницы при активной анимации: контент выше фона. */
.has-lines-bg {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}


/* ============================================================================
   КНОПКИ УПРАВЛЕНИЯ (правый верхний угол)
   Символы: пауза ❚❚, плей ▶, повтор ↻ — без текста, только иконки.
   Цвет иконок = var(--lines-color) (та же переменная, что у линий).
   ============================================================================ */
.lines-controls {
    position: fixed;
    top: var(--lines-btn-offset-top);
    right: var(--lines-btn-offset-right);
    z-index: 10;               /* выше canvas, ниже модалок при необходимости */
    display: flex;
    gap: var(--lines-btn-gap);
}

.lines-btn {
    /* Геометрия берётся из colors.css */
    width: var(--lines-btn-size);
    height: var(--lines-btn-size);
    border-radius: var(--lines-btn-radius);
    /* Цветовая схема кнопок */
    background: var(--lines-btn-bg);
    border: 1px solid var(--lines-btn-border);
    color: var(--lines-btn-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Иконка (SVG внутри кнопки) */
    font-size: var(--lines-btn-icon-size);
    line-height: 1;
    /* Плавность */
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.lines-btn:hover {
    background: var(--lines-btn-bg-hover);
    color: var(--lines-btn-color-hover);
    border-color: var(--lines-btn-color);
}

.lines-btn:active {
    transform: scale(.94);
}

.lines-btn:focus-visible {
    outline: 2px solid var(--lines-btn-color);
    outline-offset: 2px;
}

/* SVG-иконки наследуют currentColor → рисуются цветом --lines-color */
.lines-btn svg {
    width: var(--lines-btn-icon-size);
    height: var(--lines-btn-icon-size);
    fill: currentColor;
    pointer-events: none;
}

/* Когда анимация на паузе — кнопка показывает "плей". */
.lines-btn[data-state="playing"] .lines-btn__icon--play  { display: none; }
.lines-btn[data-state="paused"]  .lines-btn__icon--pause { display: none; }


/* ============================================================================
   ДЕМО-КОНТЕНТ
   Классы ниже нужны только для демо-страницы demo.php. На реальных страницах
   сайта их не используйте — это просто пример контента поверх фона.
   ============================================================================ */
.lines-demo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-main);
    font-family: system-ui, "Segoe UI", Roboto, Ubuntu, sans-serif;
}

.lines-demo__card {
    background: var(--overlay-medium);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    padding: 40px 48px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 30px 80px var(--shadow-dark);
    min-width: 320px;
    max-width: 90vw;
}

.lines-demo__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--text-main);
}

.lines-demo__subtitle {
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--text-movie-desc);
}

.lines-demo__hint {
    margin-top: 18px;
    font-size: 11px;
    color: var(--text-muted);
}


/* ============================================================================
   АДАПТИВ (мобильные)
   На маленьких экранах кнопки чуть меньше, чтобы не перекрывали шапку.
   ============================================================================ */
@media (max-width: 600px) {
    :root {
        --lines-btn-size: 36px;
        --lines-btn-icon-size: 16px;
        --lines-btn-offset-top: 12px;
        --lines-btn-offset-right: 12px;
    }
}

/* Уважаем системную настройку «уменьшить движение»: кнопки оставляем
   (пользователь может запустить вручную), но изначально рендерим статичный
   кадр — это обрабатывается в JS через prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .lines-btn { transition: none; }
}