/* =============================================
   AB Header Plugin v3.4 — Ultra-smooth build
   Every continuous animation runs on the GPU compositor
   (transform / opacity only) — no per-frame repaint, no layout.
   ============================================= */

/* ---------- Design tokens (Elementor controls override these) ---------- */
.ab-wrap{
    --ab-topbar-bg:#0f172a;
    --ab-topbar-text:#cbd5e1;
    --ab-topbar-accent:#93c5fd;
    --ab-header-bg:#ffffff;
    --ab-menu:#334155;
    --ab-accent:#2563eb;
    --ab-cta-bg:#2563eb;
    --ab-cta-text:#ffffff;
    --ab-logo-h:52px;
    --ab-row-h:68px;
    --ab-marquee:32s;
    --ab-sticky-top:0px;
    --ab-halo-sx:1.17;
    --ab-halo-sy:1.6;
    position:relative;
    width:100%;
}
.ab-wrap *,.ab-wrap *::before,.ab-wrap *::after{box-sizing:border-box}

/* ---------- Keyframes (compositor-only) ---------- */
@keyframes abSlideDown{from{transform:translateY(-14px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes abStickIn{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes abFadeUp{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes abMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes abShine{0%{transform:translateX(-120%) skewX(-20deg)}55%,100%{transform:translateX(380%) skewX(-20deg)}}
@keyframes abTwinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}

/* CTA pulse ring — scale + fade instead of animating box-shadow */
@keyframes abHalo{
    0%{transform:scale(1);opacity:.45}
    70%,100%{transform:scale(var(--ab-halo-sx,1.17),var(--ab-halo-sy,1.6));opacity:0}
}
/* moving light line — transform instead of background-position */
@keyframes abFlow{from{transform:translateX(-93.34%)}to{transform:translateX(326.67%)}}
/* live dot — ring is scale + fade, dot is opacity */
@keyframes abLiveDot{0%{opacity:1}70%{opacity:.75}100%{opacity:1}}
@keyframes abLiveRing{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(3);opacity:0}}
/* logo glow — fade a pre-rendered shadow layer instead of animating filter */
@keyframes abGlowFade{0%,100%{opacity:0}50%{opacity:1}}
/* CTA light sweep — transform instead of left */
@keyframes abCtaShine{0%{transform:translateX(0) skewX(-20deg)}40%,100%{transform:translateX(410%) skewX(-20deg)}}

/* =============================================
   TOP ANNOUNCEMENT BAR
   ============================================= */
.ab-topbar{
    position:relative;
    background:var(--ab-topbar-bg);
    color:var(--ab-topbar-text);
    font-size:13px;
    line-height:1.4;
    padding:9px 0;
    overflow:hidden;
    white-space:nowrap;
    border-bottom:1px solid rgba(255,255,255,.06);
    contain:layout paint;
}
/* soft light sweep */
.ab-topbar::after{
    content:'';
    position:absolute;
    top:0;left:0;
    width:35%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.08),transparent);
    opacity:0;
    pointer-events:none;
}
.ab-anim .ab-topbar::after{opacity:1;animation:abShine 7s ease-in-out infinite;will-change:transform}

.ab-topbar-track{
    display:flex;
    width:max-content;
    animation:abMarquee var(--ab-marquee) linear infinite;
    will-change:transform;
    backface-visibility:hidden;
}
.ab-topbar:hover .ab-topbar-track{animation-play-state:paused}
.ab-topbar-group{
    display:flex;
    align-items:center;
    justify-content:space-around;
    flex:0 0 auto;
    min-width:100vw;
}
.ab-topbar-item{display:inline-flex;align-items:center;padding:0 40px}
.ab-topbar-t1{font-weight:500;letter-spacing:.3px}
.ab-topbar-t2{font-weight:700;color:var(--ab-topbar-accent);letter-spacing:.4px}
.ab-topbar-sep{
    display:inline-block;
    margin:0 22px;
    color:#3b82f6;
    font-size:9px;
}
.ab-anim .ab-topbar-sep{animation:abTwinkle 2.6s ease-in-out infinite}

/* =============================================
   MAIN HEADER
   ============================================= */
.ab-header-holder{position:relative;width:100%}
.ab-header{
    background:var(--ab-header-bg);
    box-shadow:0 1px 12px rgba(0,0,0,.06);
    position:relative;
    z-index:1000;
    transition:box-shadow .3s ease;
}
.ab-header.ab-fixed{
    position:fixed;
    top:var(--ab-sticky-top,0px);
    left:0;right:0;
    width:100%;
    box-shadow:0 6px 24px rgba(15,23,42,.12);
}
.ab-anim .ab-header.ab-fixed{animation:abStickIn .4s cubic-bezier(.16,1,.3,1) backwards}

.ab-header-row{
    display:flex;
    align-items:center;
    max-width:1320px;
    margin:0 auto;
    padding:0 28px;
    min-height:var(--ab-row-h);
    gap:10px;
    transition:min-height .3s ease;
}
.ab-anim .ab-header-row{animation:abSlideDown .6s cubic-bezier(.16,1,.3,1) backwards}
.ab-header.ab-scrolled .ab-header-row{min-height:calc(var(--ab-row-h) * .85)}

/* ---------- Logo ---------- */
.ab-logo{
    position:relative;
    display:flex;
    align-items:center;
    text-decoration:none;
    flex-shrink:0;
    margin-inline-end:auto;
}
.ab-logo img{
    position:relative;
    display:block;
    max-height:var(--ab-logo-h);
    width:auto;
    height:auto;
    object-fit:contain;
    transition:transform .3s ease,max-height .3s ease;
}
.ab-header.ab-scrolled .ab-logo img{max-height:calc(var(--ab-logo-h) * .82)}
.ab-logo:hover img{transform:scale(1.04)}
.ab-logo-text{font-size:20px;font-weight:800;color:#0f172a;letter-spacing:-.5px}
/* glow copy sits behind the real logo; only its opacity animates (shadow is rasterised once) */
.ab-logo .ab-logo-glow{
    position:absolute;
    left:0;top:0;
    width:100%;height:100%;
    max-height:none;
    object-fit:contain;
    filter:drop-shadow(0 3px 10px rgba(37,99,235,.35));
    opacity:0;
    pointer-events:none;
    will-change:opacity;
}

/* ---------- Navigation ---------- */
.ab-nav{display:flex;align-items:center}
.ab-menu{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    gap:4px;
}
.ab-menu li{margin:0;padding:0;list-style:none}
.ab-menu a{
    position:relative;
    isolation:isolate;
    display:block;
    text-decoration:none;
    color:var(--ab-menu);
    font-size:14px;
    font-weight:600;
    padding:8px 13px;
    border-radius:6px;
    transition:color .25s ease;
}
/* hover pill */
.ab-menu a::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:6px;
    background:currentColor;
    opacity:0;
    z-index:-1;
    transition:opacity .25s ease;
}
/* underline */
.ab-menu a::after{
    content:'';
    position:absolute;
    bottom:4px;
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:2px;
    background:var(--ab-accent);
    border-radius:1px;
    transition:width .3s cubic-bezier(.16,1,.3,1);
}
.ab-menu a:hover,
.ab-menu a:focus-visible,
.ab-menu a.ab-active{color:var(--ab-accent)}
.ab-menu a:hover::before{opacity:.07}
.ab-menu a:hover::after,
.ab-menu a.ab-active::after{width:55%}
.ab-menu a:focus-visible{outline:2px solid var(--ab-accent);outline-offset:2px}

/* desktop menu entrance */
@media(min-width:992px){
    .ab-anim .ab-menu li{
        animation:abFadeUp .5s ease backwards;
        animation-delay:calc(var(--ab-i,0) * 60ms + 250ms);
    }
}

/* ---------- CTA ---------- */
.ab-cta{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 24px;
    background:var(--ab-cta-bg);
    color:var(--ab-cta-text)!important;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    border-radius:6px;
    box-shadow:0 3px 10px rgba(37,99,235,.2);
    transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,filter .3s ease;
    white-space:nowrap;
    flex-shrink:0;
}
.ab-cta::before{
    content:'';
    position:absolute;
    top:0;left:-75%;
    width:50%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
    transform:translateX(0) skewX(-20deg);
    transition:transform .6s ease;
    z-index:-1;
    will-change:transform;
}
.ab-cta:hover{
    color:var(--ab-cta-text)!important;
    filter:brightness(.92);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(37,99,235,.35);
}
.ab-cta:hover::before{transform:translateX(410%) skewX(-20deg)}
.ab-cta:active{transform:translateY(0)}
.ab-cta:focus-visible{outline:2px solid var(--ab-cta-bg);outline-offset:3px}
@supports (color:color-mix(in srgb,red,blue)){
    .ab-cta{box-shadow:0 3px 10px color-mix(in srgb,var(--ab-cta-bg) 30%,transparent)}
    .ab-cta:hover{box-shadow:0 8px 20px color-mix(in srgb,var(--ab-cta-bg) 40%,transparent)}
}
.ab-cta-desktop{margin-inline-start:18px}
.ab-cta-mobile{display:none}

/* pulse ring (optional) — lives on a wrapper so it is never clipped by the button */
.ab-cta-slot{
    position:relative;
    display:inline-flex;
    flex-shrink:0;
    margin-inline-start:18px;
    border-radius:6px;
}
.ab-cta-slot .ab-cta-desktop{margin:0}
.ab-cta-slot::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:var(--ab-cta-bg);
    opacity:0;
    z-index:-1;
    pointer-events:none;
    will-change:transform,opacity;
    animation:abHalo 2.4s ease-out infinite;
}
.ab-cta-slot:hover::after{animation:none;opacity:0}

/* ---------- Hamburger ---------- */
.ab-burger{
    -webkit-appearance:none;
    appearance:none;
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    margin:0;
    padding:10px;
    min-width:0;
    line-height:0;
    background:none;
    border:0;
    border-radius:8px;
    box-shadow:none;
    cursor:pointer;
    transition:background-color .2s ease;
    z-index:1001;
    -webkit-tap-highlight-color:transparent;
}
.ab-wrap .ab-burger:hover,
.ab-wrap .ab-burger:focus{background:rgba(15,23,42,.06);box-shadow:none}
.ab-burger:focus-visible{outline:2px solid var(--ab-accent);outline-offset:2px}
.ab-burger span{
    display:block;
    width:22px;
    height:2px;
    background:var(--ab-menu);
    border-radius:2px;
    transition:transform .3s ease,opacity .2s ease;
}
.ab-burger.ab-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ab-burger.ab-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.ab-burger.ab-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =============================================
   RESPONSIVE — TABLET & MOBILE
   ============================================= */
@media(max-width:991px){
    .ab-burger{display:flex}
    .ab-cta-desktop,.ab-cta-slot{display:none}

    .ab-nav{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        position:absolute;
        top:100%;
        left:0;right:0;
        background:var(--ab-header-bg);
        box-shadow:0 14px 30px rgba(15,23,42,.12);
        border-top:3px solid var(--ab-accent);
        padding:8px 0 12px;
        z-index:999;
        max-height:calc(100vh - var(--ab-sticky-top,0px) - 90px);
        max-height:calc(100dvh - var(--ab-sticky-top,0px) - 90px);
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
        /* closed state */
        visibility:hidden;
        opacity:0;
        transform:translateY(-10px);
        pointer-events:none;
        will-change:transform,opacity;
        transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;
    }
    .ab-nav.ab-nav-open{
        visibility:visible;
        opacity:1;
        transform:none;
        pointer-events:auto;
        transition:opacity .25s ease,transform .25s ease,visibility 0s;
    }
    .ab-menu{flex-direction:column;align-items:stretch;gap:0;width:100%}
    .ab-menu li{border-bottom:1px solid rgba(15,23,42,.07)}
    .ab-menu li:last-child{border-bottom:none}
    .ab-menu a{padding:14px 24px;font-size:15px;border-radius:0}
    .ab-menu a::before,.ab-menu a::after{display:none}
    .ab-menu a:hover{background:rgba(15,23,42,.04)}
    .ab-menu a.ab-active{box-shadow:inset 3px 0 0 var(--ab-accent)}
    .ab-anim .ab-nav-open .ab-menu li{
        animation:abFadeUp .35s ease backwards;
        animation-delay:calc(var(--ab-i,0) * 45ms + 60ms);
    }
    .ab-cta-mobile{display:flex;margin:12px 24px 4px}
}

@media(max-width:480px){
    .ab-wrap{--ab-logo-h:42px;--ab-row-h:58px}
    .ab-topbar{font-size:12px;padding:7px 0}
    .ab-topbar-track{animation-duration:calc(var(--ab-marquee) * .7)}
    .ab-header-row{padding:0 15px}
}

/* =============================================
   REDUCED MOTION — static, readable top bar
   ============================================= */
@media(prefers-reduced-motion:reduce){
    .ab-wrap *,.ab-wrap *::before,.ab-wrap *::after{
        animation:none!important;
        transition-duration:.01ms!important;
    }
    .ab-topbar{white-space:normal;text-align:center}
    .ab-topbar-track{width:auto;justify-content:center}
    .ab-topbar-group{min-width:0;flex-wrap:wrap;justify-content:center}
    .ab-topbar-group[aria-hidden="true"]{display:none}
    .ab-topbar-item + .ab-topbar-item{display:none}
    .ab-topbar-item{padding:0 16px;flex-wrap:wrap;justify-content:center}
    .ab-t2-hi{display:none!important}
}

/* =============================================
   LIVE EFFECTS
   ============================================= */
/* moving light line on top edge of header (clip strip + moving bar) */
.ab-flow{
    position:absolute;
    top:0;left:0;right:0;
    height:2px;
    overflow:hidden;
    pointer-events:none;
    z-index:2;
}
.ab-flow i{
    display:block;
    width:30%;height:100%;
    background-image:linear-gradient(90deg,transparent 0,var(--ab-accent) 50%,transparent 100%);
    transform:translateX(-93.34%);
    will-change:transform;
    animation:abFlow 3.5s ease-in-out infinite;
}
[dir="rtl"] .ab-flow i{animation-direction:reverse}
/* pulsing green dot in top bar */
.ab-live-dot{
    position:relative;
    display:inline-block;
    flex:0 0 auto;
    width:7px;height:7px;
    margin-inline-end:10px;
    border-radius:50%;
    background:#22c55e;
    will-change:opacity;
    animation:abLiveDot 1.8s ease-out infinite;
}
.ab-live-dot::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    background:#22c55e;
    opacity:0;
    will-change:transform,opacity;
    animation:abLiveRing 1.8s ease-out infinite;
}
/* logo glow + periodic CTA shine */
.ab-live .ab-logo-glow{animation:abGlowFade 4.5s ease-in-out infinite}
.ab-live .ab-cta-desktop::before{animation:abCtaShine 4s ease-in-out infinite}

/* scroll progress bar */
.ab-progress{
    position:absolute;
    left:0;bottom:0;
    width:100%;height:3px;
    background:linear-gradient(90deg,var(--ab-accent),#22d3ee);
    transform:scaleX(0);
    transform-origin:left center;
    pointer-events:none;
    z-index:2;
    will-change:transform;
}
[dir="rtl"] .ab-progress{transform-origin:right center}

/* =============================================
   EXTRA EFFECTS
   ============================================= */
@keyframes abPop{
    0%{transform:scale(.6) rotate(-6deg);opacity:0}
    100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes abNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
/* flowing highlight on the top bar text:
   a white copy of the text, revealed through a sliding mask (outer layer slides right,
   inner text slides back left, so the text stays still while the highlight travels) */
@keyframes abSweepMask{from{transform:translateX(0)}to{transform:translateX(50%)}}
@keyframes abSweepText{from{transform:translateX(0)}to{transform:translateX(-200%)}}

.ab-t2-hi{display:none}
@supports ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
    .ab-extra .ab-topbar-t2{position:relative}
    .ab-extra .ab-t2-hi{
        display:block;
        position:absolute;
        top:0;bottom:0;
        left:-200%;
        width:400%;
        pointer-events:none;
        -webkit-user-select:none;
                user-select:none;
        -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 50%,transparent 100%);
                mask-image:linear-gradient(90deg,transparent 0,#000 50%,transparent 100%);
        -webkit-mask-size:50% 100%;
                mask-size:50% 100%;
        -webkit-mask-repeat:repeat-x;
                mask-repeat:repeat-x;
        -webkit-mask-position:0 0;
                mask-position:0 0;
        will-change:transform;
        animation:abSweepMask 4s linear infinite;
    }
    .ab-extra .ab-t2-hi-in{
        position:absolute;
        top:0;
        left:50%;
        white-space:nowrap;
        color:#fff;
        will-change:transform;
        animation:abSweepText 4s linear infinite;
    }
}

/* moving arrow on CTA */
.ab-cta-arrow{
    display:inline-block;
    margin-inline-start:8px;
    transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.ab-extra .ab-cta:not(:hover) .ab-cta-arrow{animation:abNudge 2s ease-in-out infinite}
.ab-cta:hover .ab-cta-arrow{transform:translateX(6px)}

/* logo pop-in on page load */
.ab-anim.ab-extra .ab-logo{animation:abPop .8s cubic-bezier(.34,1.56,.64,1) .2s backwards}

/* menu lift on hover (desktop) */
@media(min-width:992px){
    .ab-extra .ab-menu a{transition:color .25s ease,transform .25s cubic-bezier(.16,1,.3,1)}
    .ab-extra .ab-menu a:hover{transform:translateY(-2px)}
}

/* =============================================
   BACKGROUND ANIMATION — blueprint grid + steel truss
   (engineering theme, very subtle, GPU-friendly)
   ============================================= */
@keyframes abTruss{from{transform:translate3d(0,0,0)}to{transform:translate3d(-120px,0,0)}}
@keyframes abGrid{from{transform:translate3d(0,0,0)}to{transform:translate3d(-28px,-28px,0)}}

/* sits behind header content (header is its own stacking context) */
.ab-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-1;
    contain:strict;
}
/* blueprint grid, drifting slowly */
.ab-bg-grid{
    position:absolute;
    top:0;left:0;
    width:calc(100% + 28px);
    height:calc(100% + 28px);
    background-image:
        linear-gradient(var(--ab-accent) 1px,transparent 1px),
        linear-gradient(90deg,var(--ab-accent) 1px,transparent 1px);
    background-size:28px 28px;
    opacity:calc(.04 * var(--ab-bg-intensity,1));
    animation:abGrid 24s linear infinite;
    will-change:transform;
    backface-visibility:hidden;
}
/* steel truss lattice, sliding slowly (colour follows the accent colour) */
.ab-bg-truss{
    position:absolute;
    top:0;bottom:0;left:0;
    width:calc(100% + 120px);
    background:var(--ab-accent);
    opacity:calc(.07 * var(--ab-bg-intensity,1));
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='68' viewBox='0 0 120 68'%3E%3Cpath d='M0 8H120M0 60H120M0 60L30 8L60 60L90 8L120 60' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='68' viewBox='0 0 120 68'%3E%3Cpath d='M0 8H120M0 60H120M0 60L30 8L60 60L90 8L120 60' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
    -webkit-mask-size:120px 68px;
            mask-size:120px 68px;
    -webkit-mask-repeat:repeat-x;
            mask-repeat:repeat-x;
    -webkit-mask-position:0 50%;
            mask-position:0 50%;
    animation:abTruss 40s linear infinite;
    will-change:transform;
    backface-visibility:hidden;
}
/* fade the pattern out toward both edges (keeps logo & button area clean) */
.ab-bg::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,var(--ab-header-bg) 0%,transparent 16%,transparent 84%,var(--ab-header-bg) 100%);
}

/* =============================================
   OFF-SCREEN PAUSE
   JS toggles these when the top bar / header is not on screen,
   so nothing animates (or costs a frame) while you can't see it.
   ============================================= */
.ab-wrap.ab-t-off .ab-topbar,
.ab-wrap.ab-t-off .ab-topbar *,
.ab-wrap.ab-t-off .ab-topbar::after,
.ab-wrap.ab-t-off .ab-topbar *::before,
.ab-wrap.ab-t-off .ab-topbar *::after,
.ab-wrap.ab-h-off .ab-header,
.ab-wrap.ab-h-off .ab-header *,
.ab-wrap.ab-h-off .ab-header *::before,
.ab-wrap.ab-h-off .ab-header *::after,
.ab-wrap.ab-h-off .ab-cta-slot::after{
    animation-play-state:paused!important;
}