/*
Theme Name: Lens and Layers By Bakhtech Solutions ( Child theme)
Theme URI: https://bakhtech.com.ng
Description: Child theme for Lens and Layers By Bakhtech Solutions.
Author: Bakhtech Solutions
Author URI: https://bakhtech.com.ng
Template: lens-and-layers-by-bakhtech-solutions
Version: 1.3.0
Text Domain: lens-and-layers-by-bakhtech-solutions-child
*/

/*
 * The parent theme makes .pxl-header-main the positioning context and keeps
 * the branding block at a stable 60px minimum height. Position only the link
 * at the visual center; do not alter any wrapper, menu, or sticky geometry.
 */
@media screen and (max-width: 767px) {
    #pxl-header-default > #pxl-header-main > .container > .row > .pxl-header-branding > a,
    #pxl-header-elementor #pxl-header-mobile > #pxl-header-main > .container > .row > .pxl-header-mobile-default > .pxl-header-branding > a {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0;
        transform: translate(-50%, -50%);
    }
}

/*
 * Mobile fallback for BR Heading's Scroll Text highlight.
 *
 * SplitText generates one inner div per character. Modern mobile browsers can
 * drive those characters directly from their viewport position, avoiding the
 * parent theme's unreliable mobile ScrollTrigger instance. The child script
 * provides the equivalent calculation where scroll timelines are unsupported.
 */
@keyframes lens-and-layers-mobile-scroll-highlight {
    from {
        opacity: 0.2;
        transform: translate3d(-5px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .pxl-heading .pxl-item--title.style-scroll-bg > div > div {
            animation-name: lens-and-layers-mobile-scroll-highlight;
            animation-duration: 1ms;
            animation-timing-function: linear;
            animation-fill-mode: both;
            animation-timeline: view(block);
            animation-range: entry 0% cover 48%;
        }
    }
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .pxl-heading .pxl-item--title.style-scroll-bg > div > div {
        opacity: 1 !important;
        transform: none !important;
    }
}