.mot-hero{isolation:isolate;padding-block:var(--section-space-xl);position:relative;overflow:clip}.mot-hero__container{text-align:center;align-items:center;gap:var(--space-m)}.mot-hero__lede{margin-inline:auto}.mot-hero__actions{align-items:center;gap:var(--space-s) var(--space-m);flex-wrap:wrap;justify-content:center;display:flex}.mot-hero__orb{z-index:-1;filter:blur(50px);pointer-events:none;border-radius:50%;position:absolute}.mot-hero__orb--one{background:var(--primary-40);block-size:16rem;inline-size:16rem;inset-block-start:10%;inset-inline-start:8%}.mot-hero__orb--two{background:var(--tertiary-40);block-size:20rem;inline-size:20rem;inset-block-end:5%;inset-inline-end:10%}.mot-hero__orb--three{background:var(--accent-30);block-size:10rem;inline-size:10rem;inset-block-start:30%;inset-inline-end:30%}.mot-presets{border-block-start:1px solid var(--hairline);overflow-x:clip}.mot-presets__head{gap:var(--space-s);flex-direction:column;display:flex}.mot-spring__container{gap:var(--space-xxl);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;display:grid;@media (width<=900px){gap:var(--space-l);grid-template-columns:minmax(0,1fr)}}.mot-spring__copy{align-items:flex-start;gap:var(--space-s);flex-direction:column;display:flex}.mot-spring__attr{border:1px solid var(--primary-40);border-radius:var(--radius-s);background:var(--primary-10);padding-block:.3em;padding-inline:.7em}.mot-spring__ball{background:radial-gradient(circle at 35% 30%, var(--primary-200), var(--primary) 55%, var(--primary-500));block-size:7rem;inline-size:7rem;box-shadow:var(--glow-red);border-radius:50%}.mot-spring__caption{font-size:var(--text-s)}.mot-scroll{border-block-start:1px solid var(--hairline);overflow:clip}.mot-scroll__container{gap:var(--space-xxl);grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center;display:grid;@media (width<=900px){gap:var(--space-l);grid-template-columns:minmax(0,1fr)}}.mot-scroll__copy{gap:var(--space-s);flex-direction:column;display:flex}.mot-states{border-block-start:1px solid var(--hairline)}.mot-states__container{gap:var(--space-l)}.mot-states__grid{gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));display:grid}.mot-states__card{align-items:flex-start;gap:var(--space-s);padding:var(--space-l);border:1px solid var(--hairline);border-radius:var(--panel-radius);background:var(--surface);cursor:pointer;transition:translate var(--motion-duration) var(--motion-ease), scale var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease);flex-direction:column;display:flex;@media (prefers-reduced-motion:reduce){transition:none}}.mot-states__card--hover{&:hover{border-color:var(--primary-60);box-shadow:var(--glow-red);translate:0 -6px}}.mot-states__card--press{&:hover{border-color:var(--hairline-bright)}&:active{scale:.96}}.mot-states__verb{font-size:var(--h4)}@keyframes mot-replay-fade{0%{opacity:0}}@keyframes mot-replay-rise{0%{opacity:0;translate:0 var(--motion-distance,32px)}}@keyframes mot-replay-sink{0%{opacity:0;translate:0 calc(-1 * var(--motion-distance,32px))}}@keyframes mot-replay-slide-right{0%{opacity:0;translate:calc(-1 * var(--motion-distance,32px)) 0}}@keyframes mot-replay-slide-left{0%{opacity:0;translate:var(--motion-distance,32px) 0}}@keyframes mot-replay-zoom{0%{opacity:0;scale:.94}}@keyframes mot-replay-pop{0%{opacity:0;scale:.8}}@keyframes mot-replay-blur{0%{opacity:0;filter:blur(10px)}}@keyframes mot-replay-tilt{0%{opacity:0;translate:0 var(--motion-distance,32px);rotate:-4deg}}@keyframes mot-replay-flip-x{0%{opacity:0;transform:perspective(600px)rotateY(-70deg)}}@keyframes mot-replay-flip-y{0%{opacity:0;transform:perspective(600px)rotateX(70deg)}}@keyframes mot-replay-skew{0%{opacity:0;translate:var(--motion-distance,32px) 0;transform:skew(-8deg)}}.mot-panel{border-block-start:1px solid var(--hairline)}.mot-panel__container{gap:var(--space-xxl);grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:center;display:grid;@media (width<=1000px){gap:var(--space-l);grid-template-columns:minmax(0,1fr)}}.mot-panel__copy{gap:var(--space-s);flex-direction:column;display:flex}.mot-panel__chips{gap:var(--space-xs);flex-wrap:wrap;display:flex}.mot-panel__chip{border:1px solid var(--primary-40);border-radius:var(--radius-s);background:var(--primary-10);padding-block:.2em;padding-inline:.6em}.mot-panel__stage{justify-content:center;align-items:flex-start;gap:var(--space-m);display:flex;position:relative;@media (width<=640px){flex-direction:column;align-items:stretch}}.mot-panel__column{flex:none;inline-size:290px;max-inline-size:100%;@media (width<=640px){inline-size:auto}}.mot-panel__lock{block-size:14px;inline-size:14px;color:var(--ui-muted-foreground);flex:none;margin-inline:5px}.mot-spring__sheet{justify-content:center;display:flex}.mot-spring__demo{justify-content:center;align-items:center;gap:var(--space-m);border:1px solid var(--hairline);border-radius:var(--panel-radius);background-color:var(--app-chrome);background-image:radial-gradient(var(--hairline) 1px, transparent 1px);background-size:20px 20px;flex-direction:column;flex:1;align-self:stretch;min-block-size:16rem;display:flex}.mot-scroll__bars{align-items:center;gap:var(--space-s);block-size:24rem;padding:var(--space-l) var(--space-m) var(--space-xl);border:1px solid var(--hairline);border-radius:var(--panel-radius);background:linear-gradient(transparent calc(50% - .5px), var(--hairline-bright) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)), radial-gradient(ellipse at 50% 0%, var(--tertiary-20), transparent 70%), var(--app-chrome);grid-template-columns:repeat(5,minmax(0,1fr));display:grid;position:relative;overflow:hidden}.mot-scroll__bar{block-size:11rem;padding-block:var(--space-s);border:1px solid var(--tertiary-60);background:linear-gradient(180deg, var(--tertiary-40), var(--primary-20) 70%, transparent);box-shadow:inset 0 1px 0 color-mix(in srgb, var(--white) 15%, transparent), 0 20px 40px -20px var(--tertiary-60);backdrop-filter:blur(6px);border-radius:40rem;flex-direction:column;justify-content:space-between;align-items:center;display:flex;position:relative;&:nth-child(3){border-color:var(--tertiary)}&:nth-child(5){border-color:var(--primary-60);background:linear-gradient(180deg, var(--primary-40), var(--tertiary-20) 70%, transparent)}&:nth-child(6){border-color:var(--primary);background:linear-gradient(180deg, var(--primary-60), var(--primary-10) 70%, transparent);box-shadow:0 20px 50px -18px var(--primary-60)}}.mot-scroll__orb{background:radial-gradient(circle at 35% 30%, var(--white), var(--tertiary-200) 45%, var(--tertiary));block-size:1.4rem;inline-size:1.4rem;box-shadow:0 0 18px var(--tertiary-60);border-radius:50%}.mot-scroll__speed{background:color-mix(in srgb, var(--black) 45%, transparent);border-radius:40rem;padding-block:.1em;padding-inline:.5em}.mot-scroll__axis{inset-inline:var(--space-m);justify-content:space-between;display:flex;position:absolute;inset-block-end:var(--space-s)}.mot-scroll__axis-end{font-size:var(--text-xs)}.mot-spring__stage{align-items:stretch;gap:var(--space-m);display:flex;@media (width<=700px){flex-direction:column}}.mot-presets__grid{gap:var(--space-s);grid-template-columns:repeat(4,minmax(0,1fr));display:grid;@media (width<=900px){grid-template-columns:repeat(3,minmax(0,1fr))}@media (width<=640px){grid-template-columns:repeat(2,minmax(0,1fr))}}.mot-presets__tile{border:1px solid var(--hairline);border-radius:var(--panel-radius);background:var(--surface);cursor:default;transition:border-color var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease);flex-direction:column;gap:0;display:flex;overflow:hidden;&:hover{border-color:var(--primary-40);box-shadow:var(--glow-red)}@media (prefers-reduced-motion:reduce){transition:none}}.mot-presets__stage{aspect-ratio:16/10;border-block-end:1px solid var(--hairline);background-color:var(--app-chrome);background-image:radial-gradient(ellipse at 50% 40%, var(--tertiary-10), transparent 70%), radial-gradient(var(--hairline) 1px, transparent 1px);perspective:600px;background-size:auto,16px 16px;place-items:center;display:grid;position:relative}.mot-presets__num{font-size:var(--text-xs);position:absolute;inset-block-start:var(--space-xs);inset-inline-start:var(--space-s)}.mot-presets__card{border:1px solid var(--hairline-bright);border-radius:var(--radius-m);background:var(--surface-raised);inline-size:56%;box-shadow:0 12px 30px -18px color-mix(in srgb, var(--black) 80%, transparent);flex-direction:column;gap:.4rem;padding:.5rem;display:flex}.mot-presets__thumb{aspect-ratio:16/9;border-radius:var(--radius-s);background:linear-gradient(135deg, var(--primary), var(--tertiary))}.mot-presets__line{background:var(--hairline-bright);border-radius:40rem;block-size:.35rem;display:block}.mot-presets__line--short{inline-size:60%}.mot-presets__meta{padding:var(--space-s) var(--space-m);flex-direction:column;gap:.15rem;display:flex}.mot-presets__hint{font-size:var(--text-xs)}.mot-presets__tile--fade{&:hover .mot-presets__card,&:active .mot-presets__card{animation:mot-replay-fade .7s var(--motion-ease,cubic-bezier(.16, 1, .3, 1)) both}@media (prefers-reduced-motion:reduce){&:hover .mot-presets__card,&:active .mot-presets__card{animation:none}}}.mot-presets__tile--rise{&:hover .mot-presets__card,&:active .mot-presets__card{animation:mot-replay-rise .7s var(--motion-ease,cubic-bezier(.16, 1, .3, 1)) both}@media (prefers-reduced-motion:reduce){&:hover .mot-presets__card,&:active .mot-presets__card{animation:none}}}.mot-presets__tile--sink{&:hover .mot-presets__card,&:active .mot-presets__card{animation:mot-replay-sink .7s var(--motion-ease,cubic-bezier(.16, 1, .3, 1)) both}@media (prefers-reduced-motion:reduce){&:hover .mot-presets__card,&:active .mot-presets__card{animation:none}}}.mot-presets__tile--slide-right{&:hover .mot-presets__card,&:active .mot-presets__card{animation:mot-replay-slide-right .7s var(--motion-ease,cubic-bezier(.16, 1, .3, 1)) both}@media (prefers-reduced-motion:reduce){&:hover .mot-presets__card,&:active .mot-presets__card{animation:none}}}.mot-presets__tile--slide-left{&:hover .mot-presets__card,&:active .mot-presets__card{animation:mot-replay-slide-left .7s var(--motion-ease,cubic-bezier(.16, 1, .3, 1)) both}@media (prefers-reduced-motion:reduce){&:hover .mot-presets__card,&:active .mot-presets__card{animation:none}}}.mot-presets__tile--zoom{&:hover .mot-presets__card,&:active .mot-presets__card{animation:mot-replay-zoom .7s var(--motion-ease,cubic-bezier(.16, 1, .3, 1)) both}@media (prefers-reduced-motion:reduce){&:hover .mot-presets__card,&:active .mot-presets__card{animation:none}}}.mot-presets__tile--pop{&:hover .mot-presets__card,&:active .mot-presets__card{animation:.7s cubic-bezier(.34,1.56,.64,1) both mot-replay-pop}@media (prefers-reduced-motion:reduce){&:hover .mot-presets__card,&:active .mot-presets__card{animation:none}}}.mot-presets__tile--blur{&:hover .mot-presets__card,&:active .mot-presets__card{animation:mot-replay-blur .7s var(--motion-ease,cubic-bezier(.16, 1, .3, 1)) both}@media (prefers-reduced-motion:reduce){&:hover .mot-presets__card,&:active .mot-presets__card{animation:none}}}.mot-presets__tile--tilt{&:hover .mot-presets__card,&:active .mot-presets__card{animation:mot-replay-tilt .7s var(--motion-ease,cubic-bezier(.16, 1, .3, 1)) both}@media (prefers-reduced-motion:reduce){&:hover .mot-presets__card,&:active .mot-presets__card{animation:none}}}.mot-presets__tile--flip-x{&:hover .mot-presets__card,&:active .mot-presets__card{animation:mot-replay-flip-x .7s var(--motion-ease,cubic-bezier(.16, 1, .3, 1)) both}@media (prefers-reduced-motion:reduce){&:hover .mot-presets__card,&:active .mot-presets__card{animation:none}}}.mot-presets__tile--flip-y{&:hover .mot-presets__card,&:active .mot-presets__card{animation:mot-replay-flip-y .7s var(--motion-ease,cubic-bezier(.16, 1, .3, 1)) both}@media (prefers-reduced-motion:reduce){&:hover .mot-presets__card,&:active .mot-presets__card{animation:none}}}.mot-presets__tile--skew{&:hover .mot-presets__card,&:active .mot-presets__card{animation:mot-replay-skew .7s var(--motion-ease,cubic-bezier(.16, 1, .3, 1)) both}@media (prefers-reduced-motion:reduce){&:hover .mot-presets__card,&:active .mot-presets__card{animation:none}}}