/* ============================================
   MINIMALIST PORTFOLIO - STYLE GUIDE
   ============================================ */

/* ============================================
   1. ЦВЕТОВАЯ СХЕМА И ПЕРЕМЕННЫЕ
   ============================================ */
:root {
    --bg-color: #ffffff;
    --text-color: #111;
    --border-color: #e5e5e5;
    --text-muted: #666;
    --accent-color: #6c5ce7;
    /* Muted Indigo/Violet */

    /* Активные шрифты */
    --font-header: 'JetBrains Mono', monospace;
    --font-body: 'IBM Plex Mono', monospace;

    /* Альтернативная шрифтовая пара (закомментировано) */
    /* --font-header: 'Oswald', sans-serif; */
    /* --font-body: 'Space Mono', monospace; */

    --transition-ease: 0.3s ease;
}

/* ============================================
   2. БАЗОВЫЕ СТИЛИ
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ============================================
   3. СЕКЦИИ (ОБЩАЯ СТРУКТУРА)
   ============================================ */
section {
    padding: 40px;
    display: none;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    flex: 1;
}

section.active {
    display: flex;
    flex-direction: column;
    animation: fadeIn var(--transition-ease);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============================================
   4. ГЛАВНАЯ СТРАНИЦА (HUB)
   ============================================ */

/* Контейнер Hub - центрирование по вертикали */
.hub-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex: 1;
}

/* Hero секция (заголовок и подзаголовок) */
.hero-section {
    text-align: center;
    margin-bottom: 50px;
}

/* Фото профиля */
.profile-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    font-family: var(--font-header);
    font-size: clamp(32px, 5vw, 42px);
    font-weight: 700;
    margin: 0 0 20px;
    letter-spacing: -1px;
}

.subtitle {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.4;
    /* Подчёркивание сверху и снизу — тонкое и приглушённое */
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 6px 0;
    display: inline-block;
}

/* Сетка навигации - ВАЖНО: квадраты через aspect-ratio */
.grid-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    width: 100%;
}

/* Карточки навигации - КВАДРАТНЫЕ через aspect-ratio */
.nav-card {
    border: 1px solid var(--border-color);
    padding: 25px;
    text-decoration: none;
    color: var(--text-color);
    transition: all var(--transition-ease);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    aspect-ratio: 1 / 1;
    /* ГАРАНТИРУЕТ КВАДРАТНОСТЬ */
    width: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.nav-card:hover {
    border-color: var(--text-color);
    transform: translateY(-5px);
}

/* Номер карточки */
.card-number {
    font-family: var(--font-header);
    font-size: 12px;
    color: var(--text-muted);
}

/* Заголовок карточки */
.card-title {
    font-family: var(--font-header);
    font-size: 24px;
    font-weight: 700;
    margin: 10px 0;
}

/* Описание карточки - скрыто по умолчанию */
.card-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: auto;
    opacity: 0;
    transform: translateY(5px);
    transition: all var(--transition-ease);
}

/* Описание видно при наведении */
.nav-card:hover .card-desc {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   5. НАВИГАЦИЯ В РАЗДЕЛАХ (ЦЕНТРИРОВАНИЕ ТИТЛА)
   ============================================ */

/* ВАЖНО: Абсолютное позиционирование для центрирования */
.section-nav {
    position: relative;
    margin-bottom: 60px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Кнопка "Назад" - абсолютное позиционирование */
.back-btn {
    position: absolute;
    left: 0;
    font-family: var(--font-header);
    font-size: 12px;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--text-color);
    text-transform: uppercase;
    text-decoration: none;
}

.back-btn:hover {
    color: var(--accent-color);
}

/* Кнопка "Назад" внизу длинных разделов */
.section-foot {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.section-back {
    background: none;
    border: 1px solid var(--border-color);
    padding: 12px 24px;
    font-family: var(--font-header);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    color: var(--text-color);
    transition: border-color var(--transition-ease), color var(--transition-ease);
}

.section-back:hover {
    border-color: var(--text-color);
    color: var(--accent-color);
}

/* Контакты в разделе "Обо мне" */
.about-contacts {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.about-contacts a {
    font-family: var(--font-header);
    font-size: 13px;
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 2px;
    transition: color var(--transition-ease);
}

.about-contacts a:hover {
    color: var(--accent-color);
}

/* Годы в биографии — акцентный цвет */
.about-year {
    color: var(--accent-color);
    font-family: var(--font-header);
    font-weight: 500;
}

/* Заголовок раздела - ИДЕАЛЬНО ПО ЦЕНТРУ */
.section-title {
    font-family: var(--font-header);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    /* Центрируется автоматически через justify-content: center родителя */
}

/* ============================================
   6. МУЗЫКАЛЬНАЯ СЕКЦИЯ
   ============================================ */
.music-subsection {
    margin-bottom: 2.5rem;
}

.section-intro,
.project-status {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.03em;
    line-height: 1.6;
    color: var(--text-muted);
}

.section-intro {
    margin-bottom: 3rem;
}

.project-status {
    margin-left: 8px;
    font-weight: 400;
    text-transform: none;
    color: #999;
}

.sub-header {
    font-family: var(--font-header);
    font-size: 12px;
    color: var(--text-color);
    padding-bottom: 6px;
    margin-bottom: 20px;
    text-transform: uppercase;
    /* Подчёркивание только под шириной заголовка */
    border-bottom: 1px solid var(--text-color);
    display: inline-block;
}

/* Блоки проектов - каждый в своей рамке-папочке (фон прозрачный) */
.project-item {
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px 18px;
    transition: border-color var(--transition-ease);
}

.project-item:hover {
    border-color: var(--accent-color);
}

.project-head {
    padding: 12px 0;
    /* Уменьшены отступы */
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.project-head:hover {
    color: var(--accent-color);
}

/* Треугольник-индикатор перед заголовком */
.project-title::before {
    content: '▸ ';
    font-size: 14px;
    margin-right: 8px;
    display: inline-block;
    transition: transform var(--transition-ease);
    color: var(--accent-color);
}

.project-item.active .project-title::before {
    transform: rotate(90deg);
}

.project-title {
    font-family: var(--font-header);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.project-year {
    font-family: var(--font-header);
    font-size: 11px;
    color: var(--text-muted);
}

/* Тело проекта - скрыто пока не раскрыто */
.project-body {
    display: none;
    padding: 24px;
    border-top: 1px solid var(--border-color);
    background: #fff;
}

.project-item.active .project-body {
    display: block;
}

/* Ссылки на стриминги и плейлисты */
.streaming-links,
.playlist-links {
    font-size: 14px;
    line-height: 1.8;
}

.streaming-links a,
.playlist-links a {
    color: var(--text-color);
    text-decoration: underline;
    text-decoration-color: rgba(108, 92, 231, 0.3);
    /* Subtler underline */
    text-underline-offset: 4px;
    margin-right: 15px;
    font-size: 14px;
    transition: color 0.2s ease;
}

.streaming-links a:hover,
.playlist-links a:hover {
    color: var(--accent-color);
}

/* Строки с треками */
.track-line {
    display: flex;
    flex-direction: column;
    /* Шкала под треком */
    align-items: flex-start;
    gap: 8px;
    padding: 12px 0;
}

.track-info {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.play-btn {
    background: none;
    border: 1px solid var(--text-color);
    width: 22px;
    height: 22px;
    font-size: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-wrap {
    width: 100%;
    height: 10px;
    /* Clickable area remains accessible */
    background: transparent;
    position: relative;
    margin-top: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.progress-wrap::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    /* Slightly thicker line */
    background: transparent;
    /* Removed gray background as requested */
    border-radius: 1px;
}



.progress-fill {
    height: 3px;
    /* Match the line height */
    background: var(--accent-color);
    width: 0;
    position: relative;
    border-radius: 1px;
    z-index: 1;
    /* Ensure it sits on top of the background line */
}

.video-container {
    width: 100%;
    aspect-ratio: 16/9;
    background: #eee;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ============================================
   7. ВИЗУАЛЬНАЯ СЕКЦИЯ (MASONRY)
   ============================================ */
.masonry {
    column-count: 2;
    column-gap: 20px;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 12px;
}

/* ВАЖНО: изображения цветные, без фильтров */
.masonry-item img {
    width: 100%;
    display: block;
}

/* ============================================
   8. ПОЭЗИЯ (ЦЕНТРИРОВАНИЕ)
   ============================================ */
/* Poetry - Collapsible and Centered */
.poetry-box {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 40px;
    align-items: start;
}

@media (max-width: 700px) {
    .poetry-box {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.poem {
    margin-bottom: 36px;
    /* Больше воздуха между стихами */
    padding-bottom: 24px;
    border-bottom: 0px solid var(--border-color);
}

.poem:last-child {
    border-bottom: none;
}

.poem-h {
    font-family: var(--font-header);
    font-size: 22px;
    margin-bottom: 0;
    font-weight: 700;
    cursor: pointer;
    padding: 18px 0;
    position: relative;
    text-align: center;
    letter-spacing: -0.02em;
    color: var(--text-color);
}

/* Треугольник прямо рядом с цифрой стиха */
.poem-h::before {
    content: '▾';
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-color);
    margin-right: 8px;
    display: inline-block;
    transition: transform var(--transition-ease);
}

.poem:not(.active) .poem-h::before {
    transform: rotate(-90deg);
}

.poem-body {
    display: block;
    /* Раскрыто по умолчанию */
    padding-bottom: 20px;
}

.poem:not(.active) .poem-body {
    display: none;
}

.poem-p {
    font-style: normal;
    font-weight: 500;
    line-height: 1.6;
    font-size: 17px;
    margin-top: 20px;
    text-align: center;
    white-space: pre-line;
    /* Игнорирует лишние пробелы в коде, сохраняя переносы */
    display: block;
    width: 100%;
}

.poem-d {
    font-family: var(--font-header);
    font-size: 10px;
    color: var(--text-muted);
}

/* ============================================
   9. ОБО МНЕ
   ============================================ */
.about-box {
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
    line-height: 1.7;
    font-size: 15px;
}

/* ============================================
   10. АДАПТИВНОСТЬ (МОБИЛЬНЫЕ УСТРОЙСТВА)
   ============================================ */
@media (max-width: 800px) {

    /* На мобильных - 2 колонки */
    .grid-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .nav-card {
        padding: 20px;
    }

    .card-title {
        font-size: 18px;
    }

    .hero-section {
        margin-bottom: 40px;
    }

    /* Masonry в 1 колонку на мобильных */
    .masonry {
        column-count: 1;
    }

    section {
        padding: 20px;
    }
}

/* ============================================
   11. LIGHTBOX (ГАЛЕРЕЯ)
   ============================================ */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity var(--transition-ease);
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    max-height: 90vh;
    max-width: 90vw;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* Запрет выделения при кликах */
    user-select: none;
    cursor: zoom-out;
}

/* Кнопки навигации */
.lightbox-btn {
    position: absolute;
    background: none;
    border: none;
    font-family: var(--font-header);
    font-size: 30px;
    color: var(--text-color);
    cursor: pointer;
    padding: 20px;
    z-index: 1001;
    transition: opacity var(--transition-ease);
    opacity: 0.5;
}

.lightbox-btn:hover {
    opacity: 1;
}

.lightbox-prev {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-next {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-close {
    top: 20px;
    right: 20px;
    font-size: 40px;
    line-height: 1;
}

/* Адаптив для кнопок */
@media (max-width: 600px) {
    .lightbox-btn {
        padding: 10px;
        font-size: 24px;
    }

    .lightbox-prev {
        left: 5px;
    }

    .lightbox-next {
        right: 5px;
    }
}

/* ============================================
   12. STICKY AUDIO PLAYER
   ============================================ */
.sticky-player {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    /* Hidden by default */
    width: 90%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 12px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 900;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
    opacity: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    /* Disable clicks when hidden */
}

.sticky-player.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.sticky-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sticky-info {
    flex: 1;
    overflow: hidden;
    margin-right: 15px;
}

.sticky-title {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-color);
}

.sticky-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sticky-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-color);
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease, transform 0.1s;
}

.sticky-btn:hover {
    color: var(--accent-color);
    transform: scale(1.1);
}

.sticky-close-btn {
    font-size: 24px;
    margin-left: 8px;
    opacity: 0.6;
}

.sticky-close-btn:hover {
    opacity: 1;
    color: #ff4757;
    /* Red for close action? Or just accent? Let's use accent or dark. User said "cross". */
    color: var(--text-color);
    transform: scale(1.1) rotate(90deg);
}

#sticky-play {
    font-size: 22px;
}

.sticky-progress-wrap {
    width: 100%;
    height: 2px;
    /* Thinner as requested */
    background: rgba(0, 0, 0, 0.05);
    border-radius: 1px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: height 0.2s;
}

.sticky-progress-wrap:hover {
    height: 6px;
    /* Expand on hover */
}

.sticky-progress-fill {
    height: 100%;
    background-color: var(--accent-color);
    width: 0%;
    border-radius: 1px;
    transition: width 0.1s linear;
}

/* ============================================
   13. SOUNDCLOUD EMBEDS
   ============================================ */
.sc-embed-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sc-embed {
    width: 100%;
}

.sc-caption {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
    font-family: var(--font-header);
    letter-spacing: 0.02em;
}