.panim, .panim * { box-sizing: border-box; }
.pillar-preview:has(.panim) {
background: #fff;
}
.panim {
position: absolute;
inset: 0;
overflow: hidden;
container-type: inline-size;
display: flex;
flex-direction: column;
background: #fff;
box-shadow: inset 0 0 0 1px rgba(43,41,45,.1);
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
line-height: 1.25;
}
.panim-head,
.panim-body {
font-size: 9px;
font-size: clamp(7.6px, 4px + 1.05cqw, 14px);
}
.panim-head {
flex: 0 0 auto;
display: flex;
align-items: center;
padding: 2.6% 4.2%;
border-bottom: 1px solid rgba(43,41,45,.08);
}
.panim-app { font-size: 1.18em; font-weight: 700; letter-spacing: -.01em; color: rgba(43,41,45,.88); }
.panim-modes {
display: flex;
align-items: center;
gap: .42em;
margin-left: auto;
}
.panim-chip {
display: flex;
align-items: center;
gap: .45em;
padding: .32em .58em;
border-radius: 3px;
box-shadow: inset 0 0 0 1px rgba(43,41,45,.16);
font-size: .88em;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
white-space: nowrap;
color: rgba(43,41,45,.5);
}
.panim-chipdot {
flex: 0 0 auto;
width: .45em;
height: .45em;
border-radius: 50%;
box-shadow: inset 0 0 0 1px rgba(43,41,45,.3);
}
.panim-chip--on {
background: rgba(0,255,255,.2);
box-shadow: none;
color: rgba(43,41,45,.74);
animation: panim-loopchip 14s linear infinite;
}
.panim-chip--on .panim-chipdot {
background: #00ffff;
box-shadow: 0 0 0 1px rgba(43,41,45,.12);
}
.panim-body {
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: stretch;
gap: 3.6%;
padding: 3.4% 4.2%;
}
.panim-player {
flex: 0 0 51%;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.panim-screen {
position: relative;
flex: 0 0 auto;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 4px;
background: rgba(43,41,45,.08);
box-shadow: inset 0 0 0 1px rgba(43,41,45,.06);
}
.panim-shot {
position: absolute;
inset: 0;
display: block;
}
.panim-shot > img,
.panim-shot > video {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.panim-shot--a { opacity: 1; animation: panim-turn-a 14s linear infinite; }
.panim-shot--b { opacity: 0; animation: panim-turn-b 14s linear infinite; }
.panim .dw-live {
top: 5.6%;
left: 4%;
z-index: 2;
font-size: .86em;
}
.panim-transport {
display: flex;
align-items: center;
gap: .75em;
margin-top: 4.2%;
}
.panim-play {
flex: 0 0 auto;
width: 0;
height: 0;
border-style: solid;
border-width: .42em 0 .42em .7em;
border-color: transparent transparent transparent rgba(43,41,45,.55);
}
.panim-track {
flex: 1 1 auto;
height: .4em;
overflow: hidden;
border-radius: .2em;
background: rgba(43,41,45,.11);
}
.panim-fill {
display: block;
width: 100%;
height: 100%;
background: #00ffff;
transform: scaleX(.28);
transform-origin: left center;
animation: panim-fill 7s linear infinite;
}
.panim-dur {
flex: 0 0 auto;
width: 3.1em;
height: 1.35em;
overflow: hidden;
font-size: .92em;
font-weight: 600;
text-align: right;
color: rgba(43,41,45,.5);
}
.panim-now {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
padding: 1.7em 4% 3.15%;
background: linear-gradient(to top,
rgba(43,41,45,.82) 0%,
rgba(43,41,45,.6) 42%,
rgba(43,41,45,0) 100%);
font-size: .94em;
}
.panim-nowtitle {
display: block;
height: 1.45em;
margin-top: -.3em;
overflow: hidden;
font-size: 1.2em;
font-weight: 700;
letter-spacing: -.01em;
color: #fff;
text-shadow: 0 1px 2px rgba(43,41,45,.5);
}
.panim-roll { display: block; animation: panim-roll 14s linear infinite; }
.panim-dur .panim-roll > span      { display: block; height: 1.35em; line-height: 1.35em; white-space: nowrap; }
.panim-nowtitle .panim-roll > span { display: block; height: 1.45em; line-height: 1.45em; white-space: nowrap; }
.panim-queue {
flex: 1 1 auto;
align-self: center;
min-width: 0;
height: 85%;
display: flex;
flex-direction: column;
padding: .8em .5em;
border-radius: 5px;
background: rgba(43,41,45,.045);
}
.panim-list {
position: relative;
flex: 1 1 auto;
}
.panim-row {
position: absolute;
right: 0;
left: 0;
height: 30.6%;
display: flex;
align-items: center;
gap: .42em;
padding: 0 .45em 0 .85em;
border-radius: 4px;
background: rgba(255,255,255,0);
}
.panim-row--e1 { top: 0;     z-index: 1; }
.panim-row--e2 { top: 34.7%; z-index: 1; animation: panim-row-e2 14s linear infinite; }
.panim-row--e3 { top: 69.4%; z-index: 1; animation: panim-row-e3 14s linear infinite; }
.panim-mark {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 0;
height: 30.6%;
border-radius: 4px;
background: rgba(0,255,255,.22);
box-shadow: inset 3px 0 0 #00ffff;
animation: panim-mark 14s linear infinite;
}
.panim-thumb {
position: relative;
z-index: 1;
flex: 0 0 auto;
height: 60%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 3px;
background: rgba(43,41,45,.14);
}
.panim-thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.panim-rowtitle {
position: relative;
z-index: 1;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1em;
font-weight: 700;
letter-spacing: -.01em;
color: #2B292D;
}
.panim-rowdur {
position: relative;
z-index: 1;
flex: 0 0 auto;
font-size: .82em;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: rgba(43,41,45,.48);
}
.panim-grip {
position: relative;
z-index: 1;
flex: 0 0 .5em;
margin-left: .3em;
height: 1.05em;
background:
linear-gradient(rgba(43,41,45,.32), rgba(43,41,45,.32)) 0 0 / 1px 100% no-repeat,
linear-gradient(rgba(43,41,45,.32), rgba(43,41,45,.32)) 100% 0 / 1px 100% no-repeat;
}
.panim-cursor {
position: absolute;
z-index: 5;
top: 132%;
left: 106%;
width: clamp(10px, 1.1em, 15px);
height: clamp(14.2px, 1.56em, 21.3px);
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,.45));
animation: panim-cursor 7s linear infinite;
}
.panim-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%);
}
@keyframes panim-turn-a {
0%,  35%  { opacity: 1; }
37%, 85%  { opacity: 0; }
87%, 100% { opacity: 1; }
}
@keyframes panim-turn-b {
0%,  35%  { opacity: 0; }
37%, 85%  { opacity: 1; }
87%, 100% { opacity: 0; }
}
@keyframes panim-roll {
0%,  34%  { transform: translateY(0);
animation-timing-function: cubic-bezier(.22,.72,.24,1); }
38%, 84%  { transform: translateY(-50%);
animation-timing-function: cubic-bezier(.22,.72,.24,1); }
88%, 100% { transform: translateY(0); }
}
@keyframes panim-mark {
0%,   34%  { top: 0;
animation-timing-function: cubic-bezier(.65,0,.35,1); }
38%,  65%  { top: 34.7%;
animation-timing-function: cubic-bezier(.22,.72,.24,1); }
73%,  83%  { top: 69.4%;
animation-timing-function: cubic-bezier(.65,0,.35,1); }
89%, 100%  { top: 0; }
}
@keyframes panim-fill {
0%     { transform: scaleX(.28); }
72%    { transform: scaleX(1); }
72.01% { transform: scaleX(0); }
100%   { transform: scaleX(.28); }
}
@keyframes panim-row-e3 {
0%,  12%  { top: 69.4%; z-index: 1; transform: none;
background: rgba(255,255,255,0); box-shadow: 0 0 0 rgba(43,41,45,0);
animation-timing-function: cubic-bezier(.3,0,.5,1); }
14%       { top: 69.4%; z-index: 3; transform: translateX(-1.8%) scale(1.02);
background: rgba(255,255,255,1); box-shadow: 0 7px 16px rgba(43,41,45,.17);
animation-timing-function: cubic-bezier(.5,0,.22,1); }
24%       { top: 34.7%; z-index: 3; transform: translateX(-1.8%) scale(1.02);
background: rgba(255,255,255,1); box-shadow: 0 7px 16px rgba(43,41,45,.17);
animation-timing-function: cubic-bezier(.22,.72,.24,1); }
26%, 65%  { top: 34.7%; z-index: 1; transform: none;
background: rgba(255,255,255,0); box-shadow: 0 0 0 rgba(43,41,45,0);
animation-timing-function: cubic-bezier(.22,.72,.24,1); }
73%, 100% { top: 69.4%; z-index: 1; transform: none;
background: rgba(255,255,255,0); box-shadow: 0 0 0 rgba(43,41,45,0); }
}
@keyframes panim-row-e2 {
0%,  15%  { top: 34.7%; z-index: 1; transform: none;
background: rgba(255,255,255,0); box-shadow: 0 0 0 rgba(43,41,45,0);
animation-timing-function: cubic-bezier(.22,.72,.24,1); }
23%, 62%  { top: 69.4%; z-index: 1; transform: none;
background: rgba(255,255,255,0); box-shadow: 0 0 0 rgba(43,41,45,0);
animation-timing-function: cubic-bezier(.3,0,.5,1); }
64%       { top: 69.4%; z-index: 3; transform: translateX(-1.8%) scale(1.02);
background: rgba(255,255,255,1); box-shadow: 0 7px 16px rgba(43,41,45,.17);
animation-timing-function: cubic-bezier(.5,0,.22,1); }
74%       { top: 34.7%; z-index: 3; transform: translateX(-1.8%) scale(1.02);
background: rgba(255,255,255,1); box-shadow: 0 7px 16px rgba(43,41,45,.17);
animation-timing-function: cubic-bezier(.22,.72,.24,1); }
76%, 100% { top: 34.7%; z-index: 1; transform: none;
background: rgba(255,255,255,0); box-shadow: 0 0 0 rgba(43,41,45,0); }
}
@keyframes panim-cursor {
0%,  12%  { top: 132%;  left: 106%; opacity: 0; transform: scale(1);
animation-timing-function: cubic-bezier(.2,.7,.3,1); }
18%       { opacity: 1; }
24%       { top: 84.7%; left: calc(100% - .7em); opacity: 1; transform: scale(1); }
26%       { transform: scale(.82); }
28%       { top: 84.7%; left: calc(100% - .7em); opacity: 1; transform: scale(1);
animation-timing-function: cubic-bezier(.5,0,.22,1); }
48%       { top: 50%;   left: calc(100% - .7em); opacity: 1; transform: scale(1); }
50%       { transform: scale(.82); }
52%       { top: 50%;   left: calc(100% - .7em); opacity: 1; transform: scale(1);
animation-timing-function: cubic-bezier(.4,0,.6,1); }
62%       { top: 124%;  left: 108%; opacity: 0; transform: scale(1); }
68%, 100% { top: 132%;  left: 106%; opacity: 0; transform: scale(1); }
}
@keyframes panim-loopchip {
0%,  82%  { background: rgba(0,255,255,.2); }
86%       { background: rgba(0,255,255,.48); }
90%, 100% { background: rgba(0,255,255,.2); }
}
.pillar-panel:not(.is-active) .panim,
.pillar-panel:not(.is-active) .panim * {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.panim *, .panim *:before { animation: none !important; }
}