#promoWindow{

    position:fixed;

    right:-420px;

    top:50%;

    transform:translateY(-50%);


    width:375px;

    max-width:90vw;


    padding:6px;


    border-radius:28px;


    background:

    linear-gradient(

        145deg,

        rgba(255,255,255,.18),

        rgba(255,255,255,.04)

    );


    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);


    border:

    1px solid rgba(255,255,255,.22);



    box-shadow:

    0 25px 70px rgba(0,0,0,.45),

    inset 0 0 18px rgba(255,255,255,.12);



    z-index:999999;


    transition:right .6s ease;

}

/* появление */

#promoWindow.active{

    right:30px;

    animation:promoGlow 3s infinite ease-in-out;

}



/* картинка */

#promoWindow img{

    width:100%;
    display:block;
    border-radius:22px;

    transform:none;
    transition:none;

}




/* стеклянный слой сверху */

#promoWindow:before{


    content:"";


    position:absolute;


    top:0;

    left:0;


    width:100%;

    height:100%;


    border-radius:32px;


    background:

    linear-gradient(

        120deg,

        rgba(255,255,255,.35),

        transparent 30%

    );


    pointer-events:none;


}


/* нижняя подсветка */

#promoWindow:after{


    content:"";


    position:absolute;


    bottom:0;


    left:0;


    width:100%;


    height:80px;


    background:

    linear-gradient(

        transparent,

        rgba(0,0,0,.25)

    );


    z-index:2;


    pointer-events:none;


}




/* крестик */


#promoClose{


    position:absolute;


    right:12px;


    top:12px;


    width:40px;


    height:40px;


    border-radius:50%;


    border:none;


    background:

    rgba(0,0,0,.55);


    backdrop-filter:blur(10px);


    color:white;


    font-size:26px;


    cursor:pointer;


    z-index:5;


}



#promoClose:hover{

    background:#ff4500;

}



@media(max-width:600px){


#promoWindow{


    width:90vw;


    right:-100vw;


}



#promoWindow.active{

    right:5vw;

}


}
@keyframes promoGlow{


0%,100%{

    box-shadow:

    0 0 25px rgba(255,255,255,.15),

    0 30px 90px rgba(0,0,0,.6);

}



50%{

    box-shadow:

    0 0 45px rgba(255,80,0,.35),

    0 35px 100px rgba(0,0,0,.7);

}


}

/* =====================================
   АВТОМАТИЧЕСКИЙ ПЕРЕЛИВ СТЕКЛА
   ===================================== */

#promoWindow a{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:22px;

}


#promoWindow a::after{

    content:"";

    position:absolute;

    top:-50%;

    left:-90%;

    width:65%;

    height:220%;

    transform:rotate(22deg);

    background:linear-gradient(

        90deg,

        rgba(255,255,255,0),

        rgba(255,255,255,.03),

        rgba(255,255,255,.10),

        rgba(255,255,255,.18),

        rgba(255,255,255,.10),

        rgba(255,255,255,.03),

        rgba(255,255,255,0)

    );

    pointer-events:none;

    animation:promoGlass 5s ease-in-out infinite;

}

@keyframes promoGlass{

    0%{

        left:-90%;
        opacity:0;

    }

    10%{

        opacity:1;

    }

    60%{

        left:140%;
        opacity:1;

    }

    100%{

        left:140%;
        opacity:0;

    }

}