/* =========================
TOP CURRENT HEADLINE
========================= */

.topHeadlineBar{

position:absolute;

top:10px;

left:175px;

right:10px;




width:auto;

height:115px;




/* HARD RED GLASS */

background:

linear-gradient(

135deg,

rgba(255,0,0,.96),

rgba(190,0,0,.92),

rgba(255,20,20,.96)

);




backdrop-filter:

blur(18px) saturate(180%);

-webkit-backdrop-filter:

blur(18px) saturate(180%);




border:

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




box-shadow:

0 8px 24px rgba(0,0,0,.28);




overflow:hidden;




z-index:95;

}




/* GLASS SHINE */

.topHeadlineBar::after{

content:"";

position:absolute;

top:0;

left:-120%;




width:55%;

height:100%;




background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.24),

transparent

);




transform:

skewX(-25deg);




animation:

glassMove 3.5s linear infinite;

}




.topHeadlineTrack{

position:absolute;




width:100%;

height:100%;




display:flex;

align-items:center;

justify-content:center;




white-space:nowrap;

overflow:hidden;




padding:

0 40px;




font-size:44px;

font-weight:900;

color:white;




line-height:115px;




letter-spacing:.5px;




text-shadow:

2px 2px 8px rgba(0,0,0,.45);




/* RIGHT ENTRY + LEFT EXIT */

animation:

rightHeadline 6s linear infinite;

}




@keyframes glassMove{

0%{

left:-120%;

}




100%{

left:150%;

}

}




@keyframes rightHeadline{

0%{

transform:

translateX(100%);

opacity:0;

filter:

blur(8px);

}




10%{

transform:

translateX(0);

opacity:1;

filter:

blur(0);

}




80%{

transform:

translateX(0);

opacity:1;

filter:

blur(0);

}




100%{

transform:

translateX(-100%);

opacity:0;

filter:

blur(8px);

}

}