/* =============================================
   SCROLL REVEAL + INTERACTIVE EFFECTS — mestofoto.ru
   Lightweight CSS-only animations triggered by JS
   ============================================= */

/* ── Initial hidden state ── */
[data-mf-sa="pending"] {
    opacity: 0;
    will-change: transform, opacity;
}

/* ===== APPEAR animations ===== */
@keyframes mfSaFadeUp {
    from { opacity: 0; transform: translateY(50px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mfSaFadeScale {
    from { opacity: 0; transform: scale(0.82); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes mfSaSlideLeft {
    from { opacity: 0; transform: translateX(-60px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes mfSaSlideRight {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes mfSaFlipY {
    from { opacity: 0; transform: perspective(800px) rotateY(-12deg) translateX(-30px); }
    to   { opacity: 1; transform: perspective(800px) rotateY(0) translateX(0); }
}
@keyframes mfSaBlurIn {
    from { opacity: 0; filter: blur(10px); transform: scale(0.94); }
    to   { opacity: 1; filter: blur(0);   transform: scale(1); }
}
@keyframes mfSaClipUp {
    from { opacity: 0; clip-path: inset(100% 0 0 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes mfSaRotateIn {
    from { opacity: 0; transform: rotate(-4deg) translateY(30px) scale(0.95); }
    to   { opacity: 1; transform: rotate(0) translateY(0) scale(1); }
}

/* ===== DISAPPEAR animations ===== */
@keyframes mfSaFadeOutDown {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(35px); }
}
@keyframes mfSaScaleOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.88); }
}
@keyframes mfSaBlurOut {
    from { opacity: 1; filter: blur(0); }
    to   { opacity: 0; filter: blur(8px); }
}

/* ===== Animation classes ===== */
.mf-sa-fade-up     { animation: mfSaFadeUp     0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.mf-sa-fade-scale  { animation: mfSaFadeScale  0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.mf-sa-slide-left  { animation: mfSaSlideLeft  0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.mf-sa-slide-right { animation: mfSaSlideRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.mf-sa-flip-y      { animation: mfSaFlipY      0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.mf-sa-blur-in     { animation: mfSaBlurIn     0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.mf-sa-clip-up     { animation: mfSaClipUp     0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.mf-sa-rotate-in   { animation: mfSaRotateIn   0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }

.mf-sa-out-down    { animation: mfSaFadeOutDown 0.4s ease-in both; }
.mf-sa-out-scale   { animation: mfSaScaleOut    0.4s ease-in both; }
.mf-sa-out-blur    { animation: mfSaBlurOut     0.4s ease-in both; }

/* Stagger delay via CSS variable */
[data-mf-sa] { animation-delay: var(--mf-sa-delay, 0s); }

/* ===== Global interactive hover effects for site_s3 ===== */

/* Cards / items — lift + shadow + glow */
body.site_s3 .item_block,
body.site_s3 .catalog_item_wrapp,
body.site_s3 .gallery-list__item,
body.site_s3 .side-news__item,
body.site_s3 .item-wrapper .item,
body.site_s3 .content_wrapper_block .item-wrapper {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.site_s3 .item_block:hover,
body.site_s3 .catalog_item_wrapp:hover,
body.site_s3 .gallery-list__item:hover,
body.site_s3 .side-news__item:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(246, 32, 188, 0.08) !important;
}

/* Catalog section tiles — scale up + depth */
body.site_s3 .catalog_section_list .section_item .wrap {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.site_s3 .catalog_section_list .section_item .wrap:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1) !important;
}

/* Tizers — slight 3D tilt on hover */
body.site_s3 .js-tizers .item {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease !important;
}
body.site_s3 .js-tizers .item:hover {
    transform: translateY(-4px) rotateX(2deg) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Section headings — subtle accent bar animation */
body.site_s3 .top_block_title {
    position: relative;
    transition: transform 0.3s ease !important;
}

/* Buttons — enhanced glow on hover */
body.site_s3 .btn:not(.btn-transparent):not(.btn-link) {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease,
                background 0.3s ease !important;
}
body.site_s3 .btn:not(.btn-transparent):not(.btn-link):hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(246, 32, 188, 0.25) !important;
}

/* Banner content — smooth parallax-feel */
body.site_s3 .big_banner_index_drag .banner_text,
body.site_s3 .big_banner_index_drag .banner_title {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Float banners — hover lift */
body.site_s3 .float_banners_drag .item {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease !important;
}
body.site_s3 .float_banners_drag .item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
}

/* Bottom banners — scale on hover */
body.site_s3 .bottom_banners_drag .item {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s ease !important;
}
body.site_s3 .bottom_banners_drag .item:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
}

/* Stories — pop effect */
body.site_s3 .front_stories .item {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
body.site_s3 .front_stories .item:hover {
    transform: scale(1.08) !important;
}

/* Reviews — glassmorphism hint */
body.site_s3 .review-block {
    transition: box-shadow 0.35s ease, transform 0.35s ease !important;
}
body.site_s3 .review-block:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Company block — subtle lift */
body.site_s3 .company-block {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease !important;
}
body.site_s3 .company-block:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08) !important;
}

/* Images — subtle zoom on hover */
body.site_s3 .gallery-list__item-image-wrapper img,
body.site_s3 .scale_block_animate img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.site_s3 .gallery-list__item:hover .gallery-list__item-image-wrapper img,
body.site_s3 .scale_block_animate:hover img {
    transform: scale(1.06) !important;
}

/* Toggle blocks (sections) — smooth border accent */
body.site_s3 .toggle_block {
    transition: border-color 0.3s ease !important;
}

/* Content wrapper blocks — entry depth */
body.site_s3 .content_wrapper_block {
    transition: opacity 0.3s ease !important;
}

/* ===== Reduce motion ===== */
@media (prefers-reduced-motion: reduce) {
    [data-mf-sa] {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
    body.site_s3 .item_block:hover,
    body.site_s3 .catalog_item_wrapp:hover,
    body.site_s3 .gallery-list__item:hover,
    body.site_s3 .side-news__item:hover,
    body.site_s3 .float_banners_drag .item:hover,
    body.site_s3 .bottom_banners_drag .item:hover,
    body.site_s3 .front_stories .item:hover,
    body.site_s3 .review-block:hover,
    body.site_s3 .company-block:hover,
    body.site_s3 .js-tizers .item:hover,
    body.site_s3 .btn:hover {
        transform: none !important;
    }
}