.motion-section{padding:35px 0 75px}.motion-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}.motion-heading .eyebrow{margin-bottom:15px}.motion-heading h2{font-size:36px;letter-spacing:-1px;margin:0}.motion-toggle,.widget-replay{font:inherit;cursor:pointer;border:1px solid #53462e;background:#17140e;color:#e3c886;border-radius:6px;font-size:14px;min-height:40px;padding:8px 14px}.motion-toggle:hover,.widget-replay:hover{background:#2a2316;border-color:#c6a458}.motion-toggle:focus-visible,.widget-replay:focus-visible{outline:3px solid #edc458;outline-offset:4px}.motion-widgets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.motion-widget{min-width:0;border:1px solid #3a3223;border-radius:12px;background:#121210;overflow:hidden}.widget-canvas{position:relative;aspect-ratio:1.44;background:radial-gradient(ellipse at 85% 95%,#89602528,transparent 70%),#191918;overflow:hidden;border-bottom:1px solid #3a3223;container-type:inline-size}.widget-menubar{height:38px;padding:0 15px;border-bottom:1px solid #38342a;display:flex;justify-content:space-between;align-items:center;color:#c0bbb0;font-size:12px;background:#1f1f1c}.widget-menu-icon{width:22px;height:22px;position:relative;border-radius:5px;outline:0 solid #edc458}.widget-stage{position:absolute;inset:38px 0 0;font-size:clamp(12px,3.4cqw,15px)}.widget-source,.widget-pinned{position:absolute;left:12%;top:13%;width:42%;height:61%;padding:11px 12px;background:#efeadc;color:#302e27;border:1px solid #ede6d7;border-radius:4px;box-shadow:0 7px 15px #0003}.widget-source-label{display:block;font-size:8px;letter-spacing:1px;line-height:1.4}.widget-source strong,.widget-pinned strong{display:block;font-size:clamp(18px,6.3cqw,28px);line-height:1.13;letter-spacing:-.8px;margin-top:9px}.widget-copy-label{position:absolute;bottom:9px;right:9px;font-size:11px;background:#302d26;color:#f7ecd0;padding:3px 8px;border-radius:4px}.widget-pinned{left:44%;top:20%;width:43%;height:60%;opacity:0;transform:translateY(10px);box-shadow:0 8px 23px #0005}.widget-pinned .widget-source-label{color:#76633a}.widget-pinned strong{color:#342d1c}.widget-cursor{position:absolute;left:46%;top:65%;z-index:3;filter:drop-shadow(1px 2px 1px #0009);opacity:0}.widget-step{position:absolute;left:12px;right:12px;bottom:11px;height:19px;text-align:center;font-size:12px;color:#d1c4a2}.widget-step>span{position:absolute;inset:0;opacity:0;line-height:19px;white-space:nowrap}.widget-caption{padding:24px 20px 21px;display:flex;gap:8px;align-items:flex-end;justify-content:space-between}.widget-number{display:block;font-size:11px;letter-spacing:1.1px;color:#c5a856;margin-bottom:12px}.widget-caption h3{font-size:20px;line-height:1.18;margin-bottom:9px;letter-spacing:-.5px}.widget-caption p{font-size:14px;color:#afa99c;margin:0;line-height:1.45}.widget-replay{padding:6px 10px;min-height:36px;font-size:12px;background:transparent;flex:none}.motion-note{max-width:900px;margin:20px 0 0;font-size:13px;line-height:1.65;color:#a29b8d}.widget-mode{position:relative;width:72px;text-align:right;height:20px;color:#edc458;font-size:11px}.widget-mode>span{position:absolute;inset:0}.mode-grid{opacity:0}.arrange-card{position:absolute;top:13%;width:29%;height:58%;border-radius:4px;padding:10px;box-shadow:0 7px 17px #0004}.arrange-card>span{font-size:7px;letter-spacing:.7px;display:block;white-space:nowrap}.arrange-card strong{font-size:clamp(15px,4.6cqw,20px);display:block;line-height:1.1;letter-spacing:-.5px;margin-top:15px}.arrange-a{left:7%;background:#e3d4b1;color:#3c3528;transform:translateY(11px) rotate(-7deg)}.arrange-b{left:35.5%;top:20%;background:#454b3c;color:#f2eedf;transform:translateY(-13px) rotate(5deg);z-index:1}.arrange-c{left:64%;background:#c29857;color:#2d2417;transform:translateY(18px) rotate(-3deg);z-index:2}.palette{display:flex;height:39%;margin-top:15px}.palette i{flex:1;background:#e3d4b1}.palette i:nth-child(2){background:#c29857}.palette i:nth-child(3){background:#262b22}.arrange-card small{font-size:7px;display:block;margin-top:9px;line-height:1.3}.widget-share-sheet{position:absolute;left:8%;top:8%;width:37%;height:72%;background:#eeeadd;color:#383124;border:1px solid #cec5b2;border-radius:8px;padding:9px 10px;box-shadow:0 7px 20px #0004}.share-label{display:block;font-size:9px;text-align:center}.share-preview{width:61%;margin:7px auto;font-size:clamp(14px,4.5cqw,19px);line-height:1.05;font-weight:600;background:#474b3b;color:#f0e9d5;letter-spacing:-.6px;padding:8px}.share-destination{display:flex;align-items:center;justify-content:center;gap:5px;font-size:10px}.share-destination img{width:27px;height:27px}.share-saved{position:absolute;bottom:11px;left:8px;right:8px;text-align:center;background:#eec558;color:#302616;padding:5px;border-radius:4px;font-size:11px;opacity:0}.widget-sync{position:absolute;left:45%;top:36%;width:19%;font-size:9px;text-align:center;color:#c8b781;opacity:0}.sync-dots{display:block;font-size:26px;line-height:19px;letter-spacing:3px}.widget-received{position:absolute;left:65%;top:24%;width:28%;height:52%;background:#474b3b;color:#f0e9d5;border:1px solid #7a785e;box-shadow:0 7px 20px #0004;border-radius:4px;padding:10px;opacity:0;transform:translateY(9px)}.widget-received>span{font-size:7px;display:block;letter-spacing:.5px}.widget-received strong{font-size:clamp(18px,5.3cqw,24px);line-height:1.08;letter-spacing:-.7px;display:block;margin-top:15px}
/* A single, finite cycle. Replay is optional; offscreen animations are paused. */
.motion-widget.is-playing .widget-source{animation:copy-source 7s both}.motion-widget.is-playing .widget-pinned{animation:copy-pin 7s both}.widget-copy.is-playing .widget-cursor{animation:copy-cursor 7s both}.widget-copy.is-playing .widget-menu-icon{animation:menu-tap 7s both}.is-playing .copy-step-1{animation:step-first 7s both}.is-playing .copy-step-2{animation:step-mid 7s both}.is-playing .copy-step-3{animation:step-last 7s both}.is-playing .arrange-a{animation:arrange-a 7s both}.is-playing .arrange-b{animation:arrange-b 7s both}.is-playing .arrange-c{animation:arrange-c 7s both}.widget-arrange.is-playing .widget-cursor{animation:arrange-cursor 7s both}.is-playing .mode-free{animation:mode-free 7s both}.is-playing .mode-grid{animation:mode-grid 7s both}.is-playing .arrange-step-1{animation:mode-free 7s both}.is-playing .arrange-step-2{animation:mode-grid 7s both}.widget-share.is-playing .widget-cursor{animation:share-cursor 8s both}.is-playing .share-saved{animation:share-saved 8s both}.is-playing .share-destination{animation:share-destination 8s both}.is-playing .widget-sync{animation:share-sync 8s both}.is-playing .widget-received{animation:share-received 8s both}.is-playing .share-step-1{animation:step-first 8s both}.is-playing .share-step-2{animation:step-mid 8s both}.is-playing .share-step-3{animation:step-last 8s both}.motion-widget.is-paused *{animation-play-state:paused!important}.motion-widget:not(.is-playing) .widget-pinned,.motion-widget:not(.is-playing) .widget-received,.motion-widget:not(.is-playing) .share-saved,.motion-widget:not(.is-playing) .copy-step-3,.motion-widget:not(.is-playing) .arrange-step-2,.motion-widget:not(.is-playing) .share-step-3,.motion-widget:not(.is-playing) .mode-grid{opacity:1;transform:none}.motion-widget:not(.is-playing) .widget-source,.motion-widget:not(.is-playing) .mode-free{opacity:0}.motion-widget:not(.is-playing) .arrange-card{transform:none;top:16%}.motion-widget:not(.is-playing) .share-destination{opacity:0}
@keyframes copy-source{0%,40%{opacity:1;transform:none}58%,100%{opacity:0;transform:scale(.96)}}@keyframes copy-pin{0%,45%{opacity:0;transform:translateY(12px) scale(.94)}61%,100%{opacity:1;transform:none}}@keyframes copy-cursor{0%,8%{opacity:0;left:40%;top:70%}17%,26%{opacity:1;left:42%;top:59%}42%,49%{opacity:1;left:91%;top:-24px}61%,100%{opacity:0;left:86%;top:0}}@keyframes menu-tap{0%,39%,53%,100%{outline:0 solid #edc458}45%{outline:5px solid #edc45855}}@keyframes step-first{0%,27%{opacity:1}34%,100%{opacity:0}}@keyframes step-mid{0%,32%{opacity:0}39%,62%{opacity:1}69%,100%{opacity:0}}@keyframes step-last{0%,68%{opacity:0}76%,100%{opacity:1}}@keyframes arrange-a{0%,15%{transform:translateY(11px) rotate(-7deg);top:13%}30%,44%{transform:translate(2px,-5px) rotate(-2deg);top:13%}65%,100%{transform:none;top:16%}}@keyframes arrange-b{0%,45%{transform:translateY(-13px) rotate(5deg);top:20%}65%,100%{transform:none;top:16%}}@keyframes arrange-c{0%,45%{transform:translateY(18px) rotate(-3deg);top:13%}65%,100%{transform:none;top:16%}}@keyframes arrange-cursor{0%,7%{opacity:0;left:27%;top:65%}16%{opacity:1;left:24%;top:39%}30%,36%{opacity:1;left:25%;top:28%}49%,54%{opacity:1;left:88%;top:-24px}65%,100%{opacity:0;left:83%;top:0}}@keyframes mode-free{0%,47%{opacity:1}58%,100%{opacity:0}}@keyframes mode-grid{0%,53%{opacity:0}65%,100%{opacity:1}}@keyframes share-cursor{0%,7%{opacity:0;left:46%;top:78%}20%,29%{opacity:1;left:31%;top:64%}39%,100%{opacity:0;left:35%;top:75%}}@keyframes share-saved{0%,30%{opacity:0}39%,100%{opacity:1}}@keyframes share-destination{0%,30%{opacity:1}37%,100%{opacity:0}}@keyframes share-sync{0%,38%{opacity:0}45%,67%{opacity:1}78%,100%{opacity:0}}@keyframes share-received{0%,66%{opacity:0;transform:translateY(9px)}80%,100%{opacity:1;transform:none}}
@media(max-width:1150px) and (min-width:801px){.motion-widgets{gap:14px}.widget-caption{padding:18px 14px;display:block}.widget-replay{margin-top:15px}.widget-caption h3{font-size:19px}.widget-stage{font-size:12px}.widget-copy-label{font-size:9px}.widget-step{font-size:10px}.share-destination{font-size:9px}.widget-source-label{font-size:7px}}
@media(max-width:800px){.motion-section{padding:15px 0 55px}.motion-widgets{grid-template-columns:1fr;max-width:510px;margin:auto;gap:24px}.motion-heading{align-items:start;max-width:510px;margin:0 auto 27px}.motion-heading h2{font-size:30px}.motion-heading .eyebrow{font-size:11px}.motion-toggle{font-size:12px;max-width:105px;line-height:1.4;padding:8px 10px}.widget-canvas{aspect-ratio:1.6}.widget-caption{padding:23px}.widget-caption h3{font-size:23px}.widget-number{font-size:12px}.widget-step{font-size:13px}.widget-source-label{font-size:9px}.arrange-card>span,.widget-received>span{font-size:8px}.share-label{font-size:11px}.share-destination{font-size:12px}.share-saved{font-size:12px}.widget-sync{font-size:11px}.motion-note{max-width:510px;margin:20px auto 0}}@media(prefers-reduced-motion:reduce){.motion-widget *{animation:none!important}.motion-toggle,.widget-replay{display:none}.widget-pinned,.widget-received,.share-saved,.copy-step-3,.arrange-step-2,.share-step-3,.mode-grid{opacity:1!important;transform:none!important}.widget-source,.mode-free,.share-destination,.widget-cursor,.widget-sync,.copy-step-1,.copy-step-2,.arrange-step-1,.share-step-1,.share-step-2{opacity:0!important}.arrange-card{transform:none!important;top:16%!important}}