/* ============================================================
   effects.css — плавность, scroll-reveal, шапка-стекло,
   FAQ-аккордеон, 3D-tilt, пыль. Подключается после style.css.
   ============================================================ */

/* ---------- Scroll reveal ----------
   Скрытое состояние применяется только при html.js-fx,
   чтобы без JS контент оставался видимым. */
html.js-fx .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .8s cubic-bezier(.16, 1, .3, 1),
        transform .8s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}

html.js-fx .reveal.reveal-left  { transform: translateX(-36px); }
html.js-fx .reveal.reveal-right { transform: translateX(36px); }
html.js-fx .reveal.reveal-zoom  { transform: scale(.94); }

html.js-fx .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- Шапка: липкая, со стеклом при скролле ---------- */
.header {
    position: sticky;
    top: 0;
    padding-bottom: 16px;
    transition:
        background-color .35s ease,
        backdrop-filter .35s ease,
        box-shadow .35s ease,
        padding .35s ease;
}

.header.is-scrolled {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: rgba(9, 9, 9, .72);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 12px 32px rgba(0, 0, 0, .45);
}

@media screen and (max-width:795px) {
    .header_mobile {
        position: sticky;
        top: 0;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 16px;
        transition:
            background-color .35s ease,
            backdrop-filter .35s ease,
            box-shadow .35s ease;
    }

    .header_mobile.is-scrolled {
        background-color: rgba(9, 9, 9, .78);
        -webkit-backdrop-filter: blur(14px) saturate(1.15);
        backdrop-filter: blur(14px) saturate(1.15);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 12px 32px rgba(0, 0, 0, .45);
    }
}

/* ---------- Фон-видео: медленный «дышащий» зум ---------- */
@keyframes fx-bg-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}

.main_bg video {
    animation: fx-bg-zoom 28s ease-in-out infinite alternate;
}

/* ---------- FAQ-аккордеон ---------- */
.faq_answer {
    min-height: 0;
    transition: background-color .3s ease, box-shadow .3s ease;
}

.faq_answer:hover {
    background-color: #181818;
}

.faq_answer.is-open {
    background-color: #181818;
    box-shadow: 0 0 0 1px rgba(207, 41, 41, .25), 0 8px 28px rgba(0, 0, 0, .35);
}

.faq_answer h1 {
    position: relative;
    width: 100%;
    padding-right: 36px;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: color .25s ease;
}

.faq_answer h1:hover { color: #f0f0f0; }
.faq_answer.is-open h1 { color: #f33f3f; }

.faq_answer h1:focus-visible {
    outline: 2px solid rgba(243, 63, 63, .6);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Плюсик, поворачивающийся в крестик */
.faq_answer h1::before,
.faq_answer h1::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background-color: #8e8e8e;
    transform: translateY(-50%);
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), background-color .25s ease;
}

.faq_answer h1::after { transform: translateY(-50%) rotate(90deg); }

.faq_answer.is-open h1::before,
.faq_answer.is-open h1::after {
    background-color: #f33f3f;
}

.faq_answer.is-open h1::after { transform: translateY(-50%) rotate(180deg); }
.faq_answer.is-open h1::before { transform: translateY(-50%) rotate(360deg); }

/* Плавное раскрытие через grid-rows */
.faq_answer-body {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    opacity: 0;
    transition:
        grid-template-rows .5s cubic-bezier(.16, 1, .3, 1),
        opacity .4s ease;
}

.faq_answer-inner { overflow: hidden; min-height: 0; }

.faq_answer.is-open .faq_answer-body {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* Без JS аккордеон не навешивается — ответы открыты */
html:not(.js-fx) .faq_answer-body { grid-template-rows: 1fr; opacity: 1; }
html:not(.js-fx) .faq_answer h1 { cursor: default; }
html:not(.js-fx) .faq_answer h1::before,
html:not(.js-fx) .faq_answer h1::after { display: none; }

/* ---------- 3D-tilt карточек ---------- */
.tilt {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
}

/* Не даём CSS-transition драться с покадровым transform из JS:
   у .main_product стоит transition: all — сужаем до filter. */
html.js-fx .tilt {
    transition-property: filter, background-color, box-shadow;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
}

/* Блик, следующий за курсором */
.tilt::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        circle at var(--gx, 50%) var(--gy, 50%),
        rgba(255, 250, 240, .16) 0%,
        rgba(255, 250, 240, .05) 32%,
        transparent 60%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

.tilt.is-tilting::after { opacity: 1; }

.main_product { border-radius: 16px; }
.projects_main-img { overflow: hidden; }

/* ---------- Микроанимации кнопок ---------- */
.header_btn:hover { transform: translateY(-1px); }
.header_btn:active { transform: translateY(0) scale(.98); }

.main_product-btn:active { transform: scale(1.05); }

@keyframes fx-play-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(207, 41, 41, .45); }
    50%      { box-shadow: 0 0 18px 2px rgba(207, 41, 41, .28); }
}

.projects_btn-play { animation: fx-play-pulse 2.8s ease-in-out infinite; }
.projects_btn-play:hover { animation: none; }

/* ---------- Счётчик онлайна: плавные смены ---------- */
.main_product-online-players {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity .3s ease, transform .3s ease, color .2s ease;
    font-variant-numeric: tabular-nums;
}

/* ---------- Слои пыли ---------- */
#fx-dust-far,
#fx-dust-near {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}

/* Оба слоя — за контентом: пыль живёт в атмосфере фона,
   не висит поверх видео и текста. */
#fx-dust-far  { z-index: 0; }
#fx-dust-near { z-index: 1; }

/* ---------- Скроллбар в тон сайту ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0b0b0b; }
::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 6px;
    border: 2px solid #0b0b0b;
}
::-webkit-scrollbar-thumb:hover { background: #cf2929; }

html { scrollbar-color: #2a2a2a #0b0b0b; scrollbar-width: thin; }

/* ---------- Уважение к prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html.js-fx .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .main_bg video { animation: none; }
    .projects_btn-play { animation: none; }

    .faq_answer-body { transition: none; }

    #fx-dust-far,
    #fx-dust-near { display: none; }
}