/* ============================================
   HEADER — фон-фото + лого Wonderful Pain
   ============================================ */

.header {
    position: relative;
    padding: 100px 20px 90px;      /* ← было 70px — больше снизу */
    text-align: center;
    background-color: #0a0a0a;
    background-image: url('../assets/header.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: none;
    overflow: visible;
    min-height: 540px;              /* ← было 420 — выше */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Затемняющий слой */
.header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.30) 0%,
        rgba(10, 10, 10, 0.50) 40%,
        rgba(10, 10, 10, 0.80) 70%,
        #000000 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* ⬇ Плавный переход хедера в фон страницы
   НАЕЗЖАЕТ на следующую секцию и растворяется */
.header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 200px;                  /* ← было 380 — короче */
    background: linear-gradient(
        180deg,
        #000000 0%,
        rgba(0, 0, 0, 0.85) 20%,
        rgba(0, 0, 0, 0.5)  50%,
        rgba(0, 0, 0, 0.15) 80%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 10;
}

/* Лого */
.header__logo {
    position: relative;
    z-index: 2;
    display: inline-block;
    user-select: none;
    line-height: 1;
    transform: translateX(-20px);
}

/* Большие буквы W и P */
.header__big {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(5rem, 14vw, 10rem);
    line-height: 1;
    color: #ffffff;
    display: inline-block;
    vertical-align: baseline;
    white-space: nowrap;
    margin-right: -0.22em;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
}

.header__big--w { margin-left: 0; }
.header__big--p { margin-left: 0.05em; }

/* Мелкий текст */
.header__small {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.1rem, 2.5vw, 1.7rem);
    color: #ffffff;
    display: inline-block;
    line-height: 1;
    vertical-align: baseline;
    white-space: nowrap;
    letter-spacing: 0;
    margin-left: -0.05em;
    margin-right: 0;
}

.header__small--w { margin-left: -0.35em; }
.header__small--p { margin-left: 0; }

/* Слоган */
.header__slogan {
    position: relative;
    z-index: 2;
    margin-top: -15px;
    padding-left: 0px;
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    font-weight: 300;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* Кнопка Telegram */
.header__tg {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.3s;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.header__tg:hover {
    border-color: var(--color-accent-hot);
    background: rgba(139, 0, 0, 0.4);
    transform: translateY(-2px);
}

.header__tg svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ---------- Мобильные ---------- */

@media (max-width: 768px) {
    .header {
        padding: 70px 15px 50px;
        min-height: 360px;
        background-position: center top;
    }

    .header::after {
        height: 180px;
    }

    /* W и P — прижимаем к маленьким буквам */
    .header__big {
        margin-right: -0.22em;
    }
    .header__big--p {
        margin-left: 0.04em;
    }

    /* onderful — прижимаем к W */
    .header__small {
        font-size: 1rem;
    }
    .header__small--w {
        margin-left: -0.35em;
    }
    /* ain — чуть отодвигаем от P */
    .header__small--p {
        margin-left: 0.08em;   /* ← НОВОЕ: отступ вправо */
    }

    .header__slogan {
        margin-top: -10px;
        font-size: 0.8rem;
        letter-spacing: 0.12em;
    }
}

@media (max-width: 480px) {
    .header {
        min-height: 320px;
    }

    .header::after {
        height: 140px;
    }

    .header__big {
        margin-right: -0.24em;
    }
    .header__big--p {
        margin-left: 0.03em;
    }
    .header__small {
        font-size: 0.75rem;
    }
    .header__small--w {
        margin-left: -0.38em;
    }
    /* ain — чуть отодвигаем от P */
    .header__small--p {
        margin-left: 0.1em;    /* ← НОВОЕ: чуть больше на маленьком */
    }

    .header__slogan { font-size: 0.7rem; }
}