.ranim, .ranim * { box-sizing: border-box; }
.pillar-preview:has(.ranim) {
background: #fff;
}
.ranim {
position: absolute;
inset: 0;
overflow: hidden;
display: flex;
align-items: center;
padding: 4.2%;
background: #fff;
box-shadow: inset 0 0 0 1px rgba(43, 41, 45, .1);
container-type: inline-size;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
line-height: 1.25;
color: #2B292D;
}
.ranim-row {
width: 100%;
font-size: 9px;
font-size: clamp(8px, 4.4px + 1.06cqw, 14.5px);
display: grid;
grid-template-columns: 62% 1fr;
column-gap: 3.6%;
align-items: stretch;
}
@container (max-width: 479px) {
.ranim .ranim-row { grid-template-columns: 50% 1fr; column-gap: 4%; }
}
.ranim-player {
min-width: 0;
display: flex;
flex-direction: column;
}
.ranim-canvas {
position: relative;
flex: 0 0 auto;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: .5em;
background: rgba(43, 41, 45, .08);
box-shadow: inset 0 0 0 1px rgba(43, 41, 45, .06);
}
.ranim-frame {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
.ranim .dw-live {
z-index: 3;
top: 6.4%;
left: 3.6%;
font-size: .92em;
}
.ranim .dw-live .dw-live-dot { animation: dw-pulse 3s ease-in-out infinite; }
.ranim-transport {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: .8em;
margin-top: .85em;
}
.ranim-play {
flex: 0 0 auto;
width: 0;
height: 0;
border-style: solid;
border-width: .45em 0 .45em .74em;
border-color: transparent transparent transparent rgba(43, 41, 45, .5);
}
.ranim-track {
flex: 1 1 auto;
min-width: 0;
height: .46em;
overflow: hidden;
border-radius: .23em;
background: rgba(43, 41, 45, .1);
}
.ranim-fill {
display: block;
width: 38%;
height: 100%;
border-radius: .23em;
background: #00ffff;
}
.ranim-time {
flex: 0 0 auto;
font-size: .95em;
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: rgba(43, 41, 45, .5);
}
.ranim-chat {
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
padding: .55em;
overflow: hidden;
border-radius: .9em;
background: rgba(43, 41, 45, .05);
}
@container (max-width: 479px) {
.ranim .ranim-chat { padding: .35em; border-radius: .7em; }
}
.ranim-list {
position: relative;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 3.2em);
mask-image: linear-gradient(to bottom, transparent, #000 3.2em);
}
.ranim-compose {
flex: 0 0 auto;
margin-top: .55em;
padding: .5em .75em;
overflow: hidden;
border-radius: .7em;
background: #fff;
box-shadow: inset 0 0 0 1px rgba(43, 41, 45, .09);
font-size: .92em;
line-height: 1.4;
white-space: nowrap;
text-overflow: ellipsis;
color: rgba(43, 41, 45, .4);
}
@container (max-width: 479px) {
.ranim .ranim-compose { margin-top: .35em; padding: .3em .55em; border-radius: .5em; }
}
.ranim-cm {
--ranim-wait: 160%;
--ranim-step: -118%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
gap: .6em;
padding: .55em;
border-radius: .7em;
background: #fff;
box-shadow: 0 1px 3px rgba(43, 41, 45, .07), inset 0 0 0 1px rgba(43, 41, 45, .07);
opacity: 0;
transform: translateY(var(--ranim-wait));
}
.ranim-cm--you {
background: rgba(0, 255, 255, .14);
box-shadow: 0 1px 3px rgba(43, 41, 45, .05), inset 0 0 0 1px rgba(0, 255, 255, .42);
}
.ranim-cm-av {
flex: 0 0 auto;
display: block;
width: 2.3em;
height: 2.3em;
overflow: hidden;
border-radius: 50%;
background: rgba(43, 41, 45, .08);
box-shadow: 0 0 0 1px rgba(43, 41, 45, .09);
}
.ranim-cm--you .ranim-cm-av { box-shadow: 0 0 0 1.5px rgba(0, 255, 255, .6); }
.ranim-cm-av img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.ranim-cm-body {
min-width: 0;
display: flex;
flex-direction: column;
}
.ranim-cm-name {
flex: 0 0 auto;
min-width: 0;
display: block;
overflow: hidden;
font-size: .8em;
font-weight: 700;
line-height: 1.25;
white-space: nowrap;
text-overflow: ellipsis;
color: rgba(43, 41, 45, .45);
}
.ranim-cm--you .ranim-cm-name { color: rgba(43, 41, 45, .58); }
.ranim-cm-msg {
flex: 0 1 auto;
min-width: 0;
display: block;
overflow: hidden;
font-size: 1.02em;
font-weight: 600;
line-height: 1.32;
white-space: nowrap;
text-overflow: ellipsis;
color: #2B292D;
}
@container (max-width: 479px) {
.ranim .ranim-cm { gap: .4em; padding: .35em; border-radius: .5em; }
.ranim .ranim-cm-av { width: 1.6em; height: 1.6em; }
.ranim .ranim-cm-body { flex-direction: row; align-items: baseline; gap: .38em; }
.ranim .ranim-cm-name { font-size: .88em; }
.ranim .ranim-cm-msg { font-size: .97em; }
}
.ranim .ranim-cm--2 { opacity: 1; transform: translateY(calc(var(--ranim-step) * 4)); }
.ranim .ranim-cm--3 { opacity: 1; transform: translateY(calc(var(--ranim-step) * 3)); }
.ranim .ranim-cm--4 { opacity: 1; transform: translateY(calc(var(--ranim-step) * 2)); }
.ranim .ranim-cm--5 { opacity: 1; transform: translateY(var(--ranim-step)); }
.ranim .ranim-cm--6 { opacity: 1; transform: translateY(0); }
.ranim .ranim-cm--1 { animation: ranim-cm1 15s cubic-bezier(.22, .72, .24, 1) infinite; }
.ranim .ranim-cm--2 { animation: ranim-cm2 15s cubic-bezier(.22, .72, .24, 1) infinite; }
.ranim .ranim-cm--3 { animation: ranim-cm3 15s cubic-bezier(.22, .72, .24, 1) infinite; }
.ranim .ranim-cm--4 { animation: ranim-cm4 15s cubic-bezier(.22, .72, .24, 1) infinite; }
.ranim .ranim-cm--5 { animation: ranim-cm5 15s cubic-bezier(.22, .72, .24, 1) infinite; }
.ranim .ranim-cm--6 { animation: ranim-cm6 15s cubic-bezier(.22, .72, .24, 1) infinite; }
@keyframes ranim-cm1 {
0%, 3%        { opacity: 0; transform: translateY(var(--ranim-wait)); }
6%, 13%       { opacity: 1; transform: translateY(0); }
16%, 36.3%    { opacity: 1; transform: translateY(var(--ranim-step)); }
39.3%, 46.3%  { opacity: 1; transform: translateY(calc(var(--ranim-step) * 2)); }
49.3%, 69.7%  { opacity: 1; transform: translateY(calc(var(--ranim-step) * 3)); }
72.7%, 79.7%  { opacity: 1; transform: translateY(calc(var(--ranim-step) * 4)); }
82.7%         { opacity: 0; transform: translateY(calc(var(--ranim-step) * 5)); }
83.2%, 100%   { opacity: 0; transform: translateY(var(--ranim-wait)); }
}
@keyframes ranim-cm2 {
0%, 3%        { opacity: 1; transform: translateY(calc(var(--ranim-step) * 4)); }
6%            { opacity: 0; transform: translateY(calc(var(--ranim-step) * 5)); }
6.5%, 13%     { opacity: 0; transform: translateY(var(--ranim-wait)); }
16%, 36.3%    { opacity: 1; transform: translateY(0); }
39.3%, 46.3%  { opacity: 1; transform: translateY(var(--ranim-step)); }
49.3%, 69.7%  { opacity: 1; transform: translateY(calc(var(--ranim-step) * 2)); }
72.7%, 79.7%  { opacity: 1; transform: translateY(calc(var(--ranim-step) * 3)); }
82.7%, 100%   { opacity: 1; transform: translateY(calc(var(--ranim-step) * 4)); }
}
@keyframes ranim-cm3 {
0%, 3%        { opacity: 1; transform: translateY(calc(var(--ranim-step) * 3)); }
6%, 13%       { opacity: 1; transform: translateY(calc(var(--ranim-step) * 4)); }
16%           { opacity: 0; transform: translateY(calc(var(--ranim-step) * 5)); }
16.5%, 36.3%  { opacity: 0; transform: translateY(var(--ranim-wait)); }
39.3%, 46.3%  { opacity: 1; transform: translateY(0); }
49.3%, 69.7%  { opacity: 1; transform: translateY(var(--ranim-step)); }
72.7%, 79.7%  { opacity: 1; transform: translateY(calc(var(--ranim-step) * 2)); }
82.7%, 100%   { opacity: 1; transform: translateY(calc(var(--ranim-step) * 3)); }
}
@keyframes ranim-cm4 {
0%, 3%        { opacity: 1; transform: translateY(calc(var(--ranim-step) * 2)); }
6%, 13%       { opacity: 1; transform: translateY(calc(var(--ranim-step) * 3)); }
16%, 36.3%    { opacity: 1; transform: translateY(calc(var(--ranim-step) * 4)); }
39.3%         { opacity: 0; transform: translateY(calc(var(--ranim-step) * 5)); }
39.8%, 46.3%  { opacity: 0; transform: translateY(var(--ranim-wait)); }
49.3%, 69.7%  { opacity: 1; transform: translateY(0); }
72.7%, 79.7%  { opacity: 1; transform: translateY(var(--ranim-step)); }
82.7%, 100%   { opacity: 1; transform: translateY(calc(var(--ranim-step) * 2)); }
}
@keyframes ranim-cm5 {
0%, 3%        { opacity: 1; transform: translateY(var(--ranim-step)); }
6%, 13%       { opacity: 1; transform: translateY(calc(var(--ranim-step) * 2)); }
16%, 36.3%    { opacity: 1; transform: translateY(calc(var(--ranim-step) * 3)); }
39.3%, 46.3%  { opacity: 1; transform: translateY(calc(var(--ranim-step) * 4)); }
49.3%         { opacity: 0; transform: translateY(calc(var(--ranim-step) * 5)); }
49.8%, 69.7%  { opacity: 0; transform: translateY(var(--ranim-wait)); }
72.7%, 79.7%  { opacity: 1; transform: translateY(0); }
82.7%, 100%   { opacity: 1; transform: translateY(var(--ranim-step)); }
}
@keyframes ranim-cm6 {
0%, 3%        { opacity: 1; transform: translateY(0); }
6%, 13%       { opacity: 1; transform: translateY(var(--ranim-step)); }
16%, 36.3%    { opacity: 1; transform: translateY(calc(var(--ranim-step) * 2)); }
39.3%, 46.3%  { opacity: 1; transform: translateY(calc(var(--ranim-step) * 3)); }
49.3%, 69.7%  { opacity: 1; transform: translateY(calc(var(--ranim-step) * 4)); }
72.7%         { opacity: 0; transform: translateY(calc(var(--ranim-step) * 5)); }
73.2%, 79.7%  { opacity: 0; transform: translateY(var(--ranim-wait)); }
82.7%, 100%   { opacity: 1; transform: translateY(0); }
}
.pillar-panel:not(.is-active) .ranim,
.pillar-panel:not(.is-active) .ranim * {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.ranim *, .ranim *:before, .ranim *:after { animation: none !important; }
}