@import url('https://fonts.googleapis.com/css2?family=Danfo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Afacad:wght@400;700&display=swap');

:root {
    --bg:           #FAEFC3;
    --color-dark:   #50002C;
    --color-text:   #3B2800;
    --color-white:  #FFFFFF;
   
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

.page {
    width: 100%;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
    
    /* НОВАЯ СТРОЧКА: Блокируем любые нажатия по умолчанию */
    pointer-events: none; 
}

/* Класс, который вернет управление после загрузки */
.page.is-loaded {
    pointer-events: auto;
}

/* Общие настройки для всех волн */
.bottom-section__wave {
    display: block;    /* Убирает нижний отступ, который есть у inline элементов */
    width: 100%;
    height: 100%;
    object-fit: fill;  /* Заставляет растягиваться, игнорируя пропорции */
}

.header__wave {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    min-height: 100%;
}

.header {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: clamp(115px, 14svh, 155px);
    overflow: hidden;
    transform: translateY(-100%);
    opacity: 0;
    
    /* Плавность появления (используем такой же эффект, как у других элементов) */
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease;
}


.header--visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

.header__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0.5rem;
    pointer-events: none;
}

.header__title {
    font-family: 'Danfo', serif;
    font-size: clamp(30px, 11vw, 60px);
    color: #ff9a00;
    letter-spacing: 0px;
    line-height: 1;
    margin-bottom: 0px;
    text-align: center;
}

.header__subtitle {
    font-family: 'Afacad', sans-serif;
    font-size: clamp(9px, 10vw, 18px);
    color: var(--bg);
    text-align: center;
    line-height: 1.4;
}

.header__subtitle strong {
    font-weight: 700;
}

.hero {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-top: -55px;
    margin-bottom: -80px;   /* ← было -45px, увеличиваем overlap */
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    line-height: 0;
}
.hero__image {
    width: auto;
    max-width: 55%;       /* ограничиваем ширину на десктопе */
    max-height: 66svh;
    height: auto;
    object-fit: contain;
    display: block;
    transform: scale(0.85);
    opacity: 0;
}
.streaming {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
    width: 22%;
    margin: 0 auto;

    flex-shrink: 0;
    position: relative;
    z-index: 3;
}

.streaming a {
    display: block;
    flex: 1;
    transition: transform 0.2s ease;
}

.streaming a:hover {
    transform: scale(1.08);
}

.streaming img {
    width: 100%;
    height: auto;
    display: block;
}
.streaming a:nth-child(2) img {
    width: 90%; /* чуть меньше остальных */
}
.lyrics {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 2px;     /* было 5px */
    flex-shrink: 0;
}
.yellow-panel {
    flex: 1;
    min-height: 0;
    position: relative;
    background: #E8960A;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center;  */
    justify-content: flex-start;   /* ← было center, меняем на flex-start */
    padding-top: clamp(10px, 6svh, 45px); 
}

.yellow-panel__wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(50px, 8vh, 80px);
}
.spacer { display: none; }

/* .spacer {
    flex: 1;
    min-height: 0;
} */

.lyrics img {
    image-rendering: auto;
    transform: translateZ(0);
    width: 22%;          /* было 25% */
    height: auto;
    object-fit: contain;
    overflow: visible;
    filter: drop-shadow(0px 6px 8px rgba(0, 0, 0, 0.45));
    display: block;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.lyrics a {
    display: contents;
}

.lyrics img:hover {
    transform: scale(1.03);
}

.arrow-hint {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-bottom: 8px;
    flex-shrink: 0;
}

.arrow-hint img {
    width: clamp(16px, 2vw, 28px);
    height: auto;
    opacity: 0.85;
}

.drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: transparent;
    transform: translateY(calc(100% - clamp(80px, 12vh, 120px)));
    /* transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); */
    z-index: 10;
    display: flex;
    flex-direction: column;
}

.drawer.open {
    transform: translateY(0);
}

.drawer__wave {
    display: block;
    width: 100%;
    height: clamp(40px, 8vh, 80px); /* Высота волны. Подрегулируй, если нужно больше/меньше */
    transform: scaleY(-1) translateY(-1px); /* Тот самый трюк из старого кода, который переворачивает волну */
    margin-bottom: -1px; /* Защита от белых микро-щелей между волной и фоном соцсетей */
    flex-shrink: 0;
}

.drawer__top {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    position: relative;
    width: 100%;
}

.drawer__top .social {
    padding: 6px 0 10px;
}

.drawer__content {
    flex: 1;
    overflow-y: visible;
    padding: clamp(12px, 2vw, 40px);
    scrollbar-width: none;
    background: var(--color-dark); /* Красим блок с текстом About */
    flex-grow: 1;
    padding-bottom: 0;
}

.drawer__content::-webkit-scrollbar { display: none; }


.social {
    position: absolute;
    inset: 0; 
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Прижимаем иконки к нижнему краю волны */
    padding-bottom: 0px; /* Регулируй этот отступ, чтобы поднять или опустить иконки */
    background: transparent; /* УБИРАЕМ сплошной цвет! */
    /* z-index: 10;  */
    
    /* Твои старые свойства оставляем: */
    gap: clamp(16px, 4vw, 48px);
    width: 100%;
    margin-top: 100px;
}

.social__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: transform 0.2s ease;
    z-index: 8;
}

.social__item:hover {
    transform: scale(1.1);
}

.social__item img {
    width: clamp(24px, 2.3vw, 48px);
    height: auto;
}


.about__title {
    font-family: 'Danfo', serif;
    font-size: clamp(52px, 18vw, 120px);
    color: var(--bg);
    line-height: 0.9;
    margin-bottom: 20px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.about__text {
    font-family: 'Afacad', sans-serif;
    font-size: clamp(13px, 1.5vw, 18px);
    color: var(--bg);
    text-align: center;
    line-height: 1.6;
    margin-bottom: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.about__bold {
    font-family: 'Afacad', sans-serif;
    font-size: clamp(13px, 1.5vw, 18px);
    font-weight: 700;
    color: var(--bg);
    text-align: center;
    margin-bottom: 8px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.about__source {
    font-family: 'Afacad', sans-serif;
    font-size: clamp(10px, 1.2vw, 14px);
    color: var(--bg);
    opacity: 0.6;
    text-align: center;
    font-style: italic;
    margin-bottom: 24px;
}

.about__text,
.about__bold,
.about__source,
.about__title {
    padding-left: clamp(20px, 6vw, 80px);
    padding-right: clamp(20px, 6vw, 80px);
}



.prev-works__wave {
    display: block;
    transform: translateY(-1px); /* сдвигает волну на 1px вниз, перекрывая щель */
    width: calc(100% + 2 * clamp(20px, 6vw, 80px));
    margin-left: calc(-1 * clamp(20px, 6vw, 80px));
    height: clamp(40px, 8vh, 80px);
    margin-bottom: 0;          /* ← убираем негативный margin */
    position: relative;
    z-index: 3;                /* ← выше prev-works */
}

.prev-works {
    margin-top: calc(-1 * clamp(40px, 8vh, 80px)); /* ← подъезжает под волну */
    padding-top: clamp(50px, 8vh, 90px);           /* ← контент ниже волны */
    /* остальные стили без изменений */
    margin-left: calc(-1 * clamp(20px, 6vw, 80px));
    margin-right: calc(-1 * clamp(20px, 6vw, 80px));
    width: calc(100% + 2 * clamp(20px, 6vw, 80px));
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg);
    padding-bottom: 92px;
    position: relative;
    z-index: 1;
}
.prev-works__wave svg {
    width: 100%;
    height: 100%;
}

.prev-works__label {
    font-family: 'Afacad', sans-serif;
    font-size: clamp(12px, 1.5vw, 18px);
    color: #2C2C2C;    /* ← было var(--bg), теперь тёмный */
    text-align: center;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}

.prev-works__label strong {
    font-weight: 700;
}

.prev-works__cover {
    width: clamp(260px, 55%, 500px);
    height: auto;
    display: block;
    border-radius: 4px;
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}
.prev-works__cover:hover {
    transform: translate(-2px, -2px);
    filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.25));
}


.drawer-footer {
    width: calc(100% + 2 * clamp(20px, 6vw, 80px));
    margin-left: calc(-1 * clamp(20px, 6vw, 80px));
    margin-top: 0;
}

.drawer-footer__wave {
    display: block;
    width: 100%;
    height: clamp(40px, 7vh, 70px);
    transform: scaleY(-1) translateY(-1px);
    margin-top: clamp(-70px, -7vh, -40px);   /* ← наезжает на prev-works */
    margin-bottom: -2px;
    position: relative;
    z-index: 2;
}

.drawer-footer__content {
    background: #735F2E;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 24px 20px;
}

.drawer-footer__contact {
    font-family: 'Afacad', sans-serif;
    font-size: clamp(10px, 1.5vw, 16px);
    color: #FFDF61;
    text-decoration: none;
    letter-spacing: 0.1em;
}

.drawer-footer__contact:hover {
    opacity: 0.7;
}

.drawer-footer__logo {
    width: clamp(180px, 50vw, 320px);
    height: auto;
}

.drawer-footer__copy {
    font-family: 'Afacad', sans-serif;
    font-size: clamp(8px, 1vw, 12px);
    color: var(--bg);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
}

.drawer__handle {
    position: absolute;
    top: 15px; /* Дистанция от верхнего края шторки */
    left: 50%;
    margin-top: 3px;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--bg);
    border-radius: 10px;
    opacity: 0.5; /* Сделал чуть прозрачнее, чтобы не бросался в глаза */
    z-index: 15;
    pointer-events: none;
    
    /* Плавная, едва заметная анимация */
    /* animation: gentleBounce 1s infinite ease-in-out; */
}

@keyframes gentleBounce {
    0%, 100% { 
        transform: translate(-50%, 0); 
    }
    50% { 
        /* Всего 2 пикселя — этого достаточно, чтобы показать интерактивность, 
           но не раздражать глаз */
        transform: translate(-50%, -2px); 
    }
}
/* =========================================
   LOADING SCREEN
   ========================================= */
   #loading-screen {
    --boat-height: clamp(150px, 100vh, 1920px); 
    position: fixed;
    inset: 0;
    /* background-color: var(--color-dark); */
    z-index: 10000;
    /* Центрируем всё строго по центру */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1200ms cubic-bezier(0.5, 1, 0.9, 1);
    background-color: transparent !important;
    overflow: hidden;
}

#loader-boat, #loader-text, #loader-headment {
    position: absolute; /* Теперь они не толкают друг друга */
}

#loader-boat {
    /* Создаем переменную высоты, чтобы использовать её в расчетах ниже */
    
    
    width: auto;
    height: var(--boat-height);
    position: absolute;
    opacity: 0;
    transform: translateY(0);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
#loader-text {
    font-size: 1.8svh;
    position: absolute;
    /* Расчет: (Половина высоты лодки) + (Желаемый зазор, например 20px) */
    /* Теперь, как бы ни менялась высота лодки через clamp, текст всегда будет под ней */
    margin-top: calc(var(--boat-height)/2 - 17.5svh);
    
    margin-left: 15svh; /* Смещение вправо для наклона */
    font-family: 'Afacad', sans-serif;
    color: var(--bg);
    opacity: 0;
    transform: rotate(-19deg);
    white-space: nowrap;
    transition: opacity 0.8s ease, transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

#loader-headment {
    width: clamp(200px, 50vw, 350px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.gooey-container {
    position: absolute;
    inset: -105px;

    filter: url('#goo');
    pointer-events: none;
}

.gooey-bg {
    position: absolute;
    inset: 100px;
    background-color: var(--color-dark);
    transition: transform 1200ms cubic-bezier(0.5, 1, 0.9, 1);
}

.drip {
    position: absolute;
    background-color: var(--color-dark);
    border-radius: 50%;
    /* Пузырьки «сидят» на нижней границе фона */
    top: 60px; 
    transition: transform 1200ms cubic-bezier(0.5, 1, 0.9, 1);
}

/* Настройка размеров и позиций пузырьков */
.drip-1 { width: 220px; height: 220px; left: -2%;  transition-delay: 40ms; }
.drip-2 { width: 180px; height: 180px; left: 15%;  transition-delay: 0ms; }
.drip-3 { width: 260px; height: 260px; left: 30%;  transition-delay: 110ms; }
.drip-4 { width: 190px; height: 190px; left: 50%;  transition-delay: 20ms; }
.drip-5 { width: 240px; height: 240px; left: 65%;  transition-delay: 80ms; }
.drip-6 { width: 200px; height: 200px; left: 85%;  transition-delay: 50ms; }
.drip-7 { width: 150px; height: 150px; left: 42%;  transition-delay: 150ms; }

/* Анимация */
#loading-screen.is-sliding-down .gooey-bg,
#loading-screen.is-sliding-down .drip {
    transform: translateY(130vh);
}

#loading-screen.is-sliding-down .loader-content {
    opacity: 0;
    transition: opacity 0.4s ease;
}
@media (max-width: 480px) {
    .header { height: clamp(90px, 24vw, 130px); }
    .header__title { font-size: clamp(26px, 12vw, 42px); }
    .header__subtitle { font-size: clamp(8px, 3.4vw, 22px); }

    .hero { margin-top: -4.5vh; margin-bottom: -60px; }
    .hero__image { max-width: 100%; max-height: 60svh; }

    .streaming {width: 38vh; 
        width: 38svh; margin-top: 3svh; }
    .lyrics img { width: 38vh;
        width: 38svh; }

    .yellow-panel { 
        padding-top: clamp(8px, 4vw, 20px); 
        min-height: 45vh;
   }
    /* .yellow-panel__wave { height: clamp(35px, 8vw, 55px); } */

    /* .drawer__wave { height: clamp(35px, 10vw, 55px); } */
    /* .social { margin-top: 70px; gap: clamp(10px, 8vw, 32px); } */
    /* .social__item img { width: clamp(28px, 8vw, 42px); } */
    .drawer__wave {
        height: clamp(30px, 3vw, 205px);   /* ← меньше высота = меньше изгибов */
    }
    
    .social {
        margin-top: 77px;   /* ← было 95px */
        gap: clamp(10px, 8vw, 38px);

        
    }
    .drawer__handle {
        margin-top: 0px;
    }
    .social__item img {
        width: clamp(24px, 9vw, 34px);
    }
    .drawer__content { padding: 16px 16px 0; padding-top: 8vh; }
    .about__title { font-size: clamp(48px, 18vw, 80px); }
    .about__text { font-size: clamp(12px, 3.5vw, 16px); }
    .about__bold { font-size: clamp(12px, 3.5vw, 16px); }
    .about__source { font-size: clamp(9px, 2.5vw, 12px); }
    .about__text, .about__bold, .about__source, .about__title {
        padding-left: 16px; padding-right: 16px;
    }

    .prev-works { padding: clamp(40px, 17vw, 140px) 0 60px; }
    .prev-works__cover { width: 85%; }
    .prev-works__label { font-size: clamp(10px, 6vw, 18px); }
    .prev-works { margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); }

    .drawer-footer { margin-left: -16px; width: calc(100% + 32px); }
    /* .drawer-footer__wave { height: clamp(30px, 8vw, 50px); margin-top: clamp(-50px, -8vw, -30px); } */
    .drawer-footer__logo { width: clamp(160px, 60vw, 260px); }
    .drawer-footer__contact { font-size: clamp(9px, 5vw, 15px); }
    .drawer-footer__copy { font-size: clamp(7px, 2vw, 14px); }
}

@media (min-width: 481px) and (max-width: 1024px) {
    /* Шапка */
    .header { height: clamp(100px, 15vw, 130px); }
    .header__title { font-size: clamp(28px, 9vw, 52px); }
    .header__subtitle { font-size: clamp(10px, 2vw, 15px); }

    /* Фото */
    .hero { margin-top: -4vh; margin-bottom: -65px; }
    .hero__image { max-width: 70%; max-height: 62svh; }

    /* Стриминг и lyrics */
    .streaming { width: 38svh; margin-top: 1.7vh; }
    .lyrics img { width:38svh; }

    /* Желтая панель */
    .yellow-panel {
        padding-top: clamp(8px, 3vw, 24px);
        padding-bottom: 110px; /* место под шторку */
    }

    /* Шторка */
    .drawer__wave { height: clamp(35px, 5vw, 60px); }
    .social {
        margin-top:95px;
        gap: clamp(14px, 8vw, 55px);
    }
    .social__item img { width: clamp(28px, 6vw, 40px);}

    /* About */
    .drawer__content { padding: 24px 24px 0; padding-top: 7svh; }
    .about__title { font-size: clamp(52px, 12vw, 90px); }
    .about__text { font-size: clamp(13px, 2vw, 17px); }
    .about__bold { font-size: clamp(13px, 2vw, 17px); }
    .about__source { font-size: clamp(10px, 1.5vw, 14px); }
    .about__text, .about__bold, .about__source, .about__title {
        padding-left: 24px; padding-right: 24px;
    }

    /* Prev works */
    .prev-works { 
        padding: clamp(40px, 10vw, 80px) 0 70px;
        margin-left: -24px; margin-right: -24px;
        width: calc(100% + 48px);
    }
    .prev-works__cover { width: 60%; }
    .prev-works__label { font-size: clamp(12px, 2vw, 16px); }

    /* Footer */
    .drawer-footer { margin-left: -24px; width: calc(100% + 48px); }
    .drawer-footer__logo { width: clamp(180px, 45vw, 280px); }
    .drawer-footer__contact { font-size: clamp(10px, 2vw, 14px); }
    .drawer-footer__copy { font-size: clamp(8px, 1.2vw, 12px); }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .header__title { font-size: clamp(32px, 5.5vw, 52px); }
    .header__subtitle { font-size: clamp(10px, 1.2vw, 14px); }
    .hero { margin-top: -35px; }
    .hero__image { max-height: 52vh; max-width: 45%; }

    .streaming { width: 38svh; }
    .lyrics img { width: 38svh; }
    .social__item img { width: clamp(32px, 9vw, 54px); }


    .about__title { font-size: clamp(60px, 8vw, 100px); }
    .about__text { font-size: clamp(14px, 1.4vw, 18px); }
    .prev-works__cover { width: 22%; }
}

@media (min-width: 1441px) and (max-width: 1920px) {
    .header__title { font-size: clamp(48px, 4vw, 64px); }
    .header__subtitle { font-size: clamp(11px, 1vw, 15px); }
    .hero__image { max-height: 56vh; max-width: 42%; }

    .streaming { width: 22%; }
    .lyrics img { width: 22%; }

    .about__title { font-size: clamp(80px, 7vw, 110px); }
    .about__text { font-size: clamp(15px, 1.2vw, 19px); }
    .prev-works__cover { width: 20%; }
    .social__item img { width: clamp(32px, 8vw, 48px); }
}

@media (min-width: 1921px) and (max-width: 2559px) {
    .header { height: clamp(140px, 12vh, 180px); }
    .header__title { font-size: clamp(60px, 5vw, 90px); }
    .header__subtitle { font-size: clamp(13px, 1vw, 18px); }
    
    .hero__image { max-height: 56vh; max-width: 35%; }
    
    /* Используем %, чтобы кнопки не были гигантскими */
    .streaming { width: 18%; margin-top: 2vh; }
    .lyrics img { width: 18%; }

    /* Расширяем текстовый контейнер, чтобы он не казался узким */
    .about__title { font-size: clamp(100px, 6vw, 140px); max-width: 1000px; }
    .about__text, .about__bold { font-size: clamp(18px, 1.2vw, 24px); max-width: 1000px; }
    .about__source { font-size: clamp(14px, 1vw, 18px); max-width: 1000px; }

    .drawer__wave { height: clamp(50px, 6vh, 80px); }
    .social { gap: clamp(50px, 4vw, 100px); margin-top: 120px; }
    .social__item img { width: clamp(40px, 3vw, 60px); }

    /* Обложка альбома не должна занимать пол-экрана */
    .prev-works__cover { width: 16%; }
    .prev-works__label { font-size: clamp(16px, 1.2vw, 22px); }

    .drawer-footer__logo { width: clamp(300px, 20vw, 480px); }
    .drawer-footer__contact { font-size: clamp(14px, 1vw, 20px); }
    .drawer-footer__copy { font-size: clamp(10px, 0.7vw, 14px); }
}

/* =========================================
   4K МОНИТОРЫ И ТВ (от 2560px и выше)
   ========================================= */
@media (min-width: 2560px) {
    .header { height: clamp(180px, 14vh, 260px); }
    .header__title { font-size: clamp(90px, 4vw, 150px); }
    .header__subtitle { font-size: clamp(18px, 0.8vw, 28px); }

    .hero__image { max-height: 58vh; max-width: 30%; }

    .streaming { width: 36svh; margin-top: 2vh; }
    .lyrics img { width: 36svh; }

    /* Желтая волна должна быть пропорциональна экрану */
    .yellow-panel__wave { height: clamp(80px, 8vh, 140px); }

    /* Растягиваем текст для огромного разрешения */
    .about__title { font-size: clamp(140px, 5vw, 220px); max-width: 1600px; }
    .about__text, .about__bold { font-size: clamp(24px, 1vw, 36px); max-width: 1400px; line-height: 1.8; }
    .about__source { font-size: clamp(18px, 0.8vw, 24px); max-width: 1400px; margin-bottom: 40px; }

    .drawer__wave { height: clamp(80px, 6vh, 120px); }
    .social { gap: clamp(80px, 4vw, 150px); margin-top: 165px; }
    .social__item img { width: clamp(60px, 2vw, 90px); }

    .prev-works { padding: clamp(80px, 10vw, 150px) 0 100px; }
    .prev-works__cover { width: 12%; max-width: 800px; }
    .prev-works__label { font-size: clamp(22px, 1vw, 32px); margin-bottom: 24px; }

    .drawer-footer__wave { height: clamp(60px, 7vh, 120px); }
    .drawer-footer__logo { width: clamp(480px, 15vw, 700px); }
    .drawer-footer__contact { font-size: clamp(20px, 1vw, 30px); }
    .drawer-footer__copy { font-size: clamp(14px, 0.7vw, 20px); }
}
@media (max-width: 480px) and (max-height: 700px) {

    /* Уменьшаем шапку */
    .header { height: clamp(90px, 20vw, 100px); }
    .header__title{font-size: clamp(10px, 10vw, 40px);}

    /* Фото поменьше */
    .hero__image { max-height: 55svh; }
    .hero { margin-bottom: -45px; }

    /* Иконки стримингов и lyrics — фиксированный % вместо svh */
    .streaming { width: 75%; margin-top: 2svh; }
    .lyrics img { width: 75%; }

    /* Желтая панель — меньше отступ снизу под шторку */
    .yellow-panel { padding-bottom: 80px; }

    /* Шторка выглядывает меньше */
    .drawer__wave { height: 25px; }
    .social { margin-top: 60px; gap: clamp(10px, 7vw, 28px); }
    .social__item img { width: clamp(22px, 8vw, 34px); }

    /* About не выглядывает */
    .drawer__content { padding-top: 6svh; }
    .about__title { font-size: clamp(40px, 15vw, 60px); }
}
/* =========================================
   АДАПТИВ ДЛЯ НОУТБУКОВ (1280x800, 1440x900)
   ========================================= */
   @media (min-width: 1025px) and (max-height: 950px) {
    /* Чуть уменьшаем шапку, чтобы освободить место по вертикали */
    .header { 
        height: clamp(100px, 12svh, 130px); 
    }
    .header__title { 
        font-size: clamp(32px, 5vw, 48px); 
    }

    /* Поджимаем героя, чтобы он не выталкивал кнопки вниз */
    .hero { 
        margin-top: -4vh; 
        margin-bottom: -50px; 
    }
    .hero__image { 
        max-height: 53svh; 
        max-width: 45%; 
    }

    /* Делаем кнопки компактнее */
    .streaming { 
        width: 42svh; 
        margin-top: 3vh; 
    }
    .lyrics img { 
        width: 42svh; 
    }

    /* Желтая панель должна быть менее высокой */
    .yellow-panel {
        padding-top: 15px;
        padding-bottom: 90px; /* Зазор под выглядывающую шторку */
    }

    /* Шторка на ноутбуках должна выглядывать аккуратно */
    .drawer__wave { 
        height: 50px; 
    }
    .social {
        margin-top: 85px; /* Поднимаем иконки чуть выше */
        gap: 58px;
    }
    .social__item img { 
        width: 38px; 
    }

    /* Текст в About делаем чуть плотнее */
    .drawer__content { 
        padding-top: 7svh; 
    }
    .about__title { 
        font-size: 70px; 
        margin-bottom: 15px; 
    }
    .about__text, .about__bold { 
        font-size: 16px; 
        line-height: 1.5; 
    }
}