/* ============================================================
   enhance.css — аддитивный слой микро-модернизации главной.
   Подключается ПОСЛЕ main.css. Ничего не переписывает.
   Откат: удалить <link> на этот файл в layout.blade.php.
   Бренд-акцент: #b0b0ff. Фон hero: тёмно-фиолетовый.
   ============================================================ */

/* ---------- 0. Плавность по умолчанию + доступный фокус ---------- */
a, .base-button, .nav-open-nav, .pagination-bullet, .scroll-down {
    transition: transform .35s cubic-bezier(.22,.61,.36,1),
                background-color .35s ease,
                box-shadow .35s ease,
                opacity .35s ease;
}
:focus-visible {
    outline: 2px solid #b0b0ff;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- 1. Меню — «стеклянная» плашка (glassmorphism) ---------- */
.nav-bar .nav-open-nav {
    padding: 10px 18px 10px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
}
.nav-bar .nav-open-nav:hover {
    background: rgba(255,255,255,.20);
    box-shadow: 0 6px 26px rgba(0,0,0,.28);
    transform: translateY(-1px);
}
/* показать подпись «МЕНЮ» рядом с иконкой — было display:none */
.nav-bar .nav-open-nav .label {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    letter-spacing: .14em;
    opacity: .92;
}

/* ---------- 2. Пагинация-точки — крупнее, контрастнее ---------- */
.fs-pagination .pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0 auto 18px;
    box-shadow: 0 0 0 0 rgba(176,176,255,0);
}
.fs-pagination.light .pagination-bullet {
    background-color: rgba(255,255,255,.55);
}
.fs-pagination .pagination-bullet:hover {
    transform: scale(1.4);
}
.fs-pagination .pagination-bullet.active {
    transform: scale(1.6);
    box-shadow: 0 0 0 4px rgba(176,176,255,.28);
}
.fs-pagination.light .pagination-bullet.active {
    background-color: #fff;
}

/* ---------- 3. Стрелка «вниз/вперёд» — мягкая пульсация ---------- */
@keyframes hintBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}
@keyframes hintBounceHrz {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
}
.scroll-down-wrap .scroll-down.go-next {
    animation: hintBounce 2.2s ease-in-out infinite;
}
.scroll-down.go-next-hrz {
    animation: hintBounceHrz 2.2s ease-in-out infinite;
}
.scroll-down-wrap:hover .scroll-down.go-next,
.scroll-down.go-next-hrz:hover {
    animation-play-state: paused;
}

/* ---------- 4. Кнопки «ПОДРОБНЕЕ» — чуть живее ---------- */
.base-button.light:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

/* ---------- 5. Слоган на hero — тонкий fade-in ---------- */
.hero-tagline {
    position: absolute;
    z-index: 20;
    left: 5%;
    top: 15%;
    max-width: 300px;
    pointer-events: none;
    padding: 20px 26px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(30,6,46,.58), rgba(30,6,46,.14));
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow: 0 10px 40px rgba(0,0,0,.22);
    transform: translateY(16px);
    animation: taglineIn 1.1s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero-tagline .tag-kicker {
    display: block;
    font-size: 12px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    margin-bottom: 14px;
}
.hero-tagline .tag-title {
    font-family: 'Roboto Slab', serif;
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    line-height: 1.18;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
@keyframes taglineIn {
    to { opacity: 1; transform: translateY(0); }
}
/* на узких экранах слоган мешал бы сцене — прячем */
@media (max-width: 900px) {
    .hero-tagline { display: none; }
}

/* ---------- Уважать пользователей, отключивших анимации ---------- */
@media (prefers-reduced-motion: reduce) {
    *, .scroll-down.go-next, .scroll-down.go-next-hrz, .hero-tagline {
        animation: none !important;
        transition: none !important;
    }
    .hero-tagline { opacity: 1; transform: none; }
}

/* ============================================================
   6. Ускорение анимации входа
   ------------------------------------------------------------
   Было: preloader fade transition .85s с задержкой 1.5s,
   контент (.in-out) появлялся с delay .65s. Суммарно вход
   ощущался вялым. Сокращаем задержки, оставляя плавность.
   ============================================================ */
#preloader {
    /* убираем 1.5s задержку перед затуханием, ускоряем fade */
    -webkit-transition: .45s ease opacity !important;
    transition: .45s ease opacity !important;
}
.in-out {
    /* было transition-delay .65s → появление контента почти сразу */
    -webkit-transition-duration: .4s !important;
    transition-duration: .4s !important;
    -webkit-transition-delay: .12s !important;
    transition-delay: .12s !important;
}

/* ============================================================
   7. Фикс мобильной кнопки МЕНЮ (съезжала за пределы панели)
   ------------------------------------------------------------
   Причина: на узких экранах панель .nav-bar низкая (54px), а
   стеклянная «пилюля» + унаследованный line-height:50px
   раздували кнопку до ~123px, и она вылезала вверх/влево.
   Фикс — компактная кнопка по центру панели.
   ============================================================ */
@media (max-width: 760px) {
    .nav-bar .nav-open-nav {
        display: -webkit-inline-box;
        display: inline-flex;
        -webkit-box-align: center;
        align-items: center;
        height: 38px;
        padding: 0 14px;
        line-height: 1;
        border-radius: 999px;
        vertical-align: middle;
    }
    .nav-bar .nav-open-nav .open-nav-icon {
        margin: 0 12px 0 0;
        line-height: 1;
    }
    .nav-bar .nav-open-nav .label {
        line-height: 1;
        font-size: 11px;
    }
}

/* ============================================================
   8. Современный сайдбар (выезжающее меню)
   ------------------------------------------------------------
   Аккуратно, в стиле бренда: мягкий тёмно-фиолетовый фон,
   элегантная кнопка-крестик, hover-подсветка пунктов
   брендовым #b0b0ff, плавное каскадное появление.
   ============================================================ */
.main-nav .main-nav-content {
    background: linear-gradient(160deg, #1e0630 0%, #2a0b45 60%, #1a0526 100%);
}
.main-nav .main-menu a,
.main-nav .nav-footer a,
.main-nav .where-button {
    color: #fff;
}
/* Пункты меню: подчёркивание-акцент на hover вместо блёклого opacity */
.main-nav .main-menu a {
    position: relative;
    border-bottom: 2px solid transparent !important;
    transition: color .3s ease, border-color .3s ease, padding-left .3s ease;
    opacity: 1 !important;
    filter: none !important;
}
.main-nav .main-menu a:hover {
    color: #b0b0ff !important;
    border-bottom-color: #b0b0ff !important;
    opacity: 1 !important;
    filter: none !important;
}
/* Каскадное появление пунктов при открытии */
.main-nav.active .main-menu li,
.main-nav.visible .main-menu li {
    -webkit-animation: navItemIn .5s cubic-bezier(.22,.61,.36,1) both;
    animation: navItemIn .5s cubic-bezier(.22,.61,.36,1) both;
}
.main-nav .main-menu li:nth-child(1){ animation-delay:.06s }
.main-nav .main-menu li:nth-child(2){ animation-delay:.12s }
.main-nav .main-menu li:nth-child(3){ animation-delay:.18s }
.main-nav .main-menu li:nth-child(4){ animation-delay:.24s }
.main-nav .main-menu li:nth-child(5){ animation-delay:.30s }
.main-nav .main-menu li:nth-child(6){ animation-delay:.36s }
@keyframes navItemIn {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* Кнопка-крестик закрытия — оформленная, с поворотом на hover.
   Иконка close-dark.svg тёмная → инвертируем в белую для тёмного фона. */
.main-nav .nav-close {
    width: 34px;
    height: 34px;
    background-color: rgba(255,255,255,.08) !important;
    background-size: 15px !important;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
    -webkit-filter: invert(1) brightness(2);
    filter: invert(1) brightness(2);
    transition: background-color .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.main-nav .nav-close:hover {
    background-color: rgba(176,176,255,.30) !important;
    transform: rotate(90deg);
}
/* Соцкнопки и «Где купить» — мягкий hover */
.main-nav .nav-socials .soc-button {
    transition: opacity .3s ease, transform .3s ease;
}
.main-nav .nav-socials .soc-button:hover {
    opacity: 1 !important;
    filter: none !important;
    transform: translateY(-2px);
}
.main-nav .where-button {
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.main-nav .where-button:hover {
    background: #b0b0ff !important;
    border-color: #b0b0ff !important;
    color: #1e0630 !important;
}

/* ============================================================
   9. Страница «Инвесторам» и вторая часть «О нас» — единый стиль
   ------------------------------------------------------------
   Вторая часть about (карьера + инвест-документы) переведена на
   те же компоненты, что и страница /investoram (investoram-*,
   doc-list, doc-link). Здесь — общий полиш, чтобы обе страницы
   выглядели как один дизайн-язык.
   ============================================================ */

/* Отступ сверху на отдельной странице /investoram,
   чтобы крупный заголовок не липнул к плавающему меню. */
.investoram-section {
    padding-top: 110px;
}

/* На about кремовые секции идут встык (карьера → контакты →
   инвест). Убираем задвоенные отступы, чтобы это читалось как
   один цельный блок, а не три «полосы». */
.about-info-section.about-careers {
    padding-bottom: 46px;
}
.about-info-section.about-careers + .contact-banner {
    padding-top: 40px;
}
.contact-banner + .about-info-section.about-invest {
    padding-top: 46px;
}

/* Заголовок-«лейбл» второго уровня внутри about (h3) —
   тот же вид, что и investoram-subtitle на h2. */
.about-info-section h3.investoram-subtitle {
    margin-top: 0;
    text-transform: uppercase;
}

/* Крупный акцентный e-mail отдела кадров — в брендовом
   берри-цвете, с подчёркиванием как у doc-link. */
.about-cta-email {
    margin: 6px 0 30px;
    font-family: 'Roboto Slab', serif;
    font-size: 30px;
    line-height: 1.2;
}
.about-cta-email a {
    color: #e22967;
    border-bottom: 2px solid rgba(226,41,103,.35);
    transition: border-color .2s ease, color .2s ease;
}
.about-cta-email a:hover {
    color: #b31450;
    border-bottom-color: #e22967;
}
@media (max-width: 640px) {
    .investoram-section { padding-top: 84px; }
    .about-cta-email { font-size: 23px; }
}