.motion-stage {height:245px;display:flex;gap:12px;align-items:center;justify-content:center;padding:25px;overflow:hidden;perspective:600px;color:var(--text);}
.motion-piece {position:relative;padding:20px 24px;min-width:100px;border-radius:20px;font-size:20px;font-weight:600;text-align:center;}
.motion-controls {display:flex;justify-content:space-between;align-items:center;padding:10px 16px;gap:8px;min-height:38px;background:var(--surface-clear);}
.motion-controls small {font-size:11px;color:var(--muted);}.motion-controls button {border:0;background:none;color:var(--brand);font:inherit;font-size:12px;cursor:pointer;}
.motion-stage:not(.motion-visible) * {animation-play-state:paused !important;}
.motion-stage.motion-paused * {animation-play-state:paused !important;}
.motion-fade .motion-piece {animation:fadeDemo 3s ease-in-out infinite;}
.motion-slidein .motion-piece {animation:slideDemo 3s var(--ease-out) infinite;}
.motion-scalein .motion-piece {animation:scaleDemo 3s var(--ease-out) infinite;}
.motion-popspring .motion-piece {animation:springDemo 3s ease-in-out infinite;}
.motion-blurin .motion-piece {animation:blurDemo 3s ease-in-out infinite;}
.motion-stagger .motion-piece {min-width:0;padding:16px;animation:staggerDemo 3s ease-in-out infinite;animation-delay:calc(var(--order)*.2s);}
.motion-clipreveal .motion-piece {animation:clipDemo 4s ease-in-out infinite;}
.motion-hoverlift .motion-piece {transition:transform .25s,box-shadow .25s;}.motion-hoverlift .motion-piece:hover,.motion-hoverlift .motion-piece:focus-visible {transform:translateY(-10px);box-shadow:0 24px 30px #22518426,var(--material-highlight);}
[data-ripple] {position:relative;overflow:hidden;}.ripple-wave {position:absolute;width:20px;height:20px;margin:-10px;background:#4d95ed44;border-radius:50%;pointer-events:none;animation:actualRipple .7s ease-out forwards;}
@keyframes actualRipple {to {transform:scale(12);opacity:0;}}
[data-morph] {width:120px;transition:width .25s,border-radius .25s;}.morph-busy {width:42px;border-radius:50%;}
[data-like] {font-size:38px;padding:4px 22px;color:var(--brand);}[data-like].liked {color:#e05c7f;animation:likePop .4s ease-out;box-shadow:0 0 0 10px #e05c7f15;}
@keyframes likePop {50%{transform:scale(1.35);}}
[data-tilt],[data-magnetic] {transition:transform .12s ease-out;}
.motion-check {width:95px;color:var(--success);}.motion-check path {stroke-dasharray:100;animation:reference-draw 3s ease-in-out infinite;}
.motion-sheen {position:relative;padding:30px 45px;border-radius:20px;overflow:hidden;}.motion-sheen small {display:block;font-size:12px;margin-top:8px;color:var(--muted);}.motion-sheen::after {content:"";position:absolute;inset:0;transform:translateX(-120%) skew(-20deg);background:linear-gradient(90deg,transparent,#ffffffaa,transparent);animation:sheenPass 3s infinite;}
@keyframes sheenPass {to{transform:translateX(120%) skew(-20deg);}}
.motion-track {width:85%;height:12px;border-radius:99px;background:#2f7df622;overflow:hidden;}.motion-track i {display:block;height:100%;background:linear-gradient(90deg,#94c4ff,#327de8);animation:fillTrack 3s infinite;}
@keyframes fillTrack {0%{width:0}80%,100%{width:100%}}
.motion-dots {display:flex;gap:12px;}.motion-dots i {width:12px;height:12px;border-radius:50%;background:var(--brand);animation:dotJump 1.2s infinite;}.motion-dots i:nth-child(2){animation-delay:.15s}.motion-dots i:nth-child(3){animation-delay:.3s}
@keyframes dotJump {0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-12px);opacity:1}}
.motion-pulse .motion-piece,.motion-breathing .motion-piece {animation:gentleBreath 3s ease-in-out infinite;}
@keyframes gentleBreath {50%{transform:scale(1.045);opacity:.65}}
.motion-pages {position:relative;width:210px;height:125px;}.motion-pages .motion-piece {position:absolute;inset:0;display:grid;place-items:center;}
.motion-pagetransition .motion-piece:first-child {animation:pageA 5s infinite;}.motion-pagetransition .motion-piece:last-child {animation:pageB 5s infinite;}
@keyframes pageA {0%,35%,100%{opacity:1;transform:scale(1)}50%,85%{opacity:0;transform:scale(.9)}}
@keyframes pageB {0%,35%,100%{opacity:0;transform:scale(1.1)}50%,85%{opacity:1;transform:scale(1)}}
.motion-crossfade .motion-piece:first-child {animation:crossA 5s infinite;}.motion-crossfade .motion-piece:last-child {animation:crossA 5s infinite reverse;}
@keyframes crossA {0%,25%{opacity:1}60%,100%{opacity:0}}
.motion-slidetransition .motion-piece:first-child {animation:slideA 5s infinite;}.motion-slidetransition .motion-piece:last-child {animation:slideB 5s infinite;}
@keyframes slideA {0%,30%,100%{transform:translateX(0);opacity:1}50%,80%{transform:translateX(-110%);opacity:0}}
@keyframes slideB {0%,30%,100%{transform:translateX(110%);opacity:0}50%,80%{transform:translateX(0);opacity:1}}
.motion-shared {position:relative;width:240px;height:150px;border:1px dashed var(--glass-border);border-radius:15px;display:flex;justify-content:space-between;padding:12px;font-size:11px;}.motion-shared i {position:absolute;width:45px;height:45px;display:grid;place-items:center;border-radius:14px;font-style:normal;left:15px;top:45px;animation:sharedJourney 5s infinite;}
@keyframes sharedJourney {50%,75%{transform:translate(135px,25px) scale(1.5);border-radius:20px}}
.motion-expand {width:48px;height:48px;border-radius:50%;overflow:hidden;padding:12px;animation:expandPanel 5s infinite;}.motion-expand p{opacity:0;font-size:14px;animation:expandText 5s infinite;}
@keyframes expandPanel{40%,75%{width:210px;height:140px;border-radius:20px}}@keyframes expandText{40%,75%{opacity:1}}
.motion-pulseglow .motion-piece {animation:glassGlow 3s infinite;}@keyframes glassGlow{50%{box-shadow:0 0 30px #5c9df955,var(--material-highlight);}}
.motion-bounce .motion-piece{animation:bounceDemo 2s infinite;}.motion-wiggle .motion-piece{animation:wiggleDemo 2s infinite;}
.motion-highlight{padding:20px;border-radius:16px;animation:highlightOnce 4s infinite;}@keyframes highlightOnce{20%,40%{background:#68aaee66}70%{background:var(--material-fill)}}
.motion-badge{position:relative;padding:20px 35px;border-radius:16px;}.motion-badge i{position:absolute;right:-8px;top:-8px;border-radius:99px;padding:5px 9px;background:#d85564;color:white;font:600 12px inherit;animation:springDemo 3s infinite;}
.motion-gradient{width:210px;height:125px;border-radius:22px;background:linear-gradient(120deg,#71b7e9,#d2caf4,#c7f0f0,#71b7e9);background-size:300% 300%;animation:gradientFlow 6s infinite;box-shadow:inset 0 1px 0 white;}
.motion-float .motion-piece{animation:float 5s ease-in-out infinite;}.motion-marquee{width:100%;overflow:hidden;}.motion-marquee>div{width:max-content;font-size:23px;white-space:nowrap;animation:marqueeTravel 9s linear infinite;}@keyframes marqueeTravel{to{transform:translateX(-50%)}}
.motion-blob{width:120px;height:120px;background:linear-gradient(135deg,#acd9ffaa,#5b9dea88);border:1px solid #fff9;border-radius:40% 60% 55% 45%;animation:blobDemo 6s infinite;box-shadow:inset 0 2px 0 #fff9;}
.motion-type{font-size:24px;width:9em;white-space:nowrap;overflow:hidden;border-right:2px solid var(--brand);animation:typingChinese 4s steps(9) infinite;}@keyframes typingChinese{0%,10%{width:0}75%,100%{width:9em}}
.motion-text,.motion-count{font-size:32px;color:var(--ink);font-variant-numeric:tabular-nums;}.motion-reveal span{display:inline-block;font-size:27px;animation:staggerDemo 4s infinite;animation-delay:calc(var(--order)*.12s);}
.motion-gradient-text{font-size:27px;background:linear-gradient(90deg,#2675d2,#9078c8,#2675d2);background-size:200% 100%;background-clip:text;color:transparent;animation:gradientFlow 5s infinite;}
.motion-flip{position:relative;width:170px;height:110px;background:none;border:0;transform-style:preserve-3d;transition:transform .7s;cursor:pointer;}.motion-flip.flipped{transform:rotateY(180deg)}.motion-flip span{position:absolute;inset:0;display:grid;place-items:center;border-radius:20px;backface-visibility:hidden;}.motion-flip span+span{transform:rotateY(180deg);}
.motion-cube{position:relative;width:75px;height:75px;transform-style:preserve-3d;animation:cubeSpin 12s linear infinite;}.motion-cube span{position:absolute;inset:0;display:grid;place-items:center;background:#9ac9ef66;border:1px solid #fff;font-size:18px;}.motion-cube span:nth-child(1){transform:translateZ(37.5px)}.motion-cube span:nth-child(2){transform:rotateY(180deg) translateZ(37.5px)}.motion-cube span:nth-child(3){transform:rotateY(90deg) translateZ(37.5px)}.motion-cube span:nth-child(4){transform:rotateY(-90deg) translateZ(37.5px)}.motion-cube span:nth-child(5){transform:rotateX(90deg) translateZ(37.5px)}.motion-cube span:nth-child(6){transform:rotateX(-90deg) translateZ(37.5px)}@keyframes cubeSpin{from{transform:rotateX(-20deg) rotateY(0)}to{transform:rotateX(340deg) rotateY(360deg)}}
.motion-carousel{position:relative;width:80px;height:100px;transform-style:preserve-3d;animation:carouselSpin 12s linear infinite;}.motion-carousel .motion-piece{position:absolute;inset:0;min-width:0;padding:20px;transform:rotateY(calc(var(--order)*120deg)) translateZ(74px);backface-visibility:hidden;}@keyframes carouselSpin{to{transform:rotateY(360deg)}}
.motion-scroll{position:relative;width:100%;height:195px;overflow:auto;border:1px solid var(--edge-light);border-radius:16px;background:var(--surface-clear);scrollbar-width:thin;}.scroll-story{position:relative;}.scroll-story section{height:175px;padding:20px;position:relative;}.scroll-story b{font-size:17px;}.scroll-story p{font-size:12px;}.scroll-orb{position:absolute;top:30px;right:20px;width:100px;height:100px;border-radius:50%;background:radial-gradient(at 30% 20%,white,#70abe6);transform:translateY(var(--parallax,0px));opacity:.6;}.motion-stickypin .scroll-story b{position:sticky;top:0;background:var(--surface-frost);backdrop-filter:blur(12px);padding:7px;display:block;}.scroll-progress{position:sticky;top:0;z-index:2;height:5px;width:100%;background:var(--brand);transform-origin:left;transform:scaleX(var(--scroll,0));}.motion-scrollreveal section{opacity:.2;transition:opacity .35s;}.motion-scrollreveal section:first-child,.motion-scrollreveal section.revealed{opacity:1;}.scroll-horizontal{position:sticky;top:20px;display:flex;width:max-content;gap:12px;transform:translateX(var(--horizontal,0px));padding:10px;}.motion-horizontalscroll .scroll-story{opacity:.25;}.motion-scrollytelling section{border-bottom:1px solid var(--glass-border);}.motion-scrollytelling section:nth-child(2){background:#a8bbed33}.motion-scrollytelling section:nth-child(3){background:#92d6ca22}
@media(prefers-reduced-motion:reduce){.motion-stage *{animation:none !important;transition:none !important}.motion-pages .motion-piece:last-child{display:none}.motion-type{width:9em}.motion-flip.flipped{transform:rotateY(180deg)}}