.fanim, .fanim * { box-sizing: border-box; }
.pillar-preview:has(.fanim) {
background: #fff;
}
.fanim {
position: absolute;
inset: 0;
overflow: hidden;
background: #fff;
container-type: inline-size;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
}
.fanim-stage {
position: absolute;
inset: 7.3% 4.1%;
padding-bottom: 1.36em;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 8px;
font-size: calc(4px + 1.78cqw);
color: #2B292D;
--fanim-x: 5%;
--fanim-y: 8.9%;
--fanim-on: .74em;
--fanim-key: 80ms;
}
.fanim-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-rows: auto auto;
grid-template-areas:
"la . lb"
"ca go cb";
column-gap: .6em;
}
.fanim .fanim-label--edit { grid-area: la; }
.fanim .fanim-label--live { grid-area: lb; }
.fanim-canvas {
position: relative;
width: 100%;
margin-top: .3em;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: .3em;
background: rgba(43, 41, 45, .08);
}
.fanim-canvas--edit { grid-area: ca; }
.fanim-canvas--live { grid-area: cb; }
.fanim-frame {
position: absolute; inset: 0; display: block; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 50%;
}
.fanim .dw-live { top: var(--fanim-y); left: var(--fanim-x); z-index: 2; font-size: var(--fanim-on); }
.fanim .dw-live .dw-live-dot { animation: dw-pulse 2.5s ease-in-out infinite; }
.fanim-banner {
position: absolute; left: var(--fanim-x); bottom: var(--fanim-y); z-index: 2;
display: flex; flex-direction: column;
padding: .45em .85em .5em;
border-radius: .35em;
background: rgba(255, 255, 255, .94);
font-size: var(--fanim-on);
white-space: nowrap;
}
.fanim-banner-name { display: flex; align-items: center; font-size: 1em; font-weight: 700; line-height: 1.25; }
.fanim-banner-role {
display: block;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: .78em; font-weight: 400; line-height: 1.35;
color: rgba(43, 41, 45, .62);
}
.fanim-canvas--edit .fanim-banner--b { opacity: 0; }
.fanim-canvas--live .fanim-banner--b { opacity: 0; transform: translateX(-110%); }
.fanim-txt { position: relative; min-height: 1.25em; }
.fanim-ch { position: relative; }
.fanim-banner--b .fanim-ch { opacity: 0; }
.fanim-sel {
position: absolute;
top: -.05em;
bottom: -.05em;
left: -.12em;
right: -.12em;
background: #00ffff;
transform: scaleX(0);
transform-origin: 0 50%;
}
.fanim-caret {
position: absolute;
top: 0;
bottom: 0;
left: calc(100% + .1em);
width: 1px;
background: #2B292D;
opacity: 0;
}
.fanim-hl {
position: absolute;
inset: -.3em;
border: 1px solid #2B292D;
opacity: 0;
}
.fanim-canvas--edit .fanim-banner--b .fanim-hl { opacity: 1; }
.fanim-hd {
position: absolute;
display: block;
width: .5em;
height: .5em;
background: #2B292D;
}
.fanim-hd--tl { top: -.25em; left: -.25em; }
.fanim-hd--tr { top: -.25em; right: -.25em; }
.fanim-hd--bl { bottom: -.25em; left: -.25em; }
.fanim-hd--br { bottom: -.25em; right: -.25em; }
.fanim-go {
grid-area: go;
align-self: center;
justify-self: center;
display: flex;
align-items: center;
height: 2.2em;
padding: 0 .6em;
border-radius: .38em;
background: #2B292D;
color: #fff;
font-size: 1em;
font-weight: 700;
line-height: 1;
letter-spacing: .02em;
white-space: nowrap;
}
.fanim-canvas--edit .fanim-banner--a { animation: fanim-show-a 10s step-end infinite; }
.fanim-canvas--edit .fanim-banner--b { animation: fanim-show-b 10s step-end infinite; }
.fanim-banner--a .fanim-ch { animation: fanim-type-a 10s step-end calc(var(--i) * var(--fanim-key)) infinite; }
.fanim-banner--b .fanim-ch { animation: fanim-type-b 10s step-end calc(var(--i) * var(--fanim-key)) infinite; }
.fanim-banner--a .fanim-sel { animation: fanim-sel-a 10s linear infinite; }
.fanim-banner--b .fanim-sel { animation: fanim-sel-b 10s linear infinite; }
.fanim-banner--a .fanim-caret { animation: fanim-caret-a 10s step-end infinite; }
.fanim-banner--b .fanim-caret { animation: fanim-caret-b 10s step-end infinite; }
.fanim-banner--a .fanim-hl { animation: fanim-hl-a 10s linear infinite; }
.fanim-banner--b .fanim-hl { animation: fanim-hl-b 10s linear infinite; }
.fanim-go { animation: fanim-go 10s linear infinite; }
.fanim-canvas--live .fanim-banner--a { animation: fanim-live-a 10s linear infinite; }
.fanim-canvas--live .fanim-banner--b { animation: fanim-live-b 10s linear infinite; }
@keyframes fanim-show-a {
0%   { opacity: 1; }
21%  { opacity: 0; }
71%  { opacity: 1; }
100% { opacity: 1; }
}
@keyframes fanim-show-b {
0%   { opacity: 0; }
21%  { opacity: 1; }
71%  { opacity: 0; }
100% { opacity: 0; }
}
@keyframes fanim-type-a {
0%   { opacity: 1; display: inline; }
21%  { opacity: 0; display: none; }
71%  { opacity: 1; display: inline; }
100% { opacity: 1; display: inline; }
}
@keyframes fanim-type-b {
0%   { opacity: 0; display: none; }
21%  { opacity: 1; display: inline; }
71%  { opacity: 0; display: none; }
100% { opacity: 0; display: none; }
}
@keyframes fanim-sel-a {
0%, 15%       { transform: scaleX(0); animation-timing-function: cubic-bezier(.2, .7, .25, 1); }
17.5%, 21%    { transform: scaleX(1); }
21.01%, 100%  { transform: scaleX(0); }
}
@keyframes fanim-sel-b {
0%, 65%       { transform: scaleX(0); animation-timing-function: cubic-bezier(.2, .7, .25, 1); }
67.5%, 71%    { transform: scaleX(1); }
71.01%, 100%  { transform: scaleX(0); }
}
@keyframes fanim-caret-a {
0%    { opacity: 0; }
9%    { opacity: 1; }
12%   { opacity: 0; }
13.5% { opacity: 1; }
15%   { opacity: 0; }
71%   { opacity: 1; }
81.5% { opacity: 0; }
83.5% { opacity: 1; }
88%   { opacity: 0; }
100%  { opacity: 0; }
}
@keyframes fanim-caret-b {
0%    { opacity: 0; }
21%   { opacity: 1; }
31.5% { opacity: 0; }
33.5% { opacity: 1; }
38%   { opacity: 0; }
59%   { opacity: 1; }
62%   { opacity: 0; }
63.5% { opacity: 1; }
65%   { opacity: 0; }
100%  { opacity: 0; }
}
@keyframes fanim-hl-a {
0%, 6%        { opacity: 0; }
7%, 88%       { opacity: 1; }
89.5%, 100%   { opacity: 0; }
}
@keyframes fanim-hl-b {
0%, 38%       { opacity: 1; }
39.5%, 56%    { opacity: 0; }
57%, 100%     { opacity: 1; }
}
@keyframes fanim-go {
0%, 38%       { transform: scale(1);   background: #2B292D; animation-timing-function: ease-out; }
39.2%         { transform: scale(.92); background: #131115; animation-timing-function: ease-out; }
41%, 88%      { transform: scale(1);   background: #2B292D; animation-timing-function: ease-out; }
89.2%         { transform: scale(.92); background: #131115; animation-timing-function: ease-out; }
91%, 100%     { transform: scale(1);   background: #2B292D; }
}
@keyframes fanim-live-a {
0%, 39.5%     { transform: translateX(0);     opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .85, .45); }
43.5%, 94.5%  { transform: translateX(-110%); opacity: 0; animation-timing-function: cubic-bezier(.2, .7, .25, 1); }
99.5%, 100%   { transform: translateX(0);     opacity: 1; }
}
@keyframes fanim-live-b {
0%, 44.5%     { transform: translateX(-110%); opacity: 0; animation-timing-function: cubic-bezier(.2, .7, .25, 1); }
49.5%, 89.5%  { transform: translateX(0);     opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .85, .45); }
93.5%, 100%   { transform: translateX(-110%); opacity: 0; }
}
.pillar-panel:not(.is-active) .fanim,
.pillar-panel:not(.is-active) .fanim * {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.fanim *, .fanim *:before, .fanim *:after { animation: none !important; }
}