.uanim, .uanim * { box-sizing: border-box; }
.pillar-preview:has(.uanim) {
background: #fff;
}
.uanim {
position: absolute;
inset: 0;
overflow: hidden;
container-type: inline-size;
background: #fff;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
line-height: 1.25;
color: #2B292D;
}
.uanim-stage {
position: absolute;
inset: 0;
font-size: 9px;
font-size: clamp(8px, 4.4px + 1.06cqw, 14.5px);
}
.uanim:after {
content: "";
position: absolute;
z-index: 9;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(43, 41, 45, .1);
}
.uanim-desk {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
width: 34%;
background: rgba(43,41,45,.05);
border-right: 1px solid rgba(43,41,45,.16);
}
.uanim .uanim-desklabel {
position: absolute;
z-index: 1;
top: calc(6.5% + .22em);
left: 4%;
}
.uanim-apptitle {
position: absolute;
z-index: 1;
top: 6.5%;
left: 38%;
font-size: 1.05em;
font-weight: 700;
letter-spacing: -.01em;
white-space: nowrap;
}
.uanim-drop {
position: absolute;
z-index: 2;
top: 20%;
left: 38%;
width: 58%;
height: 58%;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed rgba(43,41,45,.26);
border-radius: 4px;
background: rgba(43,41,45,.028);
box-shadow: inset 0 0 0 1px rgba(43,41,45,0);
animation: uanim-drop 13s linear infinite;
}
.uanim-hint {
font-size: .95em;
font-weight: 600;
color: rgba(43,41,45,.44);
animation: uanim-hint 13s linear infinite;
}
.uanim-go {
position: absolute;
z-index: 3;
bottom: 6.4%;
right: 4%;
display: flex;
align-items: center;
height: 2.65em;
padding: 0 1.2em;
border-radius: 4px;
background: rgba(43,41,45,.02);
box-shadow: inset 0 0 0 1px rgba(43,41,45,.16), 0 0 0 rgba(0,0,255,0);
color: rgba(43,41,45,.38);
font-size: .98em;
font-weight: 700;
letter-spacing: .02em;
white-space: nowrap;
animation: uanim-go 13s linear infinite;
}
.uanim-file {
position: absolute;
z-index: 4;
top: 34%;
left: 4%;
width: 25.6%;
padding: 1.8%;
border-radius: 5px;
background: #fff;
box-shadow: 0 2px 7px rgba(43,41,45,.13), inset 0 0 0 1px rgba(43,41,45,.1);
animation: uanim-file 13s linear infinite;
}
.uanim-slot {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 3px;
background: rgba(43,41,45,.08);
}
.uanim-name {
display: block;
margin-top: .5em;
overflow: hidden;
font-size: 1.02em;
font-weight: 700;
line-height: 1.2;
letter-spacing: -.01em;
text-overflow: ellipsis;
white-space: nowrap;
}
.uanim-meta {
display: block;
margin-top: .18em;
overflow: hidden;
font-size: .86em;
font-weight: 600;
line-height: 1.2;
color: rgba(43,41,45,.5);
text-overflow: ellipsis;
white-space: nowrap;
}
.uanim-shot {
position: absolute;
z-index: 5;
top: 37.2%;
left: 5.8%;
width: 22%;
height: 22%;
overflow: hidden;
border-radius: 3px;
background: rgba(43,41,45,.08);
animation: uanim-shot 13s linear infinite;
}
.uanim-frame {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 38%;
}
.uanim-up {
position: absolute;
z-index: 6;
top: 20%;
left: 38%;
width: 58%;
height: 58%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 10%;
border-radius: 4px;
background: rgba(255,255,255,.88);
opacity: 0;
animation: uanim-up 13s linear infinite;
}
.uanim-uphead {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: .6em;
}
.uanim-uppct {
overflow: hidden;
height: 1.15em;
font-size: 1.45em;
font-weight: 700;
line-height: 1.15;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
text-align: right;
}
.uanim-uproll {
display: block;
animation: uanim-uproll 13s linear infinite;
}
.uanim-uproll > span {
display: block;
height: 1.15em;
line-height: 1.15;
}
.uanim-uptrack {
flex: none;
margin-top: .9em;
height: .5em;
overflow: hidden;
border-radius: 99px;
background: rgba(43,41,45,.17);
}
.uanim-upfill {
display: block;
width: 0;
height: 100%;
border-radius: 99px;
background: #00ffff;
animation: uanim-upfill 13s linear infinite;
}
.uanim-cursor {
position: absolute;
z-index: 7;
top: 106%;
left: -8%;
width: 12px;
width: clamp(11px, 2.1cqw, 19px);
aspect-ratio: 12 / 17;
opacity: 0;
transform-origin: 0 0;
filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)
drop-shadow(0 1px 2.5px rgba(43,41,45,.5));
animation: uanim-cursor 13s linear infinite;
}
.uanim-cursor:before {
content: "";
position: absolute;
inset: 0;
display: block;
background: #2B292D;
clip-path: polygon(0 0, 0 78%, 24% 60%, 39% 97%, 60% 88%, 45% 53%, 73% 53%);
}
.uanim .dw-live {
z-index: 8;
top: 7.1%;
left: 4%;
font-size: .86em;
opacity: 0;
animation: uanim-pill 13s linear infinite;
}
.uanim .dw-live .dw-live-dot { animation: dw-pulse 3.25s ease-in-out infinite; }
.uanim .dw-live .dw-count-roll { animation: uanim-tick 13s var(--dw-count-ease) infinite; }
.uanim .dw-cm {
z-index: 8;
bottom: 7.1%;
left: 4%;
max-width: 54%;
font-size: 1em;
}
.uanim .uanim-cm--1 { animation: uanim-cm1 13s cubic-bezier(.22, .72, .24, 1) infinite; }
.uanim .uanim-cm--2 { animation: uanim-cm2 13s cubic-bezier(.22, .72, .24, 1) infinite; }
.uanim .uanim-cm--3 { animation: uanim-cm3 13s cubic-bezier(.22, .72, .24, 1) infinite; }
@keyframes uanim-shot {
0%, 11%      { top: 37.2%; left: 5.8%; width: 22%;  height: 22%;  border-radius: 3px; opacity: 1; transform: none;
animation-timing-function: cubic-bezier(.3, 0, .5, 1); }
13%          { top: 34.6%; left: 7%;   width: 22%;  height: 22%;  border-radius: 3px; opacity: 1; transform: rotate(-2.2deg) scale(1.03);
animation-timing-function: cubic-bezier(.5, 0, .7, .55); }
24%          { top: 18.5%; left: 36%;  width: 22%;  height: 22%;  border-radius: 3px; opacity: 1; transform: rotate(-2.2deg) scale(1.03);
animation-timing-function: cubic-bezier(.2, .65, .25, 1); }
30%          { top: 38%;   left: 56%;  width: 22%;  height: 22%;  border-radius: 3px; opacity: 1; transform: rotate(-1.1deg) scale(1.03);
animation-timing-function: cubic-bezier(.3, .8, .4, 1); }
31.5%        { top: 38%;   left: 56%;  width: 22%;  height: 22%;  border-radius: 3px; opacity: 1; transform: none;
animation-timing-function: cubic-bezier(.22, .72, .24, 1); }
37%, 55.5%   { top: 20%;   left: 38%;  width: 58%;  height: 58%;  border-radius: 4px; opacity: 1; transform: none;
animation-timing-function: cubic-bezier(.55, 0, .2, 1); }
64%, 69%     { top: 0;     left: 0;    width: 100%; height: 100%; border-radius: 0;   opacity: 1; transform: none;
animation-timing-function: linear; }
93%          { top: 0;     left: 0;    width: 100%; height: 100%; border-radius: 0;   opacity: 1; transform: scale(1.03);
animation-timing-function: ease-out; }
95.6%        { top: 0;     left: 0;    width: 100%; height: 100%; border-radius: 0;   opacity: 0; transform: scale(1.06); }
95.7%        { top: 37.2%; left: 5.8%; width: 22%;  height: 22%;  border-radius: 3px; opacity: 0; transform: none;
animation-timing-function: cubic-bezier(.22, .72, .24, 1); }
98.6%, 100%  { top: 37.2%; left: 5.8%; width: 22%;  height: 22%;  border-radius: 3px; opacity: 1; transform: none; }
}
@keyframes uanim-file {
0%, 11%      { top: 34%;    left: 4%;    opacity: 1; transform: none;
box-shadow: 0 2px 7px rgba(43,41,45,.13), inset 0 0 0 1px rgba(43,41,45,.1);
animation-timing-function: cubic-bezier(.3, 0, .5, 1); }
13%          { top: 31.4%;  left: 5.2%;  opacity: 1; transform: rotate(-2.2deg) scale(1.03);
box-shadow: 0 11px 22px rgba(43,41,45,.2), inset 0 0 0 1px rgba(43,41,45,.1);
animation-timing-function: cubic-bezier(.5, 0, .7, .55); }
24%          { top: 15.3%;  left: 34.2%; opacity: 1; transform: rotate(-2.2deg) scale(1.03);
box-shadow: 0 11px 22px rgba(43,41,45,.2), inset 0 0 0 1px rgba(43,41,45,.1);
animation-timing-function: cubic-bezier(.2, .65, .25, 1); }
30%          { top: 34.8%;  left: 54.2%; opacity: 1; transform: rotate(-1.1deg) scale(1.03);
box-shadow: 0 11px 22px rgba(43,41,45,.2), inset 0 0 0 1px rgba(43,41,45,.1);
animation-timing-function: cubic-bezier(.3, .8, .4, 1); }
31.5%        { top: 34.8%;  left: 54.2%; opacity: 1; transform: none;
box-shadow: 0 2px 7px rgba(43,41,45,.13), inset 0 0 0 1px rgba(43,41,45,.1);
animation-timing-function: ease-out; }
35%, 89%     { top: 34.8%;  left: 54.2%; opacity: 0; transform: scale(.96);
box-shadow: 0 2px 7px rgba(43,41,45,0), inset 0 0 0 1px rgba(43,41,45,.1); }
89.01%, 95.7% { top: 34%;   left: 4%;    opacity: 0; transform: none;
box-shadow: 0 2px 7px rgba(43,41,45,.13), inset 0 0 0 1px rgba(43,41,45,.1); }
98.6%, 100%  { top: 34%;    left: 4%;    opacity: 1; transform: none;
box-shadow: 0 2px 7px rgba(43,41,45,.13), inset 0 0 0 1px rgba(43,41,45,.1); }
}
@keyframes uanim-cursor {
0%, 6%       { top: 106%;  left: -8%;   opacity: 0; transform: scale(1);
animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
9%           { opacity: 1; }
11%          { top: 48.2%; left: 16.8%; opacity: 1; transform: scale(1); }
12%          { transform: scale(.88); }
13%          { top: 48.2%; left: 16.8%; opacity: 1; transform: scale(1);
animation-timing-function: cubic-bezier(.5, 0, .7, .55); }
24%          { top: 29.5%; left: 47%;   animation-timing-function: cubic-bezier(.2, .65, .25, 1); }
30%          { top: 49%;   left: 67%;   opacity: 1; transform: scale(1); }
31%          { transform: scale(.88); }
32%          { top: 49%;   left: 67%;   opacity: 1; transform: scale(1);
animation-timing-function: cubic-bezier(.4, 0, .3, 1); }
33%          { top: 49%;   left: 67%; }
45%, 54%     { top: 88%;   left: 93%;   opacity: 1; transform: scale(1); }
55%          { transform: scale(.88); }
56%          { transform: scale(1); }
57%          { top: 88%;   left: 93%;   opacity: 1; transform: scale(1);
animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
62%          { top: 104%;  left: 100%;  opacity: 0; transform: scale(1); }
63%, 100%    { top: 106%;  left: -8%;   opacity: 0; transform: scale(1); }
}
@keyframes uanim-drop {
0%, 26%      { border-color: rgba(43,41,45,.26); background: rgba(43,41,45,.028); box-shadow: inset 0 0 0 1px rgba(43,41,45,0); }
29%, 31%     { border-color: rgba(0,255,255,1);  background: rgba(0,255,255,.16); box-shadow: inset 0 0 0 1px rgba(0,255,255,0); }
37%, 89%     { border-color: rgba(43,41,45,0);   background: rgba(43,41,45,0);    box-shadow: inset 0 0 0 1px rgba(43,41,45,.11); }
89.01%, 100% { border-color: rgba(43,41,45,.26); background: rgba(43,41,45,.028); box-shadow: inset 0 0 0 1px rgba(43,41,45,0); }
}
@keyframes uanim-hint {
0%, 17%      { opacity: 1; }
22%, 89%     { opacity: 0; }
89.01%, 100% { opacity: 1; }
}
@keyframes uanim-go {
0%, 46%      { background: rgba(43,41,45,.02); color: rgba(43,41,45,.38);
box-shadow: inset 0 0 0 1px rgba(43,41,45,.16), 0 0 0 rgba(0,0,255,0); transform: none;
animation-timing-function: cubic-bezier(.22, .72, .24, 1); }
49%, 54%     { background: #0000ff;            color: #fff;
box-shadow: inset 0 0 0 1px rgba(0,0,255,0), 0 .3em .8em rgba(0,0,255,.34); transform: none; }
55%          { background: #0000c4;            color: #fff;
box-shadow: inset 0 0 0 1px rgba(0,0,255,0), 0 .1em .3em rgba(0,0,255,.4); transform: scale(.955); }
55.5%, 89%   { background: #0000ff;            color: #fff;
box-shadow: inset 0 0 0 1px rgba(0,0,255,0), 0 .3em .8em rgba(0,0,255,.34); transform: none; }
89.01%, 100% { background: rgba(43,41,45,.02); color: rgba(43,41,45,.38);
box-shadow: inset 0 0 0 1px rgba(43,41,45,.16), 0 0 0 rgba(0,0,255,0); transform: none; }
}
@keyframes uanim-up {
0%, 36.5%    { opacity: 0;
animation-timing-function: cubic-bezier(.22, .72, .24, 1); }
38.5%, 47.5% { opacity: 1; }
50.5%, 100%  { opacity: 0; }
}
@keyframes uanim-uproll {
0%, 40.2%    { transform: translateY(0); }
40.3%, 41.9% { transform: translateY(-25%); }
42%, 43.7%   { transform: translateY(-50%); }
43.8%, 89%   { transform: translateY(-75%); }
89.01%, 100% { transform: translateY(0); }
}
@keyframes uanim-upfill {
0%, 40.2%    { width: 0; }
40.7%, 41.9% { width: 27%; }
42.5%, 43.7% { width: 68%; }
44.3%, 89%   { width: 100%; }
89.01%, 100% { width: 0; }
}
@keyframes uanim-pill {
0%, 64%      { opacity: 0; transform: translateY(.5em);
animation-timing-function: cubic-bezier(.22, .72, .24, 1); }
68%, 90%     { opacity: 1; transform: none; }
93.5%        { opacity: 0; transform: none; }
93.6%, 100%  { opacity: 0; transform: translateY(.5em); }
}
@keyframes uanim-tick {
0%,    68.4% { transform: translateY(0); }
70.1%, 71.9% { transform: translateY(-14.2857%); }
73.6%, 75.4% { transform: translateY(-28.5714%); }
77.1%, 78.9% { transform: translateY(-42.8571%); }
80.6%, 82.4% { transform: translateY(-57.1429%); }
84.1%, 85.9% { transform: translateY(-71.4286%); }
87.6%, 93.5% { transform: translateY(-85.7143%); }
93.6%, 100%  { transform: translateY(0); }
}
@keyframes uanim-cm1 {
0%,    69%   { opacity: 0; transform: translateY(var(--dw-cm-wait)); }
71.9%, 76%   { opacity: 1; transform: translateY(0); }
78.9%, 83%   { opacity: 1; transform: translateY(var(--dw-cm-step)); }
85.9%, 90%   { opacity: 1; transform: translateY(calc(var(--dw-cm-step) * 2)); }
93%          { opacity: 0; transform: translateY(calc(var(--dw-cm-step) * 2)); }
93.1%, 100%  { opacity: 0; transform: translateY(var(--dw-cm-wait)); }
}
@keyframes uanim-cm2 {
0%,    76%   { opacity: 0; transform: translateY(var(--dw-cm-wait)); }
78.9%, 83%   { opacity: 1; transform: translateY(0); }
85.9%, 90%   { opacity: 1; transform: translateY(var(--dw-cm-step)); }
93%          { opacity: 0; transform: translateY(var(--dw-cm-step)); }
93.1%, 100%  { opacity: 0; transform: translateY(var(--dw-cm-wait)); }
}
@keyframes uanim-cm3 {
0%,    83%   { opacity: 0; transform: translateY(var(--dw-cm-wait)); }
85.9%, 90%   { opacity: 1; transform: translateY(0); }
93%          { opacity: 0; transform: translateY(0); }
93.1%, 100%  { opacity: 0; transform: translateY(var(--dw-cm-wait)); }
}
.pillar-panel:not(.is-active) .uanim,
.pillar-panel:not(.is-active) .uanim * {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.uanim *, .uanim *:before, .uanim *:after { animation: none !important; }
.uanim-cursor,
.uanim-up,
.uanim .dw-live,
.uanim .dw-cm { opacity: 0; }
}