.v247, .v247 * { box-sizing: border-box; }
.v247 {
position: absolute;
inset: 0;
display: block;
border-radius: 6px;
overflow: hidden;
background: #fff;
box-shadow: inset 0 0 0 1px rgba(43, 41, 45, .1);
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
}
.v247-stage { position: absolute; inset: 5% 10%; display: flex; flex-direction: column; }
.v247-screen {
position: relative; display: block; flex: 0 0 auto;
width: 83.3%; margin: 0 auto; aspect-ratio: 16 / 9;
overflow: hidden; border-radius: 3px; background: rgba(43, 41, 45, .07);
}
.v247-reel { position: absolute; inset: 0; display: flex; width: 500%; transform: translateX(0); }
.v247-panel { position: relative; flex: 0 0 20%; display: block; }
.v247-panel > img, .v247-panel > video {
position: absolute; inset: 0;
display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%;
}
.v247-sweep {
position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 100%;
transform: translateX(108%); pointer-events: none;
}
.v247-sweep:before {
content: ""; position: absolute; top: 0; bottom: 0; left: 0; display: block; width: 3px;
background: #00ffff; box-shadow: 0 0 10px 2px rgba(0, 255, 255, .55);
}
.v247-scrim {
position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; display: block; height: 58%;
background: linear-gradient(to bottom, rgba(43, 41, 45, 0), rgba(43, 41, 45, .74));
}
.v247-meta { position: absolute; right: 5%; bottom: 13%; left: 5%; z-index: 3; display: block; }
.v247-name {
display: block; width: 46%; height: 6px; border-radius: 3px;
background: rgba(255, 255, 255, .88);
transform: scaleX(1); transform-origin: left center;
}
.v247-sub {
display: block; width: 24%; height: 4px; margin-top: 4px; border-radius: 3px;
background: rgba(255, 255, 255, .5);
}
.v247-chip {
position: absolute; top: 7%; z-index: 3; display: flex; align-items: center;
overflow: hidden; border-radius: 3px; color: #fff;
font-size: 8.5px; font-weight: 700; letter-spacing: .06em; line-height: 1.4;
text-transform: uppercase; white-space: nowrap;
}
.v247-chip--always { right: 4%; padding: 3px 6px; background: rgba(43, 41, 45, .88); }
.v247 .dw-live { top: 7%; left: 4%; z-index: 3; }
.v247-rail { position: relative; display: block; flex: 1 1 auto; margin-top: 3%; overflow: hidden; }
.v247-strip { display: flex; width: 210%; height: 100%; transform: translateX(0); }
.v247-tile {
flex: 0 0 12.5%; display: block; overflow: hidden; border-right: 5px solid transparent;
border-radius: 3px; background: rgba(43, 41, 45, .15); background-clip: padding-box;
}
.v247-tile > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.v247-veil {
position: absolute; z-index: 1; inset: 0; display: block; pointer-events: none;
background: linear-gradient(to right,
rgba(255, 255, 255, .82) 0%,
rgba(255, 255, 255, .55) 14%,
rgba(255, 255, 255, .55) 22%,
rgba(255, 255, 255, 0)   27.5%,
rgba(255, 255, 255, 0)   50.5%,
rgba(255, 255, 255, .55) 56%,
rgba(255, 255, 255, .55) 82%,
rgba(255, 255, 255, .86) 100%);
}
.v247-done {
position: absolute; z-index: 2; top: 50%; left: 13.1%; display: block; width: 13px; height: 13px;
margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: rgba(43, 41, 45, .88);
}
.v247-done:after {
content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 3.5px; height: 6.5px;
margin: -4.5px 0 0 -1.75px; border: solid #fff; border-width: 0 1.5px 1.5px 0;
transform: rotate(42deg);
}
.v247-onair {
position: absolute; z-index: 2; top: 0; bottom: 0; left: 26.25%; right: calc(47.5% + 5px);
display: block; border-radius: 3px; box-shadow: inset 0 0 0 2px #00ffff;
opacity: 1; transform: scale(1);
}
.v247-mini {
position: absolute; right: 9%; bottom: 11%; left: 9%; display: block; height: 3px;
overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .34);
}
.v247-minifill {
display: block; width: 100%; height: 100%; background: #00ffff;
transform: scaleX(.565); transform-origin: left center;
}
.v247-next {
position: absolute; z-index: 2; top: 11%; left: 54.5%; display: block; padding: 2px 4px;
border-radius: 3px; background: rgba(43, 41, 45, .88); color: #fff;
font-size: 8px; font-weight: 700; letter-spacing: .06em; line-height: 1.4;
text-transform: uppercase; white-space: nowrap;
}
@keyframes v247-reel {
0%,  10%  { transform: translateX(0); }
15%, 35%  { transform: translateX(-20%); }
40%, 60%  { transform: translateX(-40%); }
65%, 85%  { transform: translateX(-60%); }
90%, 100% { transform: translateX(-80%); }
}
@keyframes v247-strip {
0%,  10%  { transform: translateX(0); }
15%, 35%  { transform: translateX(-12.5%); }
40%, 60%  { transform: translateX(-25%); }
65%, 85%  { transform: translateX(-37.5%); }
90%, 100% { transform: translateX(-50%); }
}
@keyframes v247-name {
0%,  10%  { transform: scaleX(1); }
15%, 35%  { transform: scaleX(.74); }
40%, 60%  { transform: scaleX(.92); }
65%, 85%  { transform: scaleX(.62); }
90%, 100% { transform: scaleX(1); }
}
@keyframes v247-fill {
0%     { transform: scaleX(.565); }
10%    { transform: scaleX(1); }
12.5%  { transform: scaleX(1); }
12.51% { transform: scaleX(.02); }
35%    { transform: scaleX(1); }
37.5%  { transform: scaleX(1); }
37.51% { transform: scaleX(.02); }
60%    { transform: scaleX(1); }
62.5%  { transform: scaleX(1); }
62.51% { transform: scaleX(.02); }
85%    { transform: scaleX(1); }
87.5%  { transform: scaleX(1); }
87.51% { transform: scaleX(.02); }
100%   { transform: scaleX(.565); }
}
@keyframes v247-sweep {
0%,     38%  { transform: translateX(108%); }
40%          { transform: translateX(100%); }
60%          { transform: translateX(0); }
63%          { transform: translateX(-8%); }
63.01%, 100% { transform: translateX(108%); }
}
@keyframes v247-ring {
0%,  40%  { opacity: 1; transform: scale(1); }
46%       { opacity: 0; transform: scale(1); }
58%       { opacity: 0; transform: scale(1.13); }
66%       { opacity: 1; transform: scale(1.13); }
78%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes v247-mark {
0%,  40%  { opacity: 1; }
46%, 58%  { opacity: 0; }
70%, 100% { opacity: 1; }
}
.ways-card:is(:hover, :focus-visible, .is-playing) .v247-reel { animation: v247-reel  10s cubic-bezier(.65, 0, .35, 1) infinite; }
.ways-card:is(:hover, :focus-visible, .is-playing) .v247-strip { animation: v247-strip 10s cubic-bezier(.65, 0, .35, 1) infinite; }
.ways-card:is(:hover, :focus-visible, .is-playing) .v247-name { animation: v247-name  10s cubic-bezier(.65, 0, .35, 1) infinite; }
.ways-card:is(:hover, :focus-visible, .is-playing) .v247-minifill { animation: v247-fill  10s linear infinite; }
.ways-card:is(:hover, :focus-visible, .is-playing) .v247-sweep { animation: v247-sweep 2.5s cubic-bezier(.65, 0, .35, 1) infinite; }
.ways-card:is(:hover, :focus-visible, .is-playing) .v247-onair { animation: v247-ring  2.5s ease-out infinite; }
.ways-card:is(:hover, :focus-visible, .is-playing) .v247-done,
.ways-card:is(:hover, :focus-visible, .is-playing) .v247-next { animation: v247-mark  2.5s ease-out infinite; }
.ways-card:is(:hover, :focus-visible, .is-playing) .v247 .dw-live .dw-live-dot { animation: dw-pulse 2.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.v247, .v247 *,
.ways-card:hover .v247 * {
animation: none !important;
transition: none !important;
}
}