/* Phone motions from UI动效设计.md. Desktop hover effects are intentionally absent. */
@media (prefers-reduced-motion: reduce) {
  .motion-photo, .motion-photo.is-sharp { filter: none; transform: none; }
  .nav-capsule, .choice-pill, .tool-card, .creation, .primary, .motion-sheet, .sheet-backdrop, .pull-indicator, .skeleton-card::after, .motion-photo { animation: none !important; transition: none !important; }
}
.bottom-nav > div { position: relative; }
.nav-capsule { position: absolute; z-index: 0; top: 6px; left: 0; height: 48px; border-radius: 16px; background: #f4dc5724; pointer-events: none; will-change: transform, width; }
.bottom-nav button { position: relative; z-index: 1; transition: color 400ms ease; }
.bottom-nav button.nav-pop .symbol { animation: navIcon 400ms cubic-bezier(.2,1.35,.32,1); }
@keyframes navIcon { 0% { transform: scale(1); } 38% { transform: scale(.82); } 70% { transform: scale(1.06); } 100% { transform: scale(1); } }
#main.motion-forward { animation: pageForward 400ms cubic-bezier(.2,.8,.2,1); }
#main.motion-back { animation: pageBack 400ms cubic-bezier(.2,.8,.2,1); }
@keyframes pageForward { from { opacity: .35; transform: translate3d(22px,0,0); } to { opacity: 1; transform: none; } }
@keyframes pageBack { from { opacity: .35; transform: translate3d(-22px,0,0); } to { opacity: 1; transform: none; } }
.choices { position: relative; }
.choice-pill { position: absolute; z-index: 0; border-radius: 10px; background: #f4dc5718; box-shadow: inset 0 0 0 1px var(--green); pointer-events: none; }
.choices:has(.choice-pill) button { position: relative; z-index: 1; background: transparent; border-color: transparent; transition: color 300ms ease; }
button:active:not(:disabled) { transform: scale(.96); }
.primary { position: relative; transition: width 300ms ease-in-out, border-radius 300ms ease-in-out, background 300ms ease, color 180ms ease; }
.primary.motion-busy, .primary.motion-busy:disabled, .primary.motion-done, .primary.motion-done:disabled { width: 52px; min-width: 52px; height: 52px; min-height: 52px; margin-inline: auto; padding: 0; border-radius: 26px; color: transparent !important; opacity: 1 !important; overflow: hidden; }
.primary.motion-busy, .primary.motion-busy:disabled { background: var(--green) !important; border-color: var(--green) !important; }
.primary.motion-busy .generate-label, .primary.motion-done .generate-label { opacity: 0; visibility: hidden; }
.generate-label { white-space: nowrap; }
.primary.motion-busy .symbol, .primary.motion-done .symbol { opacity: 0; }
.create-dock.is-morphing .generation-cost { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, visibility 0s linear 180ms; }
.generation-cost { transition: opacity 180ms ease, visibility 0s linear 0s; }
.primary.motion-done, .primary.motion-done:disabled { background: #3f9d62 !important; border-color: #3f9d62 !important; }
.primary.motion-done::after { content: ""; position: absolute; left: 50%; top: 46%; width: 14px; height: 8px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(-50%,-60%) rotate(-45deg); animation: drawButtonCheck 350ms ease forwards; }
@keyframes drawButtonCheck { from { opacity: 0; transform: translate(-50%,-60%) rotate(-45deg) scale(.4); } to { opacity: 1; transform: translate(-50%,-60%) rotate(-45deg) scale(1); } }
.field.float-field { position: relative; }
.field.float-field > label { position: absolute; z-index: 1; left: 14px; top: 18px; margin: 0; color: var(--muted); font-weight: 500; pointer-events: none; transform-origin: left center; transition: transform 200ms ease-out, color 200ms ease-out; }
.field.float-field > input, .field.float-field > textarea { background-image: linear-gradient(var(--green), var(--green)); background-repeat: no-repeat; background-position: center calc(100% - 1px); background-size: 0 2px; padding-top: 22px; transition: background-size 200ms ease-out, border-color 200ms ease; }
.field.float-field.is-raised > label, .field.float-field:focus-within > label { transform: translateY(-11px) scale(.8); color: var(--green); }
.field.float-field:focus-within > input, .field.float-field:focus-within > textarea, .field.float-field.is-valid > input { background-size: calc(100% - 26px) 2px; }
.field.float-field.is-invalid > input, .field.float-field.is-invalid > textarea { border-color: var(--error); background-image: linear-gradient(var(--error), var(--error)); background-size: calc(100% - 26px) 2px; }
.field.float-field.is-invalid > label { color: var(--error); }
.field-status { position: absolute; right: 12px; top: 18px; width: 18px; height: 18px; display: grid; place-items: center; }
.field-spinner { width: 14px; height: 14px; border: 2px solid #f4dc5744; border-top-color: var(--green); border-radius: 50%; animation: spin .7s linear infinite; }
.check-draw { width: 18px; height: 18px; color: #3f9d62; }
.check-draw path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: drawCheck 350ms ease forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
.field-error { color: var(--error); font-size: 12px; line-height: 1.5; margin-top: 6px; animation: errorIn 220ms ease; }
@keyframes errorIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.strength { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 10px; }
.strength i { display: block; height: 6px; border-radius: 99px; background: #343432; transform: scaleX(0); transform-origin: left center; }
.strength i.on { animation: strengthIn 250ms cubic-bezier(.2,1.25,.32,1) forwards; }
.strength.s1 i.on { background: #e15b4c; }
.strength.s2 i.on { background: #e3923a; }
.strength.s3 i.on { background: #e4c14a; }
.strength.s4 i.on { background: #3f9d62; }
@keyframes strengthIn { 0% { transform: scaleX(0); } 70% { transform: scaleX(1.04); } 100% { transform: scaleX(1); } }
.strength-label { min-height: 18px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.strength-label b { display: inline-block; animation: labelIn 200ms ease; }
@keyframes labelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.strength-mark { justify-self: end; width: 16px; height: 16px; }
@keyframes headshake { 0%,100% { transform: translateX(0); } 15% { transform: translateX(-10px); } 30% { transform: translateX(10px); } 48% { transform: translateX(-6px); } 64% { transform: translateX(6px); } 80% { transform: translateX(-3px); } 92% { transform: translateX(3px); } }
.is-shaking { animation: headshake 400ms linear; }
.tool-card.motion-seen, .creation.motion-seen { opacity: 1; transform: none; }
.tool-card.motion-wait, .creation.motion-wait { opacity: 0; transform: translate3d(0,40px,0); }
.tool-card.motion-in, .creation.motion-in { animation: cardIn 460ms cubic-bezier(.2,1.15,.32,1) both; animation-delay: var(--motion-delay,0ms); }
@keyframes cardIn { from { opacity: 0; transform: translate3d(0,40px,0); } 75% { transform: translate3d(0,-3px,0); } to { opacity: 1; transform: none; } }
.motion-photo { filter: blur(20px); transform: scale(1.04); }
.motion-photo.is-sharp { animation: sharpen 500ms ease forwards; }
@keyframes sharpen { from { filter: blur(20px); transform: scale(1.04); } to { filter: blur(0); transform: scale(1); } }
.skeleton-card { pointer-events: none; }
.skeleton-photo, .skeleton-line { display: block; position: relative; overflow: hidden; background: #2a2a28; border-radius: 12px; }
.skeleton-photo { height: 148px; }
.skeleton-line { height: 12px; margin: 12px 12px 0; }
.skeleton-line.short { width: 58%; margin-bottom: 14px; }
.skeleton-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, #ffffff1f 48%, transparent 66%); transform: translateX(-120%); animation: shimmer 1.5s linear infinite; }
.creation.skeleton-card { position: relative; }
@keyframes shimmer { to { transform: translateX(120%); } }
.sheet-backdrop { position: fixed; inset: 0; z-index: 55; border: 0; background: #0000008c; }
.motion-sheet { position: fixed !important; z-index: 70 !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: min(100%,480px) !important; margin-inline: auto; max-height: min(70dvh,560px); overflow: auto; border-radius: 22px 22px 0 0 !important; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); animation: sheetUp 400ms cubic-bezier(.2,1.2,.32,1); box-shadow: 0 -18px 50px #0008; }
.motion-sheet::before { content: ""; display: block; width: 42px; height: 4px; border-radius: 4px; background: #ffffff33; margin: 2px auto 12px; }
@keyframes sheetUp { from { transform: translate3d(0,110%,0); } to { transform: translate3d(0,0,0); } }
.app-shell.sheet-back { transform: scale(.92); transform-origin: center top; border-radius: 18px; transition: transform 400ms cubic-bezier(.2,1.2,.32,1); }
.sheet-backdrop { z-index: 60; }
.motion-sheet { z-index: 80 !important; }
[data-hold-confirm] { position: relative; width: 100%; height: auto; min-height: 50px; margin: 12px 0 0; border-radius: 13px; padding: 14px 17px; overflow: hidden; }
.hold-ring { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(#ffffff, #ffffff) left bottom / calc(var(--hold,0) * 1%) 3px no-repeat; box-shadow: inset 0 0 0 1px #ffffff55; pointer-events: none; }
.hold-label { position: relative; z-index: 1; }
.hold-done { animation: holdShake 280ms linear; }
@keyframes holdShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pull-indicator { position: fixed; z-index: 30; left: 50%; top: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: 18px; background: #20201ccc; color: var(--ink); font-size: 12px; pointer-events: none; }
.pull-arrow { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--green); position: relative; }
.pull-arrow::before { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 6px; border-right: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green); transform: rotate(45deg); }
.pull-indicator.is-ready .pull-arrow { transform: rotate(180deg); }
.pull-indicator.is-loading .pull-arrow { animation: spin .8s linear infinite; }
.motion-flash { animation: rowFlash 700ms ease; }
@keyframes rowFlash { from { box-shadow: inset 0 0 0 999px #f4dc5738; } to { box-shadow: none; } }