@property --motion-submit-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@property --motion-morph{syntax:"<number>";inherits:true;initial-value:1}.eufemia-scope--portal .dnb-motion-demos{--motion-reveal-height:0px}.eufemia-scope--portal .dnb-motion-demos__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:2rem 1.5rem;display:grid}.eufemia-scope--portal .dnb-motion-demos__grid [data-motion]{animation-duration:4s;animation-timing-function:var(--easing-default);animation-iteration-count:infinite;animation-fill-mode:both}.eufemia-scope--portal .dnb-motion-demo{flex-direction:column;gap:1rem;min-width:0;margin:0;scroll-margin-top:10rem;display:flex}.eufemia-scope--portal .dnb-motion-demo[id=show-submission]{padding-bottom:.5rem}.eufemia-scope--portal .dnb-motion-demo__stage{border-radius:var(--token-radius-md);background:var(--token-color-background-selected-subtle);order:-1;width:100%;height:auto;display:block;overflow:hidden}@media screen and (max-width:40em){.eufemia-scope--portal .dnb-motion-demo__stage{order:0}}.eufemia-scope--portal .dnb-motion-demo__caption .dnb-p{font-size:var(--font-size-small);line-height:var(--line-height-basis)}.eufemia-scope--portal .dnb-motion-scene__surface{fill:var(--token-color-background-neutral);stroke:var(--token-color-stroke-neutral-subtle)}.eufemia-scope--portal .dnb-motion-scene__muted{fill:var(--token-color-background-neutral-subtle)}.eufemia-scope--portal .dnb-motion-scene__lines{fill:var(--token-color-stroke-neutral-subtle)}.eufemia-scope--portal .dnb-motion-scene__accent{fill:var(--token-color-background-action)}.eufemia-scope--portal .dnb-motion-scene__accent-soft,.eufemia-scope--portal .dnb-motion-scene__expansion-fill{fill:var(--token-color-background-selected-subtle)}.eufemia-scope--portal .dnb-motion-scene__ink,.eufemia-scope--portal .dnb-motion-scene__label{fill:var(--token-color-text-neutral)}.eufemia-scope--portal .dnb-motion-scene__label{font-size:14px;font-weight:var(--font-weight-medium)}.eufemia-scope--portal .dnb-motion-scene__stroke{fill:none;stroke:var(--token-color-text-action);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.eufemia-scope--portal .dnb-motion-scene__divider{stroke:var(--token-color-stroke-neutral-subtle)}.eufemia-scope--portal .dnb-motion-scene__dialog{animation-name:dnb-motion-dialog}.eufemia-scope--portal .dnb-motion-scene__backdrop{fill:#00000052;animation-name:dnb-motion-backdrop}.eufemia-scope--portal .dnb-motion-scene__expansion-fill,.eufemia-scope--portal .dnb-motion-scene__expansion-clip{transform-origin:60px 80px;animation-name:dnb-motion-expand}.eufemia-scope--portal .dnb-motion-scene__expansion-content,.eufemia-scope--portal .dnb-motion-scene__table-content{animation-name:dnb-motion-disclosure-content}.eufemia-scope--portal .dnb-motion-scene__following-row{animation-name:dnb-motion-make-room;transform:translateY(72px)}.eufemia-scope--portal .dnb-motion-scene__chevron{animation-name:dnb-motion-chevron}.eufemia-scope--portal .dnb-motion-scene__morph-segment{--motion-x:0;--motion-y:0;--motion-y-change:0;--motion-slope:0;--motion-slope-change:0;transform:matrix(1, calc(var(--motion-slope) + var(--motion-slope-change) * var(--motion-morph)), 0, 1, var(--motion-x), calc(var(--motion-y) + var(--motion-y-change) * var(--motion-morph)))}.eufemia-scope--portal .dnb-motion-scene__switch-track{fill:var(--token-color-background-selected);animation-name:dnb-motion-switch-track}.eufemia-scope--portal .dnb-motion-scene__switch-thumb[data-motion]{fill:var(--token-color-background-neutral);animation-name:dnb-motion-switch-thumb;animation-timing-function:var(--easing-fast-bounce);transform:translate(28px)}.eufemia-scope--portal .dnb-motion-scene__switch-check{animation-name:dnb-motion-reveal}.eufemia-scope--portal .dnb-motion-scene__drawer{animation-name:dnb-motion-drawer}.eufemia-scope--portal .dnb-motion-scene__disclosure-clip{animation-name:dnb-motion-disclosure-height}.eufemia-scope--portal .dnb-motion-scene__disclosure-following{transform:translateY(var(--motion-reveal-height));animation-name:dnb-motion-disclosure-following}.eufemia-scope--portal .dnb-motion-scene__disclosure-chevron{animation-name:dnb-motion-disclosure-chevron}.eufemia-scope--portal .dnb-motion-scene__breadcrumb-item{animation-name:dnb-motion-breadcrumb-item}.eufemia-scope--portal .dnb-motion-scene__breadcrumb-item:nth-of-type(2){animation-delay:50ms}.eufemia-scope--portal .dnb-motion-scene__breadcrumb-item:nth-of-type(3){animation-delay:.1s}.eufemia-scope--portal .dnb-motion-scene__counter-icon{fill:none;stroke:var(--token-color-icon-error);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;animation-name:dnb-motion-counter-icon}.eufemia-scope--portal .dnb-motion-scene__counter-width{animation-name:dnb-motion-counter-width;transform:translate(16px)}.eufemia-scope--portal .dnb-motion-scene__counter-gap{animation-name:dnb-motion-counter-gap;transform:translate(8px)}.eufemia-scope--portal .dnb-motion-scene__counter-normal[data-motion],.eufemia-scope--portal .dnb-motion-scene__counter-error[data-motion]{animation-timing-function:step-end}.eufemia-scope--portal .dnb-motion-scene__counter-normal{opacity:0;animation-name:dnb-motion-counter-normal}.eufemia-scope--portal .dnb-motion-scene__counter-error{animation-name:dnb-motion-counter-error}.eufemia-scope--portal .dnb-motion-scene__counter-message{fill:var(--token-color-text-error)}.eufemia-scope--portal .dnb-motion-scene__progress-track,.eufemia-scope--portal .dnb-motion-scene__progress,.eufemia-scope--portal .dnb-motion-scene__progress-wipe{fill:none;stroke-width:6px}.eufemia-scope--portal .dnb-motion-scene__progress-track,.eufemia-scope--portal .dnb-motion-scene__progress-wipe{stroke:var(--token-color-background-neutral-alternative)}.eufemia-scope--portal .dnb-motion-scene__progress[data-motion],.eufemia-scope--portal .dnb-motion-scene__progress-wipe[data-motion]{transform-origin:180px 104px;stroke-linecap:round;stroke-dasharray:100;animation-duration:2s;animation-timing-function:linear;transform:rotate(-90deg)}.eufemia-scope--portal .dnb-motion-scene__progress{stroke:var(--token-color-background-action);stroke-width:5.5px;stroke-dashoffset:25px;animation-name:dnb-motion-progress}.eufemia-scope--portal .dnb-motion-scene__progress-wipe{stroke-dashoffset:100px;animation-name:dnb-motion-progress-wipe}.eufemia-scope--portal .dnb-motion-scene__submit-cutout{fill:var(--token-color-background-neutral)}.eufemia-scope--portal .dnb-motion-scene__submit-button{fill:var(--token-color-component-button-background-action)}.eufemia-scope--portal .dnb-motion-scene__submit-label{fill:var(--token-color-component-button-text-neutral);font-size:16px;font-weight:var(--font-weight-medium)}.eufemia-scope--portal .dnb-motion-scene__submit-glow[data-motion]{background:conic-gradient(from var(--motion-submit-angle), transparent 25%, var(--token-color-stroke-action) 45%, var(--token-color-stroke-action-pressed) 55%, transparent 75%);border-radius:24px;width:100%;height:100%;animation-name:dnb-motion-submit-glow;animation-duration:1.5s;animation-timing-function:linear}.eufemia-scope--portal .dnb-motion-scene__illustration-artwork [data-motion]{animation-timing-function:ease-out}.eufemia-scope--portal .dnb-motion-scene__illustration-greenery{--motion-greenery-offset:-16px;animation-name:dnb-motion-illustration-greenery}.eufemia-scope--portal .dnb-motion-scene__illustration-greenery--right{--motion-greenery-offset:16px}.eufemia-scope--portal .dnb-motion-scene__illustration-body{animation-name:dnb-motion-illustration-body}.eufemia-scope--portal .dnb-motion-scene__illustration-roof{animation-name:dnb-motion-illustration-roof}.eufemia-scope--portal .dnb-motion-scene__illustration-details,.eufemia-scope--portal .dnb-motion-scene__garage{animation-name:dnb-motion-illustration-details}.eufemia-scope--portal .dnb-motion-scene__illustration-windows{animation-name:dnb-motion-illustration-windows}.eufemia-scope--portal .dnb-motion-scene__illustration-windows--side{animation-delay:.15s}.eufemia-scope--portal .dnb-motion-scene__garage-door{animation-name:dnb-motion-garage-door}.eufemia-scope--portal .dnb-motion-scene__icon[data-motion]{transform-origin:180px 97.5px;animation-name:dnb-motion-icon;animation-timing-function:ease-in-out}.eufemia-scope--portal .dnb-motion-scene__icon[data-motion] .dnb-icon{color:var(--token-color-text-action);font-size:48px;display:block}.eufemia-scope--portal .dnb-motion-scene__icon-background{fill:var(--token-color-background-neutral)}.eufemia-scope--portal .dnb-motion-scene__graph-label{fill:var(--token-color-text-neutral);font-size:12px}.eufemia-scope--portal .dnb-motion-scene__graph-bar{--bar-start-scale:1;transform-origin:0 180px;animation-name:dnb-motion-graph-bar}.eufemia-scope--portal .dnb-motion-scene__graph-line{stroke-width:3px;animation-name:dnb-motion-graph-line}@keyframes dnb-motion-dialog{0%,15%{opacity:0;animation-timing-function:ease-out;transform:translateY(-16px)}22.5%,65%{opacity:1;animation-timing-function:ease-in-out;transform:translateY(0)}70.5%,99.99%{opacity:0;transform:translateY(16px)}to{opacity:0;transform:translateY(-16px)}}@keyframes dnb-motion-backdrop{0%,15%{opacity:0;animation-timing-function:ease-out}22.5%,65%{opacity:1;animation-timing-function:ease-out}72.5%,to{opacity:0}}@keyframes dnb-motion-expand{0%,15%,85%,to{transform:scaleY(0)}25%,65%{transform:scaleY(1)}}@keyframes dnb-motion-reveal{0%,18%,78%,to{opacity:0}25%,65%{opacity:1}}@keyframes dnb-motion-make-room{0%,15%,85%,to{transform:translateY(0)}25%,65%{transform:translateY(72px)}}@keyframes dnb-motion-chevron{0%,15%,85%,to{--motion-morph:0}25%,65%{--motion-morph:1}}@keyframes dnb-motion-switch-track{0%,15%,69.5%,to{fill:var(--token-color-background-action-alternative)}19.5%,65%{fill:var(--token-color-background-selected)}}@keyframes dnb-motion-switch-thumb{0%,15%,69.5%,to{transform:translate(0)}19.5%,65%{transform:translate(28px)}}@keyframes dnb-motion-drawer{0%,15%{opacity:.1;animation-timing-function:ease-out;transform:translate(136px)}22.5%,65%{opacity:1;animation-timing-function:ease-in-out;transform:translate(0)}72.5%,99.99%{opacity:0;transform:translate(136px)}to{opacity:.1;transform:translate(136px)}}@keyframes dnb-motion-disclosure-height{0%,15%,75%,to{height:0}25%,65%{height:var(--motion-reveal-height)}}@keyframes dnb-motion-disclosure-following{0%,15%,75%,to{transform:translateY(0)}25%,65%{transform:translateY(var(--motion-reveal-height))}}@keyframes dnb-motion-disclosure-chevron{0%,15%,75%,to{--motion-morph:0}25%,65%{--motion-morph:1}}@keyframes dnb-motion-breadcrumb-item{0%,15%,75%,to{transform:translate(-16px)}25%,65%{transform:translate(0)}}@keyframes dnb-motion-disclosure-content{0%,15%,77.5%,to{opacity:0;transform:translateY(-10px)}27.5%,65%{opacity:1;transform:translateY(0)}}@keyframes dnb-motion-counter-icon{0%,15%,75%,to{transform:scale(0)}25%,65%{transform:scale(1)}}@keyframes dnb-motion-counter-width{0%,15%,75%,to{transform:translate(0)}25%,65%{transform:translate(16px)}}@keyframes dnb-motion-counter-gap{0%,15%,70%,to{transform:translate(0)}20%,65%{transform:translate(8px)}}@keyframes dnb-motion-counter-error{0%{opacity:0}15%{opacity:1}65%,to{opacity:0}}@keyframes dnb-motion-counter-normal{0%{opacity:1}15%{opacity:0}65%,to{opacity:1}}@keyframes dnb-motion-progress{0%{stroke-dashoffset:100px}50%,to{stroke-dashoffset:.31831px}}@keyframes dnb-motion-progress-wipe{0%,50%{stroke-dashoffset:100px}to{stroke-dashoffset:.31831px}}@keyframes dnb-motion-submit-glow{0%{--motion-submit-angle:0deg}to{--motion-submit-angle:360deg}}@keyframes dnb-motion-illustration-body{0%,2.5%,95%,to{opacity:0}7.5%,87.5%{opacity:1}}@keyframes dnb-motion-illustration-roof{0%,7.5%,87.5%,to{opacity:0;transform:translateY(-16px)}17.5%,80%{opacity:1;transform:translateY(0)}}@keyframes dnb-motion-illustration-details{0%,10%,82.5%,to{opacity:0}25%,75%{opacity:1}}@keyframes dnb-motion-illustration-windows{0%,17.5%,to{opacity:0}27.5%,82.5%{opacity:1}}@keyframes dnb-motion-garage-door{0%,27.5%,72.5%,to{transform:translateY(0)}40%,60%{transform:translateY(-52px)}}@keyframes dnb-motion-illustration-greenery{0%,7.5%,75%,to{opacity:0;transform:translateX(var(--motion-greenery-offset))}25%,65%{opacity:1;transform:translate(0)}}@keyframes dnb-motion-icon{0%,15%,38%,to{transform:rotate(0)}18%{transform:rotate(-16deg)}22%{transform:rotate(14deg)}26%{transform:rotate(-10deg)}30%{transform:rotate(6deg)}34%{transform:rotate(-3deg)}}@keyframes dnb-motion-graph-bar{0%,15%,77.5%,to{transform:scaleY(var(--bar-start-scale))}27.5%,65%{transform:scaleY(1)}}@keyframes dnb-motion-graph-line{0%,15%,77.5%,to{--motion-morph:0}27.5%,65%{--motion-morph:1}}@media (prefers-reduced-motion:reduce){.eufemia-scope--portal .dnb-motion-demos [data-motion]{animation:none}}