/* Motion references, rechoreographed for the approved Aarons Leather layouts:
   Motion Prompt #145 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#145
   Motion Prompt #002 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#002
   No text is hidden, and the line describes reading position, never order status. */

.ps-reading-guide{display:flex;align-items:center;gap:24px;margin:0 0 22px}
.ps-reading-guide>p{flex:none;margin:0;font-size:13px;line-height:1.5;color:#716656}
.ps-reading-track{display:block;position:relative;flex:1;height:2px;overflow:hidden;background:#d8cdbf}
.ps-reading-track>span{display:block;width:100%;height:100%;background:#b74a0d;transform:scaleX(var(--ps-reading-progress,0));transform-origin:left center}
.ps-order-sequence[data-ps-order-sequence]>li{position:relative}
.ps-order-sequence[data-ps-order-sequence]>li::before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:#b74a0d;transform:scaleX(var(--ps-step-progress,0));transform-origin:left center}

/* The one-time swatch fan ends at the existing composition. Hover answers intent;
   it never continuously floats or changes a concept image into a material proof. */
@media(prefers-reduced-motion:no-preference){
  .ps-sample-kind .ps-sample-visual{transition:translate 220ms cubic-bezier(.16,1,.3,1)}
  .ps-material-visual>.ps-swatch{transition:transform 240ms cubic-bezier(.16,1,.3,1)}
  .ps-sample-kind:focus-within .ps-sample-visual{translate:0 -5px}
  .ps-sample-kind:focus-within .ps-material-visual>.ps-swatch-sand{transform:rotate(-15deg)}
  .ps-sample-kind:focus-within .ps-material-visual>.ps-swatch-green{transform:rotate(15deg)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .ps-sample-kind:hover .ps-sample-visual{translate:0 -5px}
  .ps-sample-kind:hover .ps-material-visual>.ps-swatch-sand{transform:rotate(-15deg)}
  .ps-sample-kind:hover .ps-material-visual>.ps-swatch-green{transform:rotate(15deg)}
}
@media(max-width:760px){
  .ps-reading-guide{gap:18px;margin-bottom:16px}
  .ps-reading-guide>p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .ps-reading-track>span,.ps-order-sequence[data-ps-order-sequence]>li::before{transform:scaleX(0)}
  .ps-sample-kind .ps-sample-visual{translate:none;transition:none}
}