/* ============================================================
   Scroll FX — max level (all scroll-fx-max pages)
   ============================================================ */

.scroll-fx-max {
    /* perspective only on .ba-grid — root perspective breaks position:fixed sticky bar */
}

/* До инициализации JS — контент виден (нет «пустой» страницы) */
.scroll-fx-max:not(.sfx-initialized) [class*="sfx-"],
.scroll-fx-max:not(.sfx-initialized) .sfx-hero-text > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
}

.scroll-fx-max .lh,
.scroll-fx-max .hero {
    overflow: hidden;
}

.scroll-fx-max .hero__glow {
    animation: sfxHeroBgShift 8s ease-in-out infinite;
}

/* --- Hero --- */
.scroll-fx-max .sfx-hero-text > * {
    opacity: 0;
    transform: translateY(36px);
    filter: blur(6px);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.9s ease;
}

.scroll-fx-max .sfx-hero-text.is-in > * {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

.scroll-fx-max .sfx-hero-text.is-in > *:nth-child(1) { transition-delay: 0.05s; }
.scroll-fx-max .sfx-hero-text.is-in > *:nth-child(2) { transition-delay: 0.12s; }
.scroll-fx-max .sfx-hero-text.is-in > *:nth-child(3) { transition-delay: 0.2s; }
.scroll-fx-max .sfx-hero-text.is-in > *:nth-child(4) { transition-delay: 0.28s; }
.scroll-fx-max .sfx-hero-text.is-in > *:nth-child(5) { transition-delay: 0.36s; }

.scroll-fx-max .sfx-hero-visual {
    opacity: 0;
    transform: translateY(40px) scale(0.88) rotateY(-8deg);
    filter: blur(10px);
    transition:
        opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1s ease;
    will-change: transform;
}

.scroll-fx-max .sfx-hero-visual.is-in {
    opacity: 1;
    transform: translateY(0) scale(1) rotateY(0);
    filter: blur(0);
}

.scroll-fx-max .sfx-hero-visual.is-in .lh__glow-effect {
    animation: sfxHeroGlow 3s ease-in-out infinite;
}

@keyframes sfxHeroGlow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

/* --- Section headers --- */
.scroll-fx-max .sfx-head {
    opacity: 0;
    transform: translateY(50px) scale(0.96);
    filter: blur(8px);
    transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.75s ease;
}

.scroll-fx-max .sfx-head.is-in {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

.scroll-fx-max .sfx-head.is-in .sh__title em,
.scroll-fx-max .sfx-hero-text.is-in .hero__title em,
.scroll-fx-max .sfx-hero-text.is-in .lh__title em {
    animation: sfxGoldShimmer 2.4s ease-in-out 0.3s infinite;
}

@keyframes sfxGoldShimmer {
    0%, 100% { text-shadow: 0 0 0 transparent; }
    50% { text-shadow: 0 0 22px rgba(201, 162, 39, 0.45); }
}

.scroll-fx-max .lh__glow {
    animation: sfxHeroBgShift 8s ease-in-out infinite;
}

@keyframes sfxHeroBgShift {
    0%, 100% { opacity: 0.6; transform: scale(1) translateX(0); }
    50% { opacity: 1; transform: scale(1.15) translateX(3%); }
}

.scroll-fx-max .sfx-head.is-in .sh__label {
    animation: sfxLabelSlide 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes sfxLabelSlide {
    from { opacity: 0; letter-spacing: 0.3em; transform: translateY(12px); }
    to { opacity: 1; letter-spacing: 0.12em; transform: none; }
}

/* --- Portfolio cards --- */
.scroll-fx-max .ba-grid:not(.is-expanded) .ba--more {
    display: none !important;
}

.scroll-fx-max .ba-grid {
    perspective: 900px;
}

.scroll-fx-max .sfx-ba {
    opacity: 0;
    transform: translateY(70px) rotateX(14deg) scale(0.9);
    filter: blur(6px);
    transform-origin: center top;
    transition:
        opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.8s ease,
        box-shadow 0.95s ease;
    transition-delay: calc(var(--sfx-i, 0) * 0.14s);
}

.scroll-fx-max .sfx-ba:nth-child(odd) {
    transform: translateX(-50px) translateY(70px) rotateY(6deg) scale(0.9);
}

.scroll-fx-max .sfx-ba:nth-child(even) {
    transform: translateX(50px) translateY(70px) rotateY(-6deg) scale(0.9);
}

.scroll-fx-max .sfx-ba.is-in {
    opacity: 1;
    transform: none;
    filter: blur(0);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.scroll-fx-max .sfx-ba.is-in .ba-slider {
    animation: sfxBaPop 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--sfx-i, 0) * 0.14s + 0.2s) both;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

@keyframes sfxBaPop {
    0% { transform: scale(0.94); }
    60% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* --- Cards: includes, services, advantages, reviews, faq --- */
.scroll-fx-max .sfx-incl,
.scroll-fx-max .sfx-srv,
.scroll-fx-max .sfx-adv,
.scroll-fx-max .sfx-rev,
.scroll-fx-max .sfx-faq {
    opacity: 0;
    transform: translateY(40px) scale(0.92);
    filter: blur(4px);
    transition:
        opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.65s ease,
        border-color 0.75s ease,
        box-shadow 0.75s ease;
    transition-delay: calc(var(--sfx-i, 0) * 0.08s);
}

.scroll-fx-max .sfx-incl.is-in,
.scroll-fx-max .sfx-srv.is-in,
.scroll-fx-max .sfx-adv.is-in,
.scroll-fx-max .sfx-rev.is-in,
.scroll-fx-max .sfx-faq.is-in {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

.scroll-fx-max .sfx-incl.is-in .incl__icon,
.scroll-fx-max .sfx-srv.is-in .srv__icon,
.scroll-fx-max .sfx-adv.is-in .adv__icon {
    animation: sfxIconBounce 0.65s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--sfx-i, 0) * 0.08s) both;
}

.scroll-fx-max .sfx-rev.is-in {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

@keyframes sfxIconBounce {
    0% { transform: scale(0.5) rotate(-12deg); }
    70% { transform: scale(1.12) rotate(4deg); }
    100% { transform: scale(1) rotate(0); }
}

/* --- Pricing --- */
.scroll-fx-max .sfx-price {
    opacity: 0;
    transform: translateY(60px) rotateX(12deg) scale(0.88);
    filter: blur(5px);
    transform-origin: center bottom;
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.75s ease,
        box-shadow 0.9s ease;
    transition-delay: calc(var(--sfx-i, 0) * 0.12s);
}

.scroll-fx-max .sfx-price.is-in {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

.scroll-fx-max .sfx-price.is-in:nth-child(2) {
    box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.35), 0 28px 70px rgba(201, 162, 39, 0.12);
    animation: sfxPriceGlow 2.8s ease-in-out infinite;
}

@keyframes sfxPriceGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.25), 0 20px 50px rgba(201, 162, 39, 0.08); }
    50% { box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.55), 0 32px 80px rgba(201, 162, 39, 0.18); }
}

/* --- Process steps --- */
.scroll-fx-max .sfx-proc {
    opacity: 0;
    transform: translateY(50px);
    filter: blur(4px);
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.7s ease;
    transition-delay: calc(var(--sfx-i, 0) * 0.1s);
}

.scroll-fx-max .sfx-proc:nth-child(odd) {
    transform: translateX(-40px) translateY(50px);
}

.scroll-fx-max .sfx-proc:nth-child(even) {
    transform: translateX(40px) translateY(50px);
}

.scroll-fx-max .sfx-proc.is-in {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

.scroll-fx-max .sfx-proc.is-in .proc__num {
    animation: sfxProcNum 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--sfx-i, 0) * 0.1s) both;
}

@keyframes sfxProcNum {
    0% { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- About block (home) --- */
.scroll-fx-max .sfx-about {
    opacity: 0;
    transform: translateY(50px) scale(0.96);
    filter: blur(5px);
    transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-fx-max .sfx-about.is-in {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* --- Guarantee & CTA --- */
.scroll-fx-max .sfx-guarantee {
    opacity: 0;
    transform: scale(0.92) translateY(30px);
    filter: blur(5px);
    transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-fx-max .sfx-guarantee.is-in {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

.scroll-fx-max .sfx-cta {
    opacity: 0;
    transform: translateY(50px) scale(0.94);
    filter: blur(6px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-fx-max .sfx-cta.is-in {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

.scroll-fx-max .sfx-cta.is-in {
    animation: sfxCtaPulse 3s ease-in-out 0.5s infinite;
}

@keyframes sfxCtaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
    50% { box-shadow: 0 0 40px rgba(201, 162, 39, 0.12); }
}

/* --- Scroll progress bar --- */
.sfx-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg, rgba(201, 162, 39, 0.2), rgba(201, 162, 39, 0.95));
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.sfx-scroll-active .sfx-progress {
    opacity: 1;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .scroll-fx-max [class*="sfx-"],
    .scroll-fx-max .sfx-hero-text > * {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* --- Mobile: lighter but still animated --- */
@media (max-width: 768px) {
    .scroll-fx-max .sfx-ba,
    .scroll-fx-max .sfx-price,
    .scroll-fx-max .sfx-hero-visual {
        transform: translateY(40px) scale(0.95);
    }

    .scroll-fx-max .sfx-ba:nth-child(odd),
    .scroll-fx-max .sfx-ba:nth-child(even),
    .scroll-fx-max .sfx-proc:nth-child(odd),
    .scroll-fx-max .sfx-proc:nth-child(even) {
        transform: translateY(40px);
    }

    .scroll-fx-max .sfx-ba.is-in,
    .scroll-fx-max .sfx-price.is-in,
    .scroll-fx-max .sfx-hero-visual.is-in {
        transform: none;
    }
}