/* Motion Prompt #086 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#086
 * Link rhythm reference. Rechoreographed for Aarons Leather: 1px ink, 180ms, native focus.
 * #159 inline validation and #056 confirmation inform the feedback hierarchy;
 * their Canvas animations are not copied into this site.
 */
:root{--motion-feedback:160ms;--motion-panel:220ms;--motion-ease:cubic-bezier(.22,1,.36,1)}
.page-nav a,.header-nav a{position:relative;border-bottom-color:transparent!important}
.page-nav a::after,.header-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 180ms var(--motion-ease)}
.page-nav a:is(:hover,:focus-visible,[aria-current=page])::after,.header-nav a:is(:hover,:focus-visible,[aria-current=page])::after{transform:scaleX(1);transform-origin:left}
.project-field input,.project-field textarea,.project-item input{transition:border-color var(--motion-feedback),background-color var(--motion-feedback)}
.project-field input:focus,.project-field textarea:focus,.project-item input:focus{border-color:var(--ink)}
.project-fields [aria-invalid=true]{border-color:#a13a20;background:#fff5ee}
.motion-field-error{display:block;color:#943719;font-size:12px;line-height:1.5;margin-top:8px;max-width:40ch}
.motion-field-error[hidden]{display:none}
.project-message .project-status{border-left:2px solid var(--green);padding-left:12px;max-width:45ch}
.project-message .project-status:empty{border:0;padding:0}
.project-message .project-status[data-feedback=error]{border-color:#a13a20;color:#943719}
#project-copy{min-width:190px}
.motion-copy-icon{width:18px;height:18px;flex:none;opacity:.6}
.motion-copy-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.motion-copy-icon .motion-copy-check{display:none;stroke-dasharray:20;stroke-dashoffset:0}
#project-copy[data-copied=true]{color:var(--green);border-color:var(--green)}
#project-copy[data-copied=true] .motion-copy-icon{opacity:1}
#project-copy[data-copied=true] .motion-copy-sheet{display:none}
#project-copy[data-copied=true] .motion-copy-check{display:block;animation:motion-check 180ms ease-out both}
@keyframes motion-check{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.page-nav a::after,.header-nav a::after,.project-field input,.project-field textarea,.project-item input{transition:none}#project-copy[data-copied=true] .motion-copy-check{animation:none}}