.sb, .card:not(.lded), .sc .po:not(.lded), .ep .et:not(.lded), .cs.sl .pf, .trk, .chip.sl { position: relative; overflow: hidden; background: #15151c } .sb::before, .card:not(.lded)::before, .sc .po:not(.lded)::before, .ep .et:not(.lded)::before, .cs.sl .pf::before, .trk::before, .chip.sl::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .075) 50%, transparent 75%); transform: translateX(-100%); animation: shim 1.5s ease-in-out infinite } @keyframes shim { to { transform: translateX(100%) } } .card img, .sc .po img, .ep .et img { opacity: 0; transition: opacity .45s ease, filter .38s } .card img.ld, .sc .po img.ld, .ep .et img.ld { opacity: 1 } .sb { display: block; border-radius: 8px; height: 14px } .sec>.sb.h2 { width: 220px; height: 22px; margin: 0 var(--pad) 4px } .ds>.sb.h3 { width: 180px; height: 22px; margin: 0 6vw 6px } .ss>.sb.h3s { width: 160px; height: 18px } .sc.sl .sb { width: 80%; height: 13px; margin-top: 10px } .sc.sl .sb.s { width: 50%; height: 11px; margin-top: 6px } .chip.sl { height: clamp(36px, 3vw, 52px) } .trk { flex: 0 0 clamp(250px, 21vw, 400px); aspect-ratio: 16/10; border-radius: 20px } .cs.sl { flex: 0 0 clamp(96px, 7.6vw, 150px) } .hskel { display: none } .hc.sl .hskel { display: block } .hc.sl>:not(.hskel) { display: none } .hskel .t, .dsk .t { width: min(32vw, 400px); height: 10vh; border-radius: 14px; margin-bottom: 3vh } .hskel .m, .dsk .m { width: min(22vw, 300px); height: 18px; margin-bottom: 2vh } .hskel .l, .dsk .l { width: min(44vw, 620px); height: 15px; margin-bottom: 10px } .hskel .l.x, .dsk .l.x { width: min(26vw, 360px) } .hskel .hb, .dsk .hb { margin: 3vh 0 } .hskel .b, .dsk .b { width: clamp(130px, 11vw, 190px); height: clamp(44px, 3.6vw, 64px); border-radius: 999px } .hskel .b.c, .dsk .c { width: clamp(44px, 3.6vw, 64px); border-radius: 50% } .dw { animation: fin .4s ease } @keyframes fin { from { opacity: 0 } } #pspin { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); border-top-color: #fff; animation: spin .8s linear infinite; opacity: 0; pointer-events: none; transition: opacity .2s } #pl.buf #pspin { opacity: 1 } #pl.buf #pmid { opacity: 0 !important } @keyframes spin { to { transform: rotate(360deg) } } .pe .et:not(.lded)::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .075) 50%, transparent 75%); transform: translateX(-100%); animation: shim 1.5s ease-in-out infinite } .pe .et:not(.lded) { background: #15151c } .pe .et img { opacity: 0; transition: opacity .45s ease } .pe .et img.ld { opacity: 1 }