/* Caminho.DEV — the step-by-step animation on every process rail (.mp-rail) and steps
   list (.mp-steps), driven by assets/js/rail-demo.js. Applies only to lists the script
   has marked (.mp-anim), so without it every list is the static design in pages.css.

   Each <li> carries --i (its position). Step i starts at i × --mp-rail-step: the item
   rises in, its number pops, then the line or arrow it owns draws across. The connectors
   differ by page (a hairline in the head, or ::before line + ::after arrowhead on the
   item, on either side) — drawing them with clip-path and a fade covers all of them. */

.mp-anim { --mp-rail-step: .32s; }
.mp-anim.is-calm { --mp-rail-step: .22s; }

/* Hidden until the list is on screen. */
.mp-anim:not(.is-on) > li { opacity: 0; }
.mp-anim:not(.is-on):not(.is-calm) > li { transform: translateY(12px); }
.mp-anim:not(.is-on):not(.is-calm) :is(.mp-rail-n, .mp-step-n, .mp-step .mp-ico) { transform: scale(.3); opacity: 0; }
.mp-anim:not(.is-on):not(.is-calm) > li::before, .mp-anim:not(.is-on):not(.is-calm) .mp-rail-head::after { clip-path: inset(0 100% 0 0); }
.mp-anim:not(.is-on):not(.is-calm) > li::after { opacity: 0; }

/* Played (dropped again once done, so the pulse below never re-triggers the intro). */
.mp-anim.is-on:not(.is-done) > li { animation: mpRailIn .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * var(--mp-rail-step)); }
.mp-anim.is-on:not(.is-done):not(.is-calm) :is(.mp-rail-n, .mp-step-n, .mp-step .mp-ico) {
  animation: mpRailPop .5s cubic-bezier(.3, 1.7, .5, 1) both; animation-delay: calc(var(--i, 0) * var(--mp-rail-step) + .08s); }
.mp-anim.is-on:not(.is-done):not(.is-calm) > li::before, .mp-anim.is-on:not(.is-done):not(.is-calm) .mp-rail-head::after {
  animation: mpRailDraw .5s ease-out both; animation-delay: calc(var(--i, 0) * var(--mp-rail-step) + .22s); }
.mp-anim.is-on:not(.is-done):not(.is-calm) > li::after { animation: mpRailFade .3s ease-out both; animation-delay: calc(var(--i, 0) * var(--mp-rail-step) + .55s); }

@keyframes mpRailIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mpRailPop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes mpRailDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mpRailFade { from { opacity: 0; } to { opacity: 1; } }

/* Afterwards: a soft ring pulses out from one number at a time, walking the steps. */
.mp-anim.is-done:not(.is-calm) .is-cur :is(.mp-rail-n, .mp-step-n) { animation: mpRailHalo 1.8s ease-out; }
@keyframes mpRailHalo {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); transform: scale(1); }
  20% { transform: scale(1.12); }
  45% { transform: scale(1); }
  100% { box-shadow: 0 0 0 14px rgba(37, 99, 235, 0); }
}

/* Reduced motion: steps fade in, in order — no rising, popping, drawing or pulse. */
.mp-anim.is-calm.is-on:not(.is-done) > li { animation-name: mpRailFade; animation-duration: .5s; }

@media print { .mp-anim > li, .mp-anim > li::after, .mp-anim :is(.mp-rail-n, .mp-step-n, .mp-step .mp-ico) { opacity: 1 !important; transform: none !important; } }

/* ── The process rail (.mp-flow-rail, mp_process()) ──────────────────────────────────────
   The /development design: an icon in a circle for each step, a dashed track joining
   them that fills with the brand gradient, then each step lit in turn. The track runs
   from the centre of the first column to the centre of the last (--n = step count).
   Hidden/animated states apply only once rail-demo.js has marked the rail .mp-anim. */
.mp-flow-rail { --n: 5; position: relative; margin: 8px 0 0; }
.mp-flow-rail-list { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px;
  list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.mp-flow-rail-track { position: absolute; top: 27px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 2px;
  background: repeating-linear-gradient(90deg, rgba(190, 200, 236, .9) 0 6px, transparent 6px 12px); }
.mp-flow-rail-fill { position: absolute; inset: 0; border-radius: 2px; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--mp-accent, #2563eb), var(--mp-accent-2, #5b3df2));
  transition: transform 2.4s cubic-bezier(.6, .1, .2, 1) .3s; }
.mp-flow-rail-step { text-align: center; position: relative; }
.mp-flow-rail-n { position: relative; width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px; background: #fff;
  border: 1px solid var(--mp-line, #dbe1f2); display: grid; place-items: center; box-shadow: 0 10px 24px rgba(30, 45, 110, .08);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background .4s, box-shadow .4s; }
.mp-flow-rail-n svg { width: 22px; height: 22px; color: var(--mp-accent, #2563eb); transition: color .4s; }
.mp-flow-rail-n::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--mp-accent, #2563eb);
  opacity: 0; transform: scale(.8); pointer-events: none; }
.mp-flow-rail-step:hover .mp-flow-rail-n { transform: translateY(-4px) scale(1.08); }
.mp-flow-rail-step.on .mp-flow-rail-n { background: var(--mp-accent, #2563eb); transform: scale(1.12); box-shadow: 0 14px 30px rgba(37, 99, 235, .35); }
.mp-flow-rail-step.on .mp-flow-rail-n svg { color: #fff; }
.mp-flow-rail-step.on .mp-flow-rail-n::after { animation: mpFlowRailRing 1.6s ease-out infinite; }
@keyframes mpFlowRailRing { 0% { opacity: .7; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.5); } }
.mp-flow-rail-step h3 { font-size: .92rem; font-weight: 600; color: var(--mp-ink, #0f1a3d); margin: 0 0 6px; line-height: 1.3; }
.mp-flow-rail-step p { font-size: .8rem; color: var(--mp-muted, #697291); line-height: 1.55; margin: 0 auto; max-width: 24ch; }

/* Scroll-in: the track fills while the steps pop in one after another. */
.mp-flow-rail.mp-anim:not(.is-on) .mp-flow-rail-fill { transform: scaleX(0); }
.mp-flow-rail.mp-anim .mp-flow-rail-step { transition: opacity .8s cubic-bezier(.34, 1.56, .64, 1), transform .8s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: calc(var(--i, 0) * 180ms + 90ms); }
.mp-flow-rail.mp-anim:not(.is-on) .mp-flow-rail-step { opacity: 0; transform: scale(.6) translateY(20px); }

/* Many steps (How we work's eight): two rows on narrower desktops, no track. */
@media (max-width: 1080px) {
  .mp-flow-rail--many .mp-flow-rail-list { grid-template-columns: repeat(var(--half), minmax(0, 1fr)); gap: 30px 12px; }
  .mp-flow-rail--many .mp-flow-rail-track { display: none; }
}
/* Phones and tablets: one column, the track runs down the left beside the icons. */
@media (max-width: 760px) {
  .mp-flow-rail-list, .mp-flow-rail--many .mp-flow-rail-list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .mp-flow-rail-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; text-align: left; align-items: start; }
  .mp-flow-rail-n { grid-row: 1 / span 2; margin: 0; }
  .mp-flow-rail-step h3 { margin-top: 8px; }
  .mp-flow-rail-step p { margin: 0; max-width: none; }
  .mp-flow-rail-track, .mp-flow-rail--many .mp-flow-rail-track { display: block; top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, rgba(190, 200, 236, .9) 0 6px, transparent 6px 12px); }
  .mp-flow-rail-fill { transform-origin: 50% 0; background: linear-gradient(180deg, var(--mp-accent, #2563eb), var(--mp-accent-2, #5b3df2)); }
  .mp-flow-rail.mp-anim:not(.is-on) .mp-flow-rail-fill { transform: scaleY(0); }
  .mp-flow-rail.mp-anim:not(.is-on) .mp-flow-rail-step { transform: translateY(16px); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-flow-rail-fill, .mp-flow-rail-step, .mp-flow-rail-n { transition: none !important; }
  .mp-flow-rail-step.on .mp-flow-rail-n::after { animation: none; }
}
@media print { .mp-flow-rail .mp-flow-rail-step { opacity: 1 !important; transform: none !important; } .mp-flow-rail-fill { transform: none !important; } }