.motion-showcase{border:1px solid #ffffff20;background:#101014;border-radius:12px;overflow:hidden}.motion-arena{position:relative;height:clamp(360px,48vw,650px);display:grid;place-items:center;perspective:1000px;touch-action:pan-y;cursor:grab;background:radial-gradient(ellipse at 50% 40%,#393044 0,#19171e 45%,#101014 80%);isolation:isolate}.motion-arena:active{cursor:grabbing}.motion-object{width:clamp(210px,29vw,380px);aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(var(--rx,-12deg)) rotateY(var(--ry,-18deg));transition:transform .15s ease-out}.motion-solid{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:mark-float 7s ease-in-out infinite}.motion-layer{position:absolute;inset:0;transform:translateZ(var(--z));border-radius:22%;background:#1b191f;border:1px solid #706678;box-shadow:inset 0 0 20px #ffffff08}.motion-layer svg{display:block;width:100%;height:100%;padding:7%;overflow:visible}.motion-layer path{fill:#211e28;stroke:#5c5369;stroke-width:3}.motion-layer:last-child{background:linear-gradient(135deg,#37323d,#151318);border-color:#c9c3d4;box-shadow:inset 0 1px 3px #fff6,0 0 35px #ad92ff20}.motion-layer:last-child path{fill:none;stroke:#f2edf9;stroke-width:3;filter:drop-shadow(0 0 3px #fff6)}.motion-layer:last-child .symbol-part-1{stroke:#ad92ff;filter:drop-shadow(0 0 8px #ad92ff)}.motion-halo{position:absolute;width:45%;height:12%;bottom:12%;border-radius:50%;background:#ad92ff30;filter:blur(25px);transform:rotateX(65deg)}.motion-instruction{position:absolute;bottom:24px;font-size:12px;color:#a9a3b2;letter-spacing:.03em}.motion-desk{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:32px 40px;border-top:1px solid #ffffff18}.motion-title{font-size:30px;margin:10px 0}.motion-copy{font-size:16px;line-height:1.5;max-width:40ch;color:#bbb5c2}.motion-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.motion-options button,.motion-pause{border:1px solid #fff3;border-radius:6px;background:transparent;color:#ece7f2;padding:12px 16px;cursor:pointer;font:inherit}.motion-options button[aria-pressed=true]{background:#ad92ff;color:#17131f;border-color:#ad92ff}.motion-pause{border:0;padding-left:0;font-size:12px;margin-top:10px;color:#aaa}.motion-showcase[data-mode=turn] .motion-solid{animation:mark-turn 5s cubic-bezier(.65,0,.25,1) infinite}.motion-showcase[data-mode=pulse] .motion-solid{animation:mark-pulse 2.8s ease-in-out infinite}.motion-showcase[data-mode=unfold] .motion-layer{animation:mark-unfold 5s ease-in-out infinite}.motion-showcase.is-paused *,.motion-showcase.is-outside *{animation-play-state:paused!important}.motion-showcase.is-hit .motion-object{filter:drop-shadow(0 0 25px #ad92ff90)}
@keyframes mark-float{0%,100%{transform:translateY(8px) rotateZ(-4deg)}50%{transform:translateY(-14px) rotateZ(3deg)}}@keyframes mark-turn{0%,15%{transform:rotateY(0)}85%,100%{transform:rotateY(360deg)}}@keyframes mark-pulse{0%,40%,100%{transform:scale(1)}15%{transform:scale(1.07)}25%{transform:scale(1.015)}32%{transform:scale(1.045)}}@keyframes mark-unfold{0%,20%,100%{transform:translateZ(var(--z))}55%,70%{transform:translateZ(calc(var(--z) * 4))}}
@media(max-width:650px){.motion-desk{grid-template-columns:1fr;gap:20px;padding:24px}.motion-arena{height:380px}.motion-instruction{font-size:10px}.motion-object{width:220px}.motion-halo{width:70%}}@media(prefers-reduced-motion:reduce){.motion-showcase *{animation:none!important;transition:none!important}}
.motion-layer .brand-vector-symbol{background:transparent!important;position:static!important;opacity:1!important;max-width:none!important}.motion-layer:last-child .symbol-part-1{stroke:#f2edf9;filter:drop-shadow(0 0 3px #fff6)}.motion-layer:last-child .symbol-part-0{stroke:#ad92ff;filter:drop-shadow(0 0 8px #ad92ff)}
.glass-showcase{display:block;border:0;width:100%;height:clamp(380px,48vw,650px)}.glass-colors{display:flex;gap:12px;margin-top:22px}.glass-colors button{width:25px;height:25px;border-radius:50%;background:var(--swatch);border:3px solid #17151d;outline:1px solid #ffffff30;cursor:pointer}.glass-colors button[aria-pressed=true]{outline:2px solid white;outline-offset:3px}.glass-replay{margin-left:20px}@media(max-width:650px){.glass-showcase{height:390px}}
.motion-showcase{position:relative;border-radius:16px;background:#151319}.glass-showcase{height:clamp(430px,48vw,700px)}.showcase-caption{display:flex;justify-content:space-between;gap:20px;padding:18px 32px;border-top:1px solid #ffffff10;color:#aaa1b3;font-size:11px;letter-spacing:.06em}.motion-desk{grid-template-columns:.9fr 1.1fr;background:linear-gradient(135deg,#211c29,#17151d);padding:32px}.motion-options{grid-template-columns:repeat(3,1fr)}.motion-options button{font-size:12px;min-height:46px}.showcase-auto{padding:10px 14px;margin:16px 14px 0 0;background:#ffffff0b;border:1px solid #ffffff30;border-radius:30px;color:#eee;font:inherit;font-size:12px;cursor:pointer}.showcase-auto[aria-pressed=true]{border-color:#ad92ff;color:#c7b4ff}.glass-colors button{width:34px;height:34px;touch-action:none;cursor:grab}.is-color-drag:after{content:'';position:fixed;left:var(--drop-x);top:var(--drop-y);width:30px;height:30px;border-radius:50%;background:var(--drop-color);box-shadow:0 0 25px var(--drop-color);transform:translate(-50%,-50%);pointer-events:none;z-index:9999}.is-color-drag iframe{outline:2px solid var(--drop-color);outline-offset:-3px}@media(max-width:650px){.motion-desk{grid-template-columns:1fr;padding:24px}.showcase-caption{padding:14px 24px;flex-direction:column;gap:8px}.motion-options{grid-template-columns:1fr 1fr}.glass-showcase{height:400px}}