/*
 * Shared by both paths: Elementor elements (marked up server-side via
 * includes/elementor-integration.php) and CSS-selector rules from
 * Settings -> Motion Effects (marked up client-side by
 * assets/js/motion-effects.js). Hidden until .mfx-in is added — either
 * immediately (page-load trigger) or once the element scrolls into view
 * (scroll trigger) — at which point the matching @keyframes plays.
 */
.mfx-animate { opacity: 0; }
.mfx-animate.mfx-in { opacity: 1; animation-fill-mode: both; }

@keyframes mfx-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mfx-fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mfx-fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mfx-fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mfx-fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mfx-zoomIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes mfx-bounceIn {
    0% { opacity: 0; transform: scale(.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(.9); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes mfx-slideInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mfx-slideInDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mfx-slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mfx-slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }

.mfx-anim-fadeIn.mfx-in { animation-name: mfx-fadeIn; }
.mfx-anim-fadeInUp.mfx-in { animation-name: mfx-fadeInUp; }
.mfx-anim-fadeInDown.mfx-in { animation-name: mfx-fadeInDown; }
.mfx-anim-fadeInLeft.mfx-in { animation-name: mfx-fadeInLeft; }
.mfx-anim-fadeInRight.mfx-in { animation-name: mfx-fadeInRight; }
.mfx-anim-zoomIn.mfx-in { animation-name: mfx-zoomIn; }
.mfx-anim-bounceIn.mfx-in { animation-name: mfx-bounceIn; }
.mfx-anim-slideInUp.mfx-in { animation-name: mfx-slideInUp; }
.mfx-anim-slideInDown.mfx-in { animation-name: mfx-slideInDown; }
.mfx-anim-slideInLeft.mfx-in { animation-name: mfx-slideInLeft; }
.mfx-anim-slideInRight.mfx-in { animation-name: mfx-slideInRight; }

@media (prefers-reduced-motion: reduce) {
    .mfx-animate { opacity: 1; animation: none !important; }
}

/*
 * Shrink-on-scroll: sticky nav/header container that compresses its
 * padding and shrinks its logo once the page scrolls past a threshold.
 * Values come from --mfx-shrink-* custom properties set inline per-element
 * (see elementor-integration.php); !important on the shrunk padding beats
 * Elementor's own generated padding rule regardless of its specificity.
 */
.mfx-shrink {
    transition-property: padding-top, padding-bottom;
    transition-duration: var(--mfx-shrink-duration, 300ms);
    transition-timing-function: ease;
}
.mfx-shrink.mfx-shrunk {
    padding-top: var(--mfx-shrink-padding, 8px) !important;
    padding-bottom: var(--mfx-shrink-padding, 8px) !important;
}
.mfx-shrink img,
.mfx-shrink svg {
    transition: transform var(--mfx-shrink-duration, 300ms) ease;
    transform-origin: center left;
}
.mfx-shrink.mfx-shrunk img,
.mfx-shrink.mfx-shrunk svg {
    transform: scale(var(--mfx-shrink-logoscale, 0.8));
}

@media (prefers-reduced-motion: reduce) {
    .mfx-shrink,
    .mfx-shrink img,
    .mfx-shrink svg {
        transition: none !important;
    }
}

/*
 * Homirx theme's own sticky-header mechanism (.gv-sticky-wrapper /
 * .gv-sticky-menu, unrelated to this plugin) makes the nav row
 * position:fixed on scroll. Its logo widget uses Elementor's default
 * flex-shrink:1 + min-width:0, so once fixed it can get squeezed to
 * width:0 by the row's flex layout and disappear entirely — independent of
 * whether Shrink on Scroll above is even enabled. Pin it to its natural
 * size so it never collapses.
 */
.elementor-widget-gva-logo {
    flex-shrink: 0 !important;
    width: auto !important;
}