.lanim, .lanim * { box-sizing: border-box; }
.pillar-preview:has(.lanim) {
background: #fff;
}
.lanim {
position: absolute;
inset: 0;
overflow: hidden;
background: #fff;
container-type: inline-size;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
}
.lanim-ui {
position: absolute;
inset: 3.56% 2%;
display: flex;
flex-direction: column;
font-size: 8px;
font-size: calc(6px + .9cqw);
color: #2B292D;
--sp-1: .5em;
--sp-2: .9em;
--sp-3: 1.5em;
}
.lanim-head {
position: relative;
flex: 0 0 auto;
height: 1.89em;
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--sp-1);
}
.lanim .dw-live { top: 0; left: 0; font-size: .9em; }
.lanim .dw-live .dw-live-dot { animation: dw-pulse 2s ease-in-out infinite; }
.lanim-chip {
display: block;
padding: .34em .62em;
border-radius: .3em;
background: #00ffff;
color: #2B292D;
font-size: .88em;
font-weight: 700;
line-height: 1.35;
white-space: nowrap;
}
.lanim-win  { display: block; height: 1.35em; overflow: hidden; }
.lanim-roll { display: block; transform: translateY(0); }
.lanim-val  { display: block; height: 1.35em; text-align: center; }
.lanim-stage {
position: relative;
flex: 1 1 auto;
margin-top: var(--sp-2);
border-radius: .5em;
background: rgba(43, 41, 45, .045);
overflow: hidden;
contain: paint;
}
.lanim-cell {
position: absolute;
width: 32cqw;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: .35em;
background: #fff;
}
.lanim-cell img,
.lanim-cell video {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.lanim-cell:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 48%;
background: linear-gradient(to top, rgba(43, 41, 45, .5), rgba(43, 41, 45, 0));
}
.lanim .lanim-cell .dw-label {
position: absolute;
left: .8em;
bottom: .65em;
z-index: 1;
}
.lanim-cell--a {
left: calc(50% - 32.75cqw);
top: calc(50% - 18.75cqw);
transform: translate(-6.75cqw, 9.75cqw) scale(1.40625);
animation: lanim-a 10s linear infinite;
}
.lanim-cell--b {
left: calc(50% + .75cqw);
top: calc(50% - 18.75cqw);
transform: translate(6.75cqw, 9.75cqw) scale(1.40625);
animation: lanim-b 10s linear infinite;
}
.lanim-cell--c {
left: calc(50% - 16cqw);
top: calc(50% + .75cqw);
transform: scale(.92);
opacity: 0;
animation: lanim-c 10s linear infinite;
}
.lanim-roll { animation: lanim-roll 10s linear infinite; }
@keyframes lanim-a {
0%, 24%   { transform: translate(-6.75cqw, 9.75cqw) scale(1.40625); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
32%, 72%  { transform: translate(0, 0) scale(1);                         animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
80%, 100% { transform: translate(-6.75cqw, 9.75cqw) scale(1.40625); }
}
@keyframes lanim-b {
0%, 24%   { transform: translate(6.75cqw, 9.75cqw) scale(1.40625); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
32%, 72%  { transform: translate(0, 0) scale(1);                        animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
80%, 100% { transform: translate(6.75cqw, 9.75cqw) scale(1.40625); }
}
@keyframes lanim-c {
0%, 29.5%    { opacity: 0; transform: scale(.92); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
34%, 68%     { opacity: 1; transform: scale(1);   animation-timing-function: cubic-bezier(.5, 0, .75, .5); }
71.5%, 71.9% { opacity: 0; transform: scale(.96); }
72%, 100%    { opacity: 0; transform: scale(.92); }
}
@keyframes lanim-roll {
0%, 28.5%    { transform: translateY(0);       animation-timing-function: cubic-bezier(.4, .1, .4, .9); }
31.5%, 76.5% { transform: translateY(-1.35em); animation-timing-function: cubic-bezier(.4, .1, .4, .9); }
79.5%, 100%  { transform: translateY(-2.7em); }
}
.pillar-panel:not(.is-active) .lanim,
.pillar-panel:not(.is-active) .lanim * {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.lanim *, .lanim *:before, .lanim *:after { animation: none !important; }
}