/* Lucian UX/UI Prompt #002 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#002 */
.u002{--bg:#073f3a;--fg:#fffdf7;--blob:linear-gradient(135deg,#b8861b,#f0cb69 60%,#2fc7a8);position:relative;width:340px;max-width:100%;height:70px;display:grid;place-items:center;margin:4px 0 -6px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .u002{--bg:#f4f0e8;--fg:#121117}}
:root[data-theme="dark"] .u002{--bg:#f4f0e8;--fg:#121117}
.u002-mag{width:100%;transition:translate .9s var(--ux-spring)}
.u002-btn{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;height:56px;padding:0 7px 0 23px;border:0;border-radius:999px;background:var(--bg);color:var(--fg);overflow:hidden;isolation:isolate;text-decoration:none;box-shadow:0 16px 30px -22px rgba(4,63,58,.62),0 0 0 1px color-mix(in srgb,var(--fg) 8%,transparent);transition:transform .6s var(--ux-spring),box-shadow .6s var(--ux-ease)}
.u002-btn:hover{box-shadow:0 20px 38px -22px rgba(184,134,27,.54),0 0 0 1px transparent}
.u002-btn:active{transform:scale(.96)}
.u002-btn:focus-visible{outline:2px solid var(--gold-bright);outline-offset:5px}
.u002-fill{position:absolute;inset:0;z-index:-1;background:var(--blob);clip-path:circle(21px at calc(100% - 28px) 50%);transition:clip-path .8s var(--ux-ease)}
.u002-btn:hover .u002-fill,.u002-btn:focus-visible .u002-fill{clip-path:circle(160% at calc(100% - 28px) 50%)}
.u002-txt{position:relative;overflow:hidden;padding:5px 0;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:translate .7s var(--ux-spring),color .5s var(--ux-ease)}
.u002-btn:hover .u002-txt{color:#fff}
.u002-txt span{display:block;transition:transform .6s var(--ux-spring),opacity .35s var(--ux-ease)}
.u002-txt span+span{position:absolute;left:0;top:5px;transform:translateY(130%);opacity:0}
.u002[data-state="go"] .u002-txt span:first-child{transform:translateY(-130%);opacity:0}
.u002[data-state="go"] .u002-txt span+span{transform:none;opacity:1}
.u002-orb{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;overflow:hidden;flex:none;transition:translate .7s var(--ux-spring)}
.u002-orb svg{position:absolute;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.u002-orb svg:last-child{transform:translateX(-36px)}
.u002[data-state="go"] .u002-orb svg:first-child{animation:u002-out .55s var(--ux-ease) forwards}
.u002[data-state="go"] .u002-orb svg:last-child{animation:u002-in .6s var(--ux-spring) .28s forwards}
@keyframes u002-out{to{transform:translateX(36px)}}
@keyframes u002-in{to{transform:none}}
.u002-glow{position:absolute;left:50%;top:50%;width:280px;height:82px;margin:-30px 0 0 -140px;border-radius:50%;background:var(--blob);filter:blur(30px);opacity:0;z-index:-1;transition:opacity .7s var(--ux-ease)}
.u002:hover .u002-glow{opacity:.38}
.u002-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:420px){.u002{width:100%;min-width:0}.u002-mag,.u002-btn{min-width:0}.u002-txt{font-size:10px}.u002-btn{padding-left:18px}}