/* One unchanged Pure Line appearance; only the arrival movement differs. */
[data-motion] .question-icon{background:none;border:0;box-shadow:none}
[data-motion] .icon-ripple{display:none!important}
[data-motion] .icon-arriving .question-pictogram{animation:none}
[data-motion] .question-pictogram>*{transform-box:fill-box;transform-origin:center;stroke-dasharray:none;stroke-dashoffset:0}
[data-motion="1"] .icon-arriving .question-pictogram{animation:quiet-pulse 1800ms ease-in-out var(--arrival-delay) both}
[data-motion="2"] .icon-arriving .question-pictogram>*{stroke-dasharray:100;animation:trace-line 3400ms ease-in-out calc(var(--arrival-delay) + var(--part)*100ms) both}
[data-motion="2"] .icon-arriving .wallet-dot{animation:trace-dot 3400ms ease-in-out var(--arrival-delay) both}
[data-motion="3"] .icon-arriving .question-pictogram{animation:soft-rise 1900ms cubic-bezier(.22,.7,.3,1) var(--arrival-delay) both}
[data-motion="4"] .icon-arriving .question-pictogram{animation:little-hello 2200ms ease-in-out var(--arrival-delay) both;transform-origin:50% 85%}
[data-motion="5"] .icon-arriving .question-pictogram>*{animation:part-arrive 1000ms ease-out calc(var(--arrival-delay) + var(--part)*300ms) both}
@keyframes quiet-pulse{0%{opacity:.35;transform:scale(.65)}40%{opacity:1;transform:scale(1.25)}70%{transform:scale(.94)}100%{opacity:1;transform:scale(1)}}
@keyframes trace-line{0%{stroke-dashoffset:100;opacity:0}12%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes trace-dot{0%,80%{opacity:0}100%{opacity:1}}
@keyframes soft-rise{0%{opacity:0;transform:translateY(30px)}50%{opacity:1;transform:translateY(-9px)}75%{transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}
@keyframes little-hello{0%{transform:rotate(0)}20%{transform:rotate(-22deg)}40%{transform:rotate(20deg)}60%{transform:rotate(-14deg)}80%{transform:rotate(9deg)}100%{transform:rotate(0)}}
@keyframes part-arrive{0%{opacity:0;transform:translateX(-20px) rotate(-15deg) scale(.5)}75%{opacity:1;transform:translateX(2px) rotate(2deg) scale(1.05)}100%{opacity:1;transform:translateX(0) rotate(0) scale(1)}}
.motion-preview-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0}.motion-preview-controls button{border:1px solid #d5c7f3;border-radius:24px;padding:12px 18px;background:#f4efff;color:#6545d5;font:inherit;cursor:pointer}.motion-preview-controls p{font-size:14px;flex:1;min-width:200px}.icon-gallery .question-icon{width:80px;height:80px}.icon-gallery .question-pictogram{width:54px;height:54px}
.motion-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.replay-motion{background:transparent;color:#7055b6;border:1px solid #e5dcf4;font-size:12px;padding:9px 13px;border-radius:999px;font-weight:600}.motion-actions .try-style{margin:0}
@media(max-width:750px){.concept-heading{display:block}.motion-actions{margin-top:20px}.icon-gallery .icon-strip{margin-top:22px}}
@media(prefers-reduced-motion:reduce){html:not(.preview-motion-enabled) [data-motion] .question-icon *{animation:none!important;stroke-dasharray:none!important}html:not(.preview-motion-enabled) [data-motion] .question-icon.icon-arriving{animation:accessible-arrive 650ms ease-out both!important}}

/* Keep assembly visible with reduced motion, without translation/rotation. */
@keyframes piece-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 html:not(.preview-motion-enabled) [data-motion="5"] .question-icon.icon-arriving{animation:none!important}
 html:not(.preview-motion-enabled) [data-motion="5"] .question-icon.icon-arriving .question-pictogram>*{animation:piece-reveal 900ms ease-out calc(var(--part)*350ms) both!important;transform:none!important}
}

/* Reduced-motion line reveal: retain staggered visibility without movement. */
@media(prefers-reduced-motion:reduce){html:not(.preview-motion-enabled) [data-motion="2"] .question-icon.icon-arriving{animation:none!important}html:not(.preview-motion-enabled) [data-motion="2"] .question-icon.icon-arriving .question-pictogram>*{animation:piece-reveal 900ms ease-out calc(var(--part)*350ms) both!important;transform:none!important}}

/* Draw the chosen line effect without moving the icon, including reduced motion. */
@media(prefers-reduced-motion:reduce){
 html:not(.preview-motion-enabled) [data-motion="2"] .question-icon.icon-arriving .question-pictogram>*{stroke-dasharray:100!important;animation:trace-line 3400ms ease-in-out calc(var(--arrival-delay) + var(--part)*100ms) both!important;transform:none!important}
 html:not(.preview-motion-enabled) [data-motion="2"] .question-icon.icon-arriving .wallet-dot{animation:trace-dot 3400ms ease-in-out var(--arrival-delay) both!important}
}