.is-motion { --e: cubic-bezier(.16, 1, .3, 1); --eh: cubic-bezier(.2, .8, .2, 1); }

.is-motion .hero-en .en-l { animation: hero-rise 1s var(--e) .12s both; }
.is-motion .hero-en .en-l + .en-l { animation-delay: .2s; }
.is-motion .hero-ko { animation: hero-rise .9s var(--e) .42s both; }
@keyframes hero-rise {
  from { transform: translateY(130%); clip-path: inset(-30% -8% 100% -8%); }
  to { transform: none; clip-path: inset(-30% -8% -30% -8%); }
}

.is-motion .hd { transition: transform .35s ease, background-color .3s ease; }
.is-motion.hd-up .hd { transform: translateY(-100%); }

.dw::after { content: ""; position: absolute; left: 100%; top: 0; width: 10px; height: 100%; background: var(--amber); }
.dw.dw-away { visibility: hidden; translate: calc(100% + 24px) 0; }
.is-motion .dw { animation: dw-enter .6s ease-in .5s backwards; transition: translate .5s var(--eh), visibility 0s linear 0s, transform .3s var(--eh); }
.is-motion .dw.dw-away { transition: translate .45s cubic-bezier(.7, 0, .84, 0), visibility 0s linear .45s, transform .3s var(--eh); }
@keyframes dw-enter {
  from { translate: calc(100% + 24px) 0; }
  to { translate: 0 0; }
}
.is-motion .dw:active { transform: scale(.97); }

@media (min-width: 991px) {
  .has-bar .artist-controls { clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .28s ease, visibility 0s linear .28s; }
  .has-bar .artist-controls.is-bar-visible { clip-path: inset(0); visibility: visible; transition-delay: 0s; }
  .artist-feature:not(:has(> .artist-controls)) { padding-top: 6px; }
}
html:not(.is-motion) .artist-controls { transition: none; }
.is-motion .artist-feature { z-index: 1; }
.is-motion .artist-feature.wipe:not(.done) .artist-pic-reveal { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--e) .1s; }
.is-motion .artist-feature.wipe.in:not(.done) .artist-pic-reveal { clip-path: inset(0 0 0 0); }
.is-motion .after-artist { z-index: 2; }
.is-motion.mz :is(.hero-in, .artist-feature) { translate: none !important; }

.vm, .vm-i { display: block; }
.pos .pos-v span .vm, .pos .pos-v span .vm-i { margin-top: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.is-motion .cv:not(.done) { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--e); }
.is-motion .cv.in:not(.done) { clip-path: inset(0 0 0 0); }
.is-motion .cv:not(.done) .vm { clip-path: inset(0 -30% -2% -30%); }
.is-motion .cv .vm-i { transform: translateY(-104%); transition: transform 1s var(--e); transition-delay: calc(var(--i, 0) * 110ms + 260ms); }
.is-motion .cv.in .vm-i { transform: none; }
.is-motion .cv .pos-s { opacity: 0; transition: opacity .7s var(--e) .5s; }
.is-motion .cv.in .pos-s { opacity: 1; }
.is-motion .cv .pos-dot { opacity: 0; transform: scale(.5); transition: opacity .6s var(--e) .75s, transform .9s var(--e) .75s; }
.is-motion .cv.in .pos-dot { opacity: 1; transform: none; }
.is-motion .now, .is-motion .now *, .is-motion .now::before, .is-motion .now *::before { transition: none !important; }

.roll { display: block; overflow: hidden; }
.roll-i { position: relative; display: block; }
.roll-i::after { content: attr(data-t); position: absolute; left: 0; top: 100%; white-space: nowrap; }
.is-motion .roll-i { transition: transform .45s var(--eh); }
.is-motion .btn:active, .is-motion .nav-btn:active { transform: scale(.97); }
.is-motion .btn { transition: transform .11s var(--eh); }
.is-motion .nav-list a:active, .is-motion .ft-n a:active { opacity: .55; }

@media (hover: hover) and (pointer: fine) {
  .is-motion .dw:hover { transform: translateX(-8px); }
  .is-motion .btn:hover .roll-i { transform: translateY(-100%); }
}
@media (max-width: 767px) {
  .dw::after { display: none; }
}