/* Exact Figma CSS motion snippets, retrieved 2026-10-19. Source roots in onboarding-motion.js. */
.ubcf .ubcf-motion-3084-68743 {/* Requires pathLength="1" on the SVG path element. */ stroke-dashoffset: 0; animation: kf_3084_68743_opacity_0 2s linear, kf_3084_68743_path-trim_0 2s linear; animation-iteration-count: infinite; }
@keyframes kf_3084_68743_opacity_0 { 0% { opacity: 0; } 19% { animation-timing-function: step-end; opacity: 0; } 19.5% { opacity: 1; } 57.5% { animation-timing-function: ease-in-out; opacity: 1; } 72.5% { opacity: 0; } 100% { opacity: 0; } } @keyframes kf_3084_68743_path-trim_0 { 0% { stroke-dasharray: 0 1; visibility: hidden; } 19% { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); stroke-dasharray: 0 1; visibility: hidden; } 38% { stroke-dasharray: 1 1; visibility: visible; } 57.5% { animation-timing-function: ease-in-out; stroke-dasharray: 1 1; visibility: visible; } 72.5% { stroke-dasharray: 0 1; visibility: hidden; } 100% { stroke-dasharray: 0 1; visibility: hidden; } }
.ubcf .ubcf-motion-3084-68756 {/* Requires pathLength="1" on the SVG path element. */ stroke-dashoffset: 0; animation: kf_3084_68756_opacity_0 2s linear, kf_3084_68756_path-trim_0 2s linear; animation-iteration-count: infinite; }
@keyframes kf_3084_68756_opacity_0 { 0% { opacity: 0; } 24% { animation-timing-function: step-end; opacity: 0; } 24.5% { opacity: 1; } 57.5% { animation-timing-function: ease-in-out; opacity: 1; } 72.5% { opacity: 0; } 100% { opacity: 0; } } @keyframes kf_3084_68756_path-trim_0 { 0% { stroke-dasharray: 0 1; visibility: hidden; } 24% { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); stroke-dasharray: 0 1; visibility: hidden; } 44% { stroke-dasharray: 1 1; visibility: visible; } 57.5% { animation-timing-function: ease-in-out; stroke-dasharray: 1 1; visibility: visible; } 72.5% { stroke-dasharray: 0 1; visibility: hidden; } 100% { stroke-dasharray: 0 1; visibility: hidden; } }
.ubcf .ubcf-motion-3084-68745 {/* Requires pathLength="1" on the SVG path element. */ stroke-dashoffset: 0; animation: kf_3084_68745_opacity_0 2s linear, kf_3084_68745_path-trim_0 2s linear; animation-iteration-count: infinite; }
@keyframes kf_3084_68745_opacity_0 { 0% { opacity: 0; } 14% { animation-timing-function: step-end; opacity: 0; } 14.5% { opacity: 1; } 57.5% { animation-timing-function: ease-in-out; opacity: 1; } 72.5% { opacity: 0; } 100% { opacity: 0; } } @keyframes kf_3084_68745_path-trim_0 { 0% { stroke-dasharray: 0 1; visibility: hidden; } 14% { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); stroke-dasharray: 0 1; visibility: hidden; } 31.5% { stroke-dasharray: 1 1; visibility: visible; } 57.5% { animation-timing-function: ease-in-out; stroke-dasharray: 1 1; visibility: visible; } 72.5% { stroke-dasharray: 0 1; visibility: hidden; } 100% { stroke-dasharray: 0 1; visibility: hidden; } }
.ubcf .ubcf-motion-3071-61841 {animation: kf_3071_61841_translate_0 2s linear, kf_3071_61841_scale_0 2s linear; animation-iteration-count: infinite; }
@keyframes kf_3071_61841_translate_0 { 0% { translate: 0px 0px; } 12.5% { animation-timing-function: cubic-bezier(0.55, 0, 0.45, 1); translate: 0px 0px; } 17.5% { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); translate: 5px 2px; } 27.5% { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); translate: 25px 15px; } 42.5% { translate: 60px 35px; } 55% { animation-timing-function: ease-in-out; translate: 60px 35px; } 77.5% { translate: 0px 0px; } 100% { translate: 0px 0px; } } @keyframes kf_3071_61841_scale_0 { 0% { scale: 1 1; } 6% { animation-timing-function: ease-out; scale: 1 1; } 12.5% { scale: 0.96 0.96; } 42.5% { animation-timing-function: ease-out; scale: 0.96 0.96; } 57.5% { scale: 1 1; } 100% { scale: 1 1; } }
.ubcf .ubcf-motion-3071-61841 {transform-origin: 354.7020568847656px 395.14398193359375px;}
.ubcf .ubcf-motion-3071-61860 {animation: kf_3071_61860_opacity_0 2s linear, kf_3071_61860_scale_0 2s linear; animation-iteration-count: infinite; }
@keyframes kf_3071_61860_opacity_0 { 0% { opacity: 0; } 57.5% { animation-timing-function: ease-out; opacity: 0; } 62.5% { opacity: 1; } 100% { opacity: 1; } } @keyframes kf_3071_61860_scale_0 { 0% { scale: 0.5 0.5; } 57.5% { animation-timing-function: linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993); scale: 0.5 0.5; } 67.5% { scale: 1 1; } 100% { scale: 1 1; } }
.ubcf .ubcf-motion-3071-61860 {transform-origin: 282.3360290527344px 136.4221954345703px;}
.ubcf .ubcf-motion-3097-32 {animation: kf_3097_32_opacity_0 2s linear, kf_3097_32_scale_0 2s linear; animation-iteration-count: infinite; }
@keyframes kf_3097_32_opacity_0 { 0% { opacity: 0; } 57.5% { animation-timing-function: ease-out; opacity: 0; } 65% { opacity: 1; } 100% { opacity: 1; } } @keyframes kf_3097_32_scale_0 { 0% { scale: 0.6 0.6; } 57.5% { animation-timing-function: ease-out; scale: 0.6 0.6; } 65% { scale: 1 1; } 100% { scale: 1 1; } }
.ubcf .ubcf-motion-3071-61865 {animation: kf_3071_61865_scale_0 2s linear; animation-iteration-count: infinite; }
@keyframes kf_3071_61865_scale_0 { 0% { scale: 1 1; } 57.5% { animation-timing-function: ease-in; scale: 1 1; } 62.5% { animation-timing-function: linear(0, 0.0212, 0.0764, 0.1545, 0.2463, 0.3445, 0.4435, 0.5391, 0.6282, 0.7091, 0.7805, 0.8421, 0.8939, 0.9365, 0.9704, 0.9967, 1.0162, 1.03, 1.0389, 1.044, 1.0459, 1.0455, 1.0433, 1.04, 1.0359, 1.0314, 1.0269, 1.0224, 1.0182, 1.0144, 1.011, 1.008, 1.0055, 1.0034, 1.0018, 1.0005, 0.9995, 0.9988, 0.9983, 0.998, 0.9979, 0.9979, 0.998, 0.9981, 0.9983, 0.9985, 0.9987, 0.9989, 0.9991, 0.9993, 0.9995); scale: 0.9 0.9; } 70% { scale: 1 1; } 100% { scale: 1 1; } }
.ubcf .ubcf-motion-3071-61865 {transform-origin: 179.08499145507812px 179.0749969482422px;}
.ubcf .ubcf-motion-3071-61866 {animation: kf_3071_61866_translate_0 2s linear, kf_3071_61866_scale_0 2s linear; animation-iteration-count: infinite; }
@keyframes kf_3071_61866_translate_0 { 0% { translate: 200px 170px; } 5% { translate: 152.761px 88.333px; } 10% { translate: 90.794px 45.243px; } 15% { translate: 58.363px 27.045px; } 20% { translate: 43.9px 20.641px; } 22.5% { translate: 40.909px 20px; } 25% { translate: 40px 8.192px; } 30% { translate: -22.442px -49.072px; } 35% { translate: -64.02px -104.743px; } 40% { translate: -86.569px -138.388px; } 45% { translate: -98.19px -157.149px; } 50% { translate: -103.541px -166.363px; } 55% { translate: -105px -169px; } 100% { translate: -105px -169px; } } @keyframes kf_3071_61866_scale_0 { 0% { scale: 1 1; } 55% { animation-timing-function: ease-in; scale: 1 1; } 60% { animation-timing-function: ease-out; scale: 0.88 0.88; } 67.5% { scale: 1 1; } 100% { scale: 1 1; } }
.ubcf .ubcf-motion-3071-61866 {transform-origin: 171.23170471191406px 234.2300262451172px;}
.ubcf .ubcf-motion-3071-61848 {animation: kf_3071_61848_translate_0 4.8s linear; animation-iteration-count: infinite; }
@keyframes kf_3071_61848_translate_0 { 0% { animation-timing-function: ease-in-out; translate: 0px 0px; } 16.667% { translate: 400px 0px; } 83.333% { animation-timing-function: ease-in-out; translate: 400px 0px; } 100% { translate: 0px 0px; } }
.ubcf .ubcf-motion-3071-61848 {transform-origin: 82.93000793457031px 82.92999267578125px;}
.ubcf .ubcf-motion-3071-61851 {animation: kf_3071_61851_translate_0 4.8s linear; animation-iteration-count: infinite; }
@keyframes kf_3071_61851_translate_0 { 0% { translate: 0px 0px; } 16.667% { animation-timing-function: ease-in-out; translate: 0px 0px; } 33.333% { translate: -450px 0px; } 50% { animation-timing-function: ease-in-out; translate: -450px 0px; } 66.667% { translate: 0px 0px; } 100% { translate: 0px 0px; } }
.ubcf .ubcf-motion-3071-61851 {transform-origin: 82.92999267578125px 82.92999267578125px;}
.ubcf .ubcf-motion-3071-61854 {animation: kf_3071_61854_translate_0 4.8s linear; animation-iteration-count: infinite; }
@keyframes kf_3071_61854_translate_0 { 0% { translate: 0px 0px; } 33.333% { animation-timing-function: ease-in-out; translate: 0px 0px; } 50% { translate: 300px 0px; } 66.667% { animation-timing-function: ease-in-out; translate: 300px 0px; } 83.333% { translate: 0px 0px; } 100% { translate: 0px 0px; } }
.ubcf .ubcf-motion-3071-61854 {transform-origin: 82.92999267578125px 82.92999267578125px;}

.ubcf .ubcf-tutorial-glyph > svg.ubcf-onboarding-animation {display:block;width:100%;height:100%;overflow:hidden;}
.ubcf .ubcf-tutorial-glyph:has(> .ubcf-onboarding-animation) > .ubcf-tutorial-raster {display:none;}
.ubcf .ubcf-entry-outgoing .ubcf-onboarding-animation *,
.ubcf [data-ubcf-entry][hidden] .ubcf-onboarding-animation *,
.ubcf [data-ubcf-entry][data-motion-paused] .ubcf-onboarding-animation *,
.ubcf [data-ubcf-entry][data-entry-step="3"] .ubcf-onboarding-animation *,
.ubcf [data-ubcf-entry][data-entry-step="4"] .ubcf-onboarding-animation * {animation-play-state:paused;}
@media (prefers-reduced-motion: reduce) {
 .ubcf .ubcf-tutorial-glyph > svg.ubcf-onboarding-animation {display:none;}
 .ubcf .ubcf-onboarding-animation * {animation:none !important;}
 .ubcf .ubcf-tutorial-glyph:has(> .ubcf-onboarding-animation) > .ubcf-tutorial-raster {display:block;}
}