/* =========================================================================
   layout.css — рамката на всяка страница: хедър, мобилно меню, търсене,
   небето на началната страница, небесната ивица на вътрешните страници, футър.
   ========================================================================= */

/* 1. Хедър ----------------------------------------------------------------
   Над небето е прозрачен. При скрол става „мъгла“: полупрозрачно размиване
   с мек, разтворен долен край. Тънка златна линия показва докъде си стигнал. */

.admin-bar { --bl-adminbar: 32px; }

.bl-header {
    position: fixed;
    top: var(--bl-adminbar);
    left: 0;
    right: 0;
    z-index: 50;
}
.bl-header::before {
    content: "";
    position: absolute;
    inset: 0 0 -28px;
    background: linear-gradient(to bottom, rgba(247, 250, 253, .86), rgba(247, 250, 253, .62) 70%, rgba(247, 250, 253, 0));
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
    mask-image: linear-gradient(to bottom, #000 62%, transparent);
    opacity: 0;
    transition: opacity .6s var(--bl-ease);
    pointer-events: none;
}
.bl-header.is-scrolled::before { opacity: 1; }

.bl-header__progress {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(194, 154, 82, 0), var(--bl-gold));
    transform: scaleX(0); /* site.js задава ширината при скрол */
    transform-origin: left;
    opacity: 0;
    transition: opacity .6s var(--bl-ease);
}
.bl-header.is-scrolled .bl-header__progress { opacity: .8; }

.bl-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 40px;
    height: 88px;
    transition: height .6s var(--bl-ease);
}
.bl-header.is-scrolled .bl-header__inner { height: 70px; }

.bl-logo {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--bl-ink);
    margin-right: auto;
    white-space: nowrap;
    animation: bl-clear 1.4s var(--bl-ease) both;
}
.bl-logo--image img { width: auto; max-height: 44px; }
/* Официалното лого (картинка): височината определя размера, ширината следва */
.bl-logo--mark { display: block; line-height: 0; }
.bl-logo--mark img { width: auto; height: 26px; transition: height .6s var(--bl-ease); }
.bl-header.is-scrolled .bl-logo--mark img { height: 22px; }

.bl-nav ul { display: flex; gap: clamp(18px, 2.2vw, 34px); }
.bl-nav li { animation: bl-clear 1.2s var(--bl-ease) both; }
.bl-nav li:nth-child(1) { animation-delay: .10s; }
.bl-nav li:nth-child(2) { animation-delay: .16s; }
.bl-nav li:nth-child(3) { animation-delay: .22s; }
.bl-nav li:nth-child(4) { animation-delay: .28s; }
.bl-nav li:nth-child(5) { animation-delay: .34s; }
.bl-nav li:nth-child(6) { animation-delay: .40s; }
.bl-nav li:nth-child(n+7) { animation-delay: .46s; }
.bl-nav a {
    position: relative;
    display: block;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bl-ink);
}
/* Посочване (и текуща страница): тънка светла черта „изгрява“ от центъра */
.bl-nav a::after {
    content: "";
    position: absolute;
    left: 50%; right: 50%; bottom: 2px;
    height: 1px;
    background: var(--bl-gold);
    transition: left .5s var(--bl-ease), right .5s var(--bl-ease);
}
.bl-nav a:hover::after,
.bl-nav .current-menu-item > a::after { left: 0; right: 0; }

.bl-header__tools {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    animation: bl-clear 1.4s .3s var(--bl-ease) both;
}
.bl-menu-toggle { display: none; }

/* Бутонът за менюто: три линии, които при отваряне се подреждат в кръст (✝) —
   средната се изправя и става стълбът, горната се скъсява и става напречната греда
   (в горната трета), долната се изправя и се слива със стълба. Кръстът затваря менюто. */
.bl-burger {
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
}
.bl-burger span {
    position: absolute;
    left: 0;
    top: 10.2px; /* центърът на линия с дебелина 1,6 px е точно в средата на кутията (11 px) */
    width: 100%;
    height: 1.6px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .55s var(--bl-ease), opacity .35s var(--bl-ease);
}
.bl-burger span:nth-child(1) { transform: translateY(-6.6px); }
.bl-burger span:nth-child(3) { transform: translateY(6.6px); }
/* Кръстът: стълб 22 px, греда 13 px на една трета от върха */
[aria-expanded="true"] > .bl-burger span:nth-child(1) { transform: translateY(-4px) scaleX(.6); }
[aria-expanded="true"] > .bl-burger span:nth-child(2) { transform: rotate(90deg); }
[aria-expanded="true"] > .bl-burger span:nth-child(3) { transform: rotate(90deg); opacity: 0; }

/* Панел за търсене под хедъра */
.bl-search-panel {
    position: relative;
    padding: 6px 0 22px;
    animation: bl-clear .6s var(--bl-ease) both;
}
.bl-search-panel[hidden] { display: none; }

/* Мобилно меню */
.bl-mobile-menu {
    position: fixed;
    inset: calc(70px + var(--bl-adminbar)) 0 0;
    padding: 32px var(--bl-gutter) 40px;
    background: linear-gradient(to bottom, rgba(247, 250, 253, .97), rgba(234, 242, 249, .98));
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    overflow-y: auto;
}
.bl-mobile-menu[hidden] { display: none; }
.bl-mobile-menu li {
    border-bottom: 1px solid var(--bl-line-soft);
    animation: bl-clear .8s var(--bl-ease) both;
}
.bl-mobile-menu li:nth-child(2) { animation-delay: .05s; }
.bl-mobile-menu li:nth-child(3) { animation-delay: .10s; }
.bl-mobile-menu li:nth-child(4) { animation-delay: .15s; }
.bl-mobile-menu li:nth-child(5) { animation-delay: .20s; }
.bl-mobile-menu li:nth-child(n+6) { animation-delay: .25s; }
.bl-mobile-menu a {
    display: block;
    padding: 16px 0;
    font-family: var(--bl-font-serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--bl-ink);
}

/* 2. Небе на началната страница --------------------------------------------
   При скрол облаците се разтварят встрани (--scroll идва от site.js). */

.bl-hero {
    position: relative;
    padding-top: clamp(170px, 20vw, 230px);
    isolation: isolate;
}

.bl-sky {
    position: absolute;
    inset: 0 0 auto;
    height: clamp(760px, 88vh, 960px);
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(to bottom, #bcd4ea 0%, #d3e3f2 32%, #e9f1f8 62%, var(--bl-paper) 100%);
    /* Долният край се разтваря — облаците потъват в страницата без рязка линия */
    -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent);
    mask-image: linear-gradient(to bottom, #000 76%, transparent);
}
/* Светлина отгоре — мека, топла, зад заглавието */
.bl-sky__light {
    position: absolute;
    left: 50%; top: -30%;
    width: 110%; height: 90%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--bl-sun), .9), rgba(var(--bl-sun), 0) 70%);
}
/* Бавно люлеещи се лъчи — неправилни, за да не изглеждат като шарка */
.bl-sky__rays {
    position: absolute;
    left: 50%; top: -12%;
    width: 170%; height: 120%;
    translate: -50% 0;
    transform-origin: 50% 0;
    background: conic-gradient(from 0deg at 50% 0%,
        transparent 0deg 128deg,
        rgba(255, 250, 238, .55) 132deg, transparent 137deg 142deg,
        rgba(255, 250, 238, .35) 147deg, transparent 153deg,
        rgba(255, 250, 238, .5) 160deg, transparent 164deg 170deg,
        rgba(255, 250, 238, .55) 176deg, transparent 181deg,
        rgba(255, 250, 238, .3) 188deg, transparent 195deg,
        rgba(255, 250, 238, .5) 203deg, transparent 207deg 213deg,
        rgba(255, 250, 238, .38) 219deg, transparent 225deg 360deg);
    -webkit-mask-image: radial-gradient(ellipse 45% 70% at 50% 0%, #000 10%, transparent 72%);
    mask-image: radial-gradient(ellipse 45% 70% at 50% 0%, #000 10%, transparent 72%);
    opacity: .75;
    will-change: rotate;
    animation: bl-rays 36s ease-in-out infinite alternate;
}

.bl-clouds { position: absolute; inset: 0; }
.bl-clouds--far { opacity: .6; animation: bl-drift-left 140s ease-in-out infinite alternate; }
.bl-clouds--near { animation: bl-drift-right 110s ease-in-out infinite alternate; }
/* Разтварянето на облаците при скрол (site.js) — само на компютър; всеки облак е отделен слой,
   за да се мести, без да се прерисува. На телефон облаците само се носят бавно. */
@media (min-width: 861px) and (pointer: fine) {
    .js .bl-clouds .bl-cloud { will-change: translate; }
}
.bl-clouds { will-change: transform; }

.bl-hero__content {
    text-align: center;
    will-change: opacity; /* site.js го избледнява при скрол */
}
.bl-hero .bl-eyebrow { color: var(--bl-ink-2); animation: bl-clear 1.4s .1s var(--bl-ease) both; }

.bl-hero__title {
    font-family: var(--bl-font-serif);
    font-size: clamp(46px, 7.4vw, 104px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--bl-ink);
    font-optical-sizing: auto;
}
/* Думите изплуват от мъглата една след друга */
.bl-hero__title > span { display: inline-block; animation: bl-clear 1.8s var(--bl-ease) both; }
.bl-hero__title > span:nth-child(1) { animation-delay: .25s; }
.bl-hero__title > span:nth-child(2) { animation-delay: .7s; }
.bl-hero__title > span:nth-child(3) { animation-delay: 1.15s; }
.bl-hero__title > span:nth-child(n+4) { animation-delay: 1.4s; }

.bl-hero__lead {
    max-width: 620px;
    margin: 28px auto 0;
    font-size: clamp(17px, 1.4vw, 19px);
    line-height: 1.6;
    color: var(--bl-ink-2);
    text-wrap: pretty;
    animation: bl-clear 1.6s 1.6s var(--bl-ease) both;
}

.bl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
    animation: bl-clear 1.6s 1.85s var(--bl-ease) both;
}

/* 3. Небесна ивица на вътрешните страници ---------------------------------- */

.bl-page-hero {
    position: relative;
    isolation: isolate;
    padding: clamp(150px, 16vw, 200px) 0 clamp(80px, 9vw, 120px);
    text-align: center;
}
.bl-page-hero__sky {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(to bottom, #c4d9ed 0%, #dae7f4 40%, #edf3f9 75%, var(--bl-paper) 100%);
    /* Долният край се разтваря, за да не се вижда рязка линия под облаците */
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.bl-page-hero__clouds { position: absolute; inset: 0; opacity: .85; animation: bl-drift-right 90s ease-in-out infinite alternate; }
.bl-page-hero__content { position: relative; max-width: 900px; }
.bl-page-hero__title {
    font-family: var(--bl-font-serif);
    font-size: clamp(38px, 5vw, 66px);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -.015em;
    color: var(--bl-ink);
    text-wrap: balance;
    animation: bl-clear 1.4s .15s var(--bl-ease) both;
}
.bl-page-hero .bl-eyebrow { animation: bl-clear 1.2s var(--bl-ease) both; }
.bl-page-hero__meta {
    max-width: 640px;
    margin: 20px auto 0;
    font-size: 15px;
    color: var(--bl-ink-3);
    animation: bl-clear 1.4s .4s var(--bl-ease) both;
}
.bl-page-hero__search { max-width: 620px; margin: 32px auto 0; animation: bl-clear 1.4s .5s var(--bl-ease) both; }

/* 4. Футър -----------------------------------------------------------------
   Горе на сайта е изгрев (слънцето в небето); долу денят свършва със залез.
   Най-горе — облачна ивица, която плава надясно без край. Под нея всичко е
   центрирано и симетрично: лого, описание, два бутона, връзки, социални мрежи.
   Небето преминава в лилаво, а зад голямата марка BELIEVER залязва слънце —
   то слиза, докато футърът влиза в екрана (site.js мести само този елемент). */

.bl-footer {
    position: relative;
    isolation: isolate;
    padding-top: 300px; /* = височината на облачната ивица: текстът започва под облаците */
    overflow: hidden;
    background: linear-gradient(to bottom,
        var(--bl-paper) 0%,
        var(--bl-sky-50) 14%,
        #eceff7 30%,
        var(--bl-dusk-1) 48%,
        var(--bl-dusk-2) 66%,
        var(--bl-dusk-3) 83%,
        var(--bl-dusk-4) 100%);
}
.bl-footer__clouds {
    position: absolute;
    inset: 0 0 auto;
    height: 300px;
    z-index: -1;
    /* Горният ръб се разтваря, за да не се вижда къде започва футърът */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70px);
    mask-image: linear-gradient(to bottom, transparent, #000 70px);
}

/* Безкрайна лента: 4 еднакви комплекта облаци един до друг (--n = 0…3).
   Виждаме комплект 2; лентата се плъзга надясно с точно един комплект и
   започва отначало — кадърът в края е същият като в началото, затова няма скок.
   Съседите от двете страни са нужни, защото облаците излизат извън своя комплект.
   Копията се добавят от site.js; без JavaScript облаците стоят на място. */
.bl-footer__track {
    position: absolute;
    top: 0; bottom: 0;
    left: -200%;
    width: 400%;
}
.bl-footer__set {
    position: absolute;
    top: 0; bottom: 0;
    left: calc(var(--n, 2) * 25%);
    width: 25%;
}
.js .bl-footer__track.is-looping {
    will-change: transform;
    animation: bl-cloud-loop 120s linear infinite;
}

/* Залязващото слънце: топла сърцевина, розов ореол, разтваря се в лилавото.
   Без JavaScript стои в крайното си положение. */
.bl-footer__sun {
    position: absolute;
    left: 0; right: 0; bottom: -34%;
    height: 70%;
    z-index: -1;
    will-change: transform, opacity;
    background:
        radial-gradient(ellipse 20% 30% at 50% 50%, rgba(255, 226, 190, .95), rgba(255, 226, 190, 0) 100%),
        radial-gradient(ellipse 46% 50% at 50% 50%, rgba(246, 176, 170, .75), rgba(214, 150, 190, .35) 55%, rgba(214, 150, 190, 0) 72%);
}

/* Рамката: широка точно колкото голямата марка BELIEVER (тя е най-долу в рамката).
   Горните редове не участват в изчисляването на ширината (width: 0; min-width: 100%),
   а само я запълват — така логото и © започват точно от буквата B, а колоните с
   връзки и социалните мрежи свършват точно при буквата R. Съдържанието започва под
   облачната ивица (padding-top на .bl-footer, облаците са ограничени до 520 px). */
.bl-footer__frame {
    display: grid;
    width: max-content;
    max-width: calc(100% - var(--bl-gutter) * 2);
    margin-inline: auto;
}
.bl-footer__frame > .bl-footer__inner,
.bl-footer__frame > .bl-footer__base {
    width: 0;
    min-width: 100%;
}

/* Горе: лого и описание вляво, колони с връзки вдясно — без празно място */
.bl-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    /* Същото разстояние като между логото и описанието — симетричен ритъм до реда с © */
    padding-bottom: 24px;
}
.bl-logo--footer { display: inline-block; margin-bottom: 18px; font-size: 22px; animation: none; }
.bl-logo--mark.bl-logo--footer img { height: 24px; }
.bl-footer__brand p { max-width: 400px; font-size: 15px; color: var(--bl-ink-2); }

.bl-footer__cols { display: flex; gap: clamp(40px, 5vw, 72px); }
.bl-footer__col h2 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bl-gold-text);
    margin-bottom: 12px;
}
/* Връзките са в две колони по три, за да е блокът широк и нисък. Отстъпите са
   подбрани така, че колоната да свършва на същата линия като описанието вляво. */
.bl-footer__col ul {
    display: grid;
    grid-template-columns: repeat(2, auto);
    column-gap: clamp(32px, 4vw, 56px);
    row-gap: 8px;
}
.bl-footer__col a {
    font-size: 15px;
    font-weight: 500;
    color: var(--bl-ink);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color .4s var(--bl-ease), color .4s var(--bl-ease);
}
.bl-footer__col a:hover { text-decoration-color: var(--bl-gold); color: var(--bl-gold-text); }

/* Долен ред: © и веднага вдясно от него социалните мрежи, точно над голямата марка */
.bl-footer__base {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: clamp(8px, 1vw, 14px);
}
.bl-footer__base .bl-footer__social a { width: 38px; height: 38px; }
.bl-footer__base .bl-footer__social .bl-icon { width: 17px; height: 17px; }

/* Социални мрежи — светли кръгли бутони с ореол при посочване */
.bl-footer__social {
    display: flex;
    gap: 10px;
}
.bl-footer__social a {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    color: var(--bl-ink);
    transition: background-color .5s var(--bl-ease), box-shadow .5s var(--bl-ease);
}
.bl-footer__social a:hover { background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 5px rgba(255, 255, 255, .3); }
.bl-footer__social .bl-icon { width: 18px; height: 18px; }

.bl-footer__legal {
    font-size: 13px;
    color: var(--bl-ink-2); /* по-тъмен от обичайното: тук фонът вече е лилав */
}
.bl-footer__legal span { margin-inline: 8px; opacity: .6; }
.bl-footer__legal a {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color .4s var(--bl-ease);
}
.bl-footer__legal a:hover { text-decoration-color: currentColor; }

/* Голямата марка на дъното. Буквите вземат цветовете на залеза: топли и светли
   в средата, където е слънцето, и преливат към бледо лилаво по краищата.
   Размерът е одобрен — не го променяйте. */
.bl-footer__mark {
    /* Като логото: малки букви, Montserrat с дебелина 350 и разредка .129em (измерено спрямо
       файла на логото). Размерът е 1,2474 пъти предишния, за да е марката широка колкото
       одобрената преди. Кутията е точно колкото буквите: отрязват се празното място пред „b“
       и разредката след „r“ (измерено за тези стойности). */
    margin: 0 -.166em 0 -.1em;
    padding: 0 0 .06em;
    font-size: clamp(65px, 16.2vw, 262px);
    font-weight: 350;
    line-height: .86;
    letter-spacing: .129em;
    text-align: center;
    color: #fff;
    background: radial-gradient(ellipse 58% 150% at 50% 115%,
        #fff6e8 0%,
        #ffe4cf 26%,
        #fbd3dc 50%,
        #efdff6 74%,
        #faf6fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Ореол — без маска върху буквите: маската би отрязала ореола в правоъгълник */
    filter: drop-shadow(0 0 22px rgba(255, 220, 204, .4));
    user-select: none;
    white-space: nowrap;
}

/* 5. Адаптивност ----------------------------------------------------------- */

@media (max-width: 1180px) {
    .bl-nav { display: none; }
    .bl-menu-toggle { display: inline-grid; }
}

/* Телефони и таблети: без размиване зад хедъра (скъпо при скрол) — вместо него
   почти плътна „мъгла“. Същият вид, без да товари телефона. */
@media (max-width: 860px) {
    .bl-footer__inner { flex-direction: column; gap: 28px; padding-bottom: 28px; } /* равни разстояния: текст → връзки → © */
    .bl-header::before {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: linear-gradient(to bottom, rgba(247, 250, 253, .97), rgba(247, 250, 253, .9) 70%, rgba(247, 250, 253, 0));
    }
    .bl-mobile-menu {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: linear-gradient(to bottom, #f7fafd, #eaf2f9);
    }
}

@media (max-width: 782px) {
    .admin-bar { --bl-adminbar: 46px; }
}

@media (max-width: 560px) {
    .bl-footer { padding-top: 240px; } /* облачната ивица е по-ниска на телефон */
    .bl-footer__legal { font-size: 12px; }
    .bl-header__tools .bl-btn--small { display: none; }
    .bl-header__inner { height: 70px; }
    .bl-logo { font-size: 17px; letter-spacing: .26em; }
    .bl-logo--mark img,
    .bl-header.is-scrolled .bl-logo--mark img { height: 22px; }
}