/* The order form's motion: the form answers the person filling it in.
   Everything here sits under html.om, which assets/js/order-motion.js sets; without that script, or with
   "reduce motion" on, the form is exactly the one in style.css. State (done / active) is shown either way,
   motion only where the visitor has not asked for less. */

/* progress rail: four stops under the heading, filled as the steps are completed */
.order-rail { position: sticky; top: 74px; z-index: 20; margin: 0 0 34px; padding: 12px 0 10px;
  background: linear-gradient(var(--black) 70%, rgba(10,10,10,0)); }
.order-rail ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.order-rail li { font: 600 .72rem/1 var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase; color: #777;
  transition: color .3s ease; }
.order-rail li::before { content: ""; display: block; height: 3px; margin-bottom: 9px; border-radius: 2px;
  background: var(--black-mid); box-shadow: inset 0 0 0 0 var(--yellow); transition: background .45s ease; }
.order-rail li.is-done { color: var(--yellow); }
.order-rail li.is-done::before { background: var(--yellow); }
.order-rail li.is-active { color: var(--white); }
.order-rail li.is-active::before { background: linear-gradient(90deg, rgba(255,215,0,.55), var(--black-mid)); }
@media (max-width: 560px) { .order-rail li span { display: none; } .order-rail { top: 64px; } }

/* a step that is complete says so: its tag turns into a check, its frame warms */
.order-step { transition: border-color .4s ease, box-shadow .4s ease; }
.order-step.is-active { border-color: rgba(255,215,0,.32); box-shadow: 0 0 0 1px rgba(255,215,0,.06), 0 18px 50px -30px rgba(255,215,0,.35); }
.order-step.is-done { border-color: rgba(255,215,0,.22); }
.order-step-num { transition: background .3s ease, color .3s ease, padding .3s ease; }
.order-step.is-done .order-step-num { background: var(--black); color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }
.order-step.is-done .order-step-num::after { content: "  ✓"; }

/* steps arrive one after another as they are scrolled to */
html.om .order-step { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1), border-color .4s ease, box-shadow .4s ease; }
html.om .order-step.in { opacity: 1; transform: none; }

/* choosing a card: it lifts, a check pops in, the icon turns */
.radio-card { transition: border-color .25s ease, background .25s ease, transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease; }
.radio-card:hover { transform: translateY(-2px); }
.radio-card::after { content: "\f00c"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: 10px; right: 12px;
  width: 22px; height: 22px; display: grid; place-items: center; font-size: .7rem; border-radius: 50%;
  background: var(--yellow); color: var(--black); transform: scale(0); opacity: 0; }
.radio-card.selected { box-shadow: 0 10px 30px -18px rgba(255,215,0,.55); }
.radio-card.selected::after { transform: scale(1); opacity: 1; }
html.om .radio-card.selected::after { animation: om-pop .42s cubic-bezier(.2,1.6,.4,1) both; }
html.om .radio-card.selected .rc-icon { animation: om-turn .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes om-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes om-turn { 0% { transform: rotate(-14deg) scale(.8); } 60% { transform: rotate(6deg) scale(1.12); } 100% { transform: none; } }

/* fields: the label warms and the line under it draws in while a field has the focus */
.form-group { position: relative; }
.form-group label { transition: color .25s ease; }
.form-group:focus-within label { color: var(--yellow); }
.form-group input, .form-group textarea { transition: border-color .25s ease, box-shadow .3s ease, background .25s ease; }
.form-group:focus-within input, .form-group:focus-within textarea { box-shadow: 0 0 0 3px rgba(255,215,0,.12); }
.form-group.is-valid input { border-color: rgba(255,215,0,.45); }
.form-group.is-valid::after { content: "✓"; position: absolute; right: 14px; bottom: 11px; color: var(--yellow); font-weight: 700; pointer-events: none; }
html.om .form-group.is-valid::after { animation: om-pop .35s cubic-bezier(.2,1.6,.4,1) both; }

/* sending: the button breathes; sent: the form settles back and the message draws its check */
html.om .order-form-sending button[type="submit"] { background-size: 200% 100%; animation: om-shimmer 1.1s linear infinite;
  background-image: linear-gradient(110deg, var(--yellow) 30%, #fff2a8 50%, var(--yellow) 70%); }
@keyframes om-shimmer { to { background-position: -200% 0; } }
html.om .form-success.show { animation: om-rise .55s cubic-bezier(.2,.7,.3,1) both; }
@keyframes om-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.form-success .om-check { display: inline-block; width: 26px; height: 26px; margin-right: 8px; vertical-align: -6px; }
.form-success .om-check path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 0; }
html.om .form-success.show .om-check path { stroke-dashoffset: 30; animation: om-draw .6s .25s ease forwards; }
@keyframes om-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  html.om .order-step { opacity: 1; transform: none; transition: none; }
  .radio-card, .radio-card:hover { transform: none; transition: none; }
  html.om .radio-card.selected::after, html.om .radio-card.selected .rc-icon, html.om .form-group.is-valid::after,
  html.om .form-success.show, html.om .form-success.show .om-check path, html.om .order-form-sending button[type="submit"] { animation: none; }
  .order-rail li, .order-rail li::before { transition: none; }
}