/* Animasi seluruh aplikasi: splash keluar, aplikasi masuk, pergantian halaman, layar login/gerbang.
   Satu easing dan durasi seragam. Mati otomatis jika pengaturan Animasi dimatikan (body.noanim). */
:root{--m-ease:cubic-bezier(.2,.8,.2,1);--m-io:cubic-bezier(.76,0,.24,1)}
@keyframes mUp{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes mDown{from{opacity:0;translate:0 -18px}to{opacity:1;translate:0 0}}
@keyframes mNav{from{opacity:0;translate:0 70px}to{opacity:1;translate:0 0}}
@keyframes mFade{from{opacity:0}to{opacity:1}}
@keyframes mFadeOut{to{opacity:0}}
@keyframes mSpIn{from{opacity:0;scale:1.04}to{opacity:1;scale:1}}
@keyframes mSpOut{0%{visibility:visible;translate:0 0}100%{visibility:hidden;translate:0 -104%}}
@keyframes mHeroOut{to{opacity:0;translate:0 -32px;scale:.94}}

/* splash: tirai naik ke atas, isi memudar dan mengecil sedikit */
#splash.out{opacity:1!important;visibility:hidden;pointer-events:none;transition:none!important;animation:mSpOut .75s var(--m-io) both;border-bottom:3px solid #111;border-radius:0 0 32px 32px}
#splash.out .sp-hero{animation:mHeroOut .5s cubic-bezier(.5,0,1,.5) both}
#splash.out .sp-top,#splash.out .sp-act{animation:mFadeOut .3s both}
#splash.enter{animation:mSpIn .5s var(--m-ease) both}

/* aplikasi masuk: header turun, navigasi naik dari bawah */
#app:not(.hide) main .tb{animation:mDown .55s .08s var(--m-ease) backwards}
#app:not(.hide) aside{animation:mNav .6s .16s var(--m-ease) backwards}

/* pergantian halaman: isi tiap halaman masuk berurutan dengan jeda sama (45ms) */
#vTerm:not(.hide)>*,#vFlow:not(.hide)>*,#vSet:not(.hide)>*{animation:mUp .45s var(--m-ease) backwards}
#vTerm:not(.hide)>:nth-child(2),#vFlow:not(.hide)>:nth-child(2),#vSet:not(.hide)>:nth-child(2){animation-delay:.045s}
#vTerm:not(.hide)>:nth-child(3),#vFlow:not(.hide)>:nth-child(3),#vSet:not(.hide)>:nth-child(3){animation-delay:.09s}
#vTerm:not(.hide)>:nth-child(4),#vFlow:not(.hide)>:nth-child(4),#vSet:not(.hide)>:nth-child(4){animation-delay:.135s}
#vTerm:not(.hide)>:nth-child(5),#vFlow:not(.hide)>:nth-child(5),#vSet:not(.hide)>:nth-child(5){animation-delay:.18s}
#vTerm:not(.hide)>:nth-child(6),#vFlow:not(.hide)>:nth-child(6),#vSet:not(.hide)>:nth-child(6){animation-delay:.225s}
#vTerm:not(.hide)>:nth-child(7),#vFlow:not(.hide)>:nth-child(7),#vSet:not(.hide)>:nth-child(7){animation-delay:.27s}
#vTerm:not(.hide)>:nth-child(n+8),#vFlow:not(.hide)>:nth-child(n+8),#vSet:not(.hide)>:nth-child(n+8){animation-delay:.315s}

/* gerbang saluran, tentang aplikasi, dan login */
.act:not(.hide){animation:mFade .4s var(--m-ease) backwards}
.act:not(.hide)>:not(.act-bg){animation:mUp .5s var(--m-ease) backwards}
.act:not(.hide)>:nth-child(3){animation-delay:.06s}.act:not(.hide)>:nth-child(4){animation-delay:.12s}.act:not(.hide)>:nth-child(5){animation-delay:.18s}
#login:not(.hide){animation:mFade .4s var(--m-ease) backwards}
#login:not(.hide)>*{animation:mUp .5s var(--m-ease) backwards}

body.noanim #splash.out{animation:none!important;visibility:hidden}
@media(prefers-reduced-motion:reduce){#splash.out{animation-duration:.01ms!important}}