/* 1. The hero behaves like a slow mechanical market ribbon with a driven wheel. */
.js [data-motion="prx-ribbon"] .prx-hero-copy {
  animation: prxHeroLedgerIn .9s cubic-bezier(.2, .82, .25, 1) both paused;
}
.js [data-motion="prx-ribbon"] .prx-ribbon-track {
  animation: prxRibbonTravel 18s linear infinite alternate both paused;
}
.js [data-motion="prx-ribbon"] .prx-ribbon-wheel {
  animation: prxRibbonWheel 4.4s linear infinite both paused;
}
.js [data-motion="prx-ribbon"].is-motion-active .prx-hero-copy,
.js [data-motion="prx-ribbon"].is-motion-active .prx-ribbon-track,
.js [data-motion="prx-ribbon"].is-motion-active .prx-ribbon-wheel { animation-play-state: running; }

@keyframes prxHeroLedgerIn {
  0% { opacity: 0; transform: translate3d(-56px, 0, 0); clip-path: inset(0 100% 0 0); }
  58% { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); clip-path: inset(0 0 0 0); }
}
@keyframes prxRibbonTravel {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(var(--prx-ribbon-shift, -310px), 0, 0); }
}
@keyframes prxRibbonWheel {
  to { transform: rotate(360deg); }
}

/* 2. Every tariff arrives on its own rack; the numeric drum then clicks into place. */
.js [data-motion="prx-counter"] .prx-tariff-row {
  animation: prxCounterRack .78s cubic-bezier(.16, .83, .33, 1) both paused;
  animation-delay: calc(var(--row) * 145ms);
}
.js [data-motion="prx-counter"] .prx-counter-window > span {
  animation: prxCounterRoll 1.05s cubic-bezier(.2, .76, .27, 1.08) both paused;
  animation-delay: calc(310ms + var(--row) * 145ms);
}
.js [data-motion="prx-counter"] .prx-counter-window {
  animation: prxCounterClick .28s steps(2, end) 3 both paused;
  animation-delay: calc(610ms + var(--row) * 145ms);
}
.js [data-motion="prx-counter"].is-motion-active .prx-tariff-row,
.js [data-motion="prx-counter"].is-motion-active .prx-counter-window,
.js [data-motion="prx-counter"].is-motion-active .prx-counter-window > span { animation-play-state: running; }

@keyframes prxCounterRack {
  0% { opacity: 0; transform: translate3d(80px, 0, 0); clip-path: inset(0 0 0 100%); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); clip-path: inset(0 0 0 0); }
}
@keyframes prxCounterRoll {
  0% { transform: translateY(0); }
  68% { transform: translateY(-101px); }
  84% { transform: translateY(-42px); }
  100% { transform: translateY(-47px); }
}
@keyframes prxCounterClick {
  0%, 100% { box-shadow: inset 0 5px 13px rgba(0, 0, 0, .24); }
  50% { box-shadow: inset 0 5px 13px rgba(0, 0, 0, .24), 0 0 0 5px rgba(223, 255, 86, .2); }
}

/* 3. Three translucent calculation sheets land from separate axes and register. */
.js [data-motion="prx-layers"] .prx-tracing-sheet:nth-child(1) {
  animation: prxLayerPlaceA .95s cubic-bezier(.2, .75, .24, 1) both paused;
}
.js [data-motion="prx-layers"] .prx-tracing-sheet:nth-child(2) {
  animation: prxLayerPlaceB 1.05s cubic-bezier(.2, .75, .24, 1) .14s both paused;
}
.js [data-motion="prx-layers"] .prx-tracing-sheet:nth-child(3) {
  animation: prxLayerPlaceC 1.1s cubic-bezier(.2, .75, .24, 1) .28s both paused;
}
.js [data-motion="prx-layers"] .prx-layer-register span {
  animation: prxLayerRegister .55s cubic-bezier(.2, .8, .3, 1) both paused;
  animation-delay: calc(.8s + var(--sheet, 0) * 90ms);
}
.js [data-motion="prx-layers"] .prx-layer-register span:nth-child(2) { --sheet: 1; }
.js [data-motion="prx-layers"] .prx-layer-register span:nth-child(3) { --sheet: 2; }
.js [data-motion="prx-layers"].is-motion-active .prx-tracing-sheet,
.js [data-motion="prx-layers"].is-motion-active .prx-layer-register span { animation-play-state: running; }

@keyframes prxLayerPlaceA {
  0% { opacity: 0; transform: translate3d(-100px, -32px, 0) rotate(-6deg); }
  72% { opacity: 1; transform: translate3d(8px, 3px, 0) rotate(.6deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}
@keyframes prxLayerPlaceB {
  0% { opacity: 0; transform: translate3d(96px, -50px, 0) rotate(5deg); }
  72% { opacity: 1; transform: translate3d(-7px, 4px, 0) rotate(-.5deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}
@keyframes prxLayerPlaceC {
  0% { opacity: 0; transform: translate3d(0, 90px, 0) scale(.94); }
  72% { opacity: 1; transform: translate3d(0, -7px, 0) scale(1.01); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes prxLayerRegister {
  0% { opacity: 0; transform: scaleX(0); transform-origin: left; }
  100% { opacity: 1; transform: scaleX(1); transform-origin: left; }
}

/* 4. Ink draws the transparent route, endpoints acknowledge it, and a tracer crosses the zone. */
.js [data-motion="prx-route"] .prx-route-path {
  stroke-dasharray: 920;
  stroke-dashoffset: 920;
  animation: prxRouteDraw 2.2s cubic-bezier(.45, .02, .22, 1) both paused;
}
.js [data-motion="prx-route"] .prx-route-point-a {
  animation: prxRouteNode .6s cubic-bezier(.15, .8, .28, 1.3) .12s both paused;
}
.js [data-motion="prx-route"] .prx-route-point-b {
  animation: prxRouteNode .6s cubic-bezier(.15, .8, .28, 1.3) 1.8s both paused;
}
.js [data-motion="prx-route"] .prx-route-runner {
  offset-path: path("M 0 0 C 105 -78 215 42 335 -36");
  animation: prxRouteRunner 2.6s cubic-bezier(.4, 0, .2, 1) .18s both paused;
}
.js [data-motion="prx-route"] .prx-route-paper {
  animation: prxRoutePaperPlot .8s cubic-bezier(.2, .78, .25, 1) both paused;
}
.js [data-motion="prx-route"].is-motion-active .prx-route-path,
.js [data-motion="prx-route"].is-motion-active .prx-route-point,
.js [data-motion="prx-route"].is-motion-active .prx-route-runner,
.js [data-motion="prx-route"].is-motion-active .prx-route-paper { animation-play-state: running; }

@keyframes prxRouteDraw { to { stroke-dashoffset: 0; } }
@keyframes prxRouteNode {
  0% { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; }
  65% { opacity: 1; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes prxRouteRunner {
  0% { opacity: 0; offset-distance: 0%; transform: scale(.65); }
  12%, 88% { opacity: 1; }
  100% { opacity: 0; offset-distance: 100%; transform: scale(1); }
}
@keyframes prxRoutePaperPlot {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* 5. Four physical weights drop first; their beam oscillates and finds level. */
.js [data-motion="prx-balance"] .prx-balance li {
  animation: prxWeightDrop .75s cubic-bezier(.18, .82, .26, 1.16) both paused;
  animation-delay: calc(var(--weight) * 135ms);
}
.js [data-motion="prx-balance"] .prx-balance-beam {
  animation: prxBalanceSettle 1.55s cubic-bezier(.37, .01, .2, 1) .28s both paused;
}
.js [data-motion="prx-balance"] .prx-balance-beam i {
  animation: prxBalanceGauge 1.55s ease-in-out .28s both paused;
}
.js [data-motion="prx-balance"].is-motion-active .prx-balance li,
.js [data-motion="prx-balance"].is-motion-active .prx-balance-beam,
.js [data-motion="prx-balance"].is-motion-active .prx-balance-beam i { animation-play-state: running; }

@keyframes prxWeightDrop {
  0% { opacity: 0; transform: translateY(-62px) scaleY(.72); }
  72% { opacity: 1; transform: translateY(6px) scaleY(1.03); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes prxBalanceSettle {
  0% { transform: rotate(-8deg); }
  34% { transform: rotate(5deg); }
  58% { transform: rotate(-2.6deg); }
  78% { transform: rotate(1deg); }
  100% { transform: rotate(0); }
}
@keyframes prxBalanceGauge {
  0% { transform: translateX(-27px); }
  34% { transform: translateX(20px); }
  58% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

/* 6. The input register flips one line at a time while its switches engage and scanner passes. */
.js [data-motion="prx-register"] .prx-register-list li {
  animation: prxRegisterFlip .66s cubic-bezier(.18, .77, .25, 1) both paused;
  animation-delay: calc(var(--slot) * 105ms);
}
.js [data-motion="prx-register"] .prx-register-list li > i::before {
  animation: prxRegisterSwitch .42s cubic-bezier(.2, .8, .3, 1) both paused;
  animation-delay: calc(.35s + var(--slot) * 105ms);
}
.js [data-motion="prx-register"] .prx-register-scan {
  animation: prxRegisterScan 2.3s cubic-bezier(.5, 0, .3, 1) both paused;
}
.js [data-motion="prx-register"].is-motion-active .prx-register-list li,
.js [data-motion="prx-register"].is-motion-active .prx-register-list li > i::before,
.js [data-motion="prx-register"].is-motion-active .prx-register-scan { animation-play-state: running; }

@keyframes prxRegisterFlip {
  0% { opacity: 0; transform: perspective(700px) rotateX(-86deg); }
  68% { opacity: 1; transform: perspective(700px) rotateX(7deg); }
  100% { opacity: 1; transform: perspective(700px) rotateX(0); }
}
@keyframes prxRegisterSwitch {
  0% { transform: translateX(0); background: var(--prx-orange); }
  100% { transform: translateX(17px); background: var(--prx-lime); }
}
@keyframes prxRegisterScan {
  0% { opacity: 0; transform: translateY(-180px); }
  12%, 78% { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--prx-scan-distance, 570px)); }
}

/* 7. Audit pages turn from the binding and receive separate verification stamps. */
.js [data-motion="prx-ledger"] .prx-ledger-book li {
  animation: prxLedgerTurn .78s cubic-bezier(.18, .8, .24, 1) both paused;
  animation-delay: calc(var(--page) * 135ms);
}
.js [data-motion="prx-ledger"] .prx-ledger-book li > i {
  animation: prxLedgerStamp .45s cubic-bezier(.14, .83, .26, 1.35) both paused;
  animation-delay: calc(.45s + var(--page) * 135ms);
}
.js [data-motion="prx-ledger"] .prx-page-corner {
  animation: prxLedgerCorner 1.6s ease-in-out .35s both paused;
}
.js [data-motion="prx-ledger"].is-motion-active .prx-ledger-book li,
.js [data-motion="prx-ledger"].is-motion-active .prx-ledger-book li > i,
.js [data-motion="prx-ledger"].is-motion-active .prx-page-corner { animation-play-state: running; }

@keyframes prxLedgerTurn {
  0% { opacity: 0; transform: perspective(900px) rotateY(-78deg) translateX(-26px); }
  72% { opacity: 1; transform: perspective(900px) rotateY(5deg) translateX(2px); }
  100% { opacity: 1; transform: perspective(900px) rotateY(0) translateX(0); }
}
@keyframes prxLedgerStamp {
  0% { opacity: 0; transform: scale(2.1) rotate(-18deg); }
  68% { opacity: 1; transform: scale(.85) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes prxLedgerCorner {
  0% { transform: rotateY(0) skewY(0); opacity: .2; }
  50% { transform: rotateY(72deg) skewY(-8deg); opacity: .72; }
  100% { transform: rotateY(0) skewY(0); opacity: .2; }
}

/* 8. Caliper jaws travel independently toward the vehicle and the measured axis illuminates. */
.js [data-motion="prx-caliper"] .prx-caliper-left {
  animation: prxCaliperCloseLeft 1.35s cubic-bezier(.18, .82, .23, 1) both paused;
}
.js [data-motion="prx-caliper"] .prx-caliper-right {
  animation: prxCaliperCloseRight 1.35s cubic-bezier(.18, .82, .23, 1) both paused;
}
.js [data-motion="prx-caliper"] .prx-caliper > i {
  animation: prxCaliperMeasure .9s ease-out .62s both paused;
}
.js [data-motion="prx-caliper"] .prx-spec-ruler > div {
  animation: prxCaliperReadout .55s ease-out both paused;
  animation-delay: calc(.7s + var(--readout, 0) * 80ms);
}
.js [data-motion="prx-caliper"] .prx-spec-ruler > div:nth-child(2) { --readout: 1; }
.js [data-motion="prx-caliper"] .prx-spec-ruler > div:nth-child(3) { --readout: 2; }
.js [data-motion="prx-caliper"] .prx-spec-ruler > div:nth-child(4) { --readout: 3; }
.js [data-motion="prx-caliper"].is-motion-active .prx-caliper-left,
.js [data-motion="prx-caliper"].is-motion-active .prx-caliper-right,
.js [data-motion="prx-caliper"].is-motion-active .prx-caliper > i,
.js [data-motion="prx-caliper"].is-motion-active .prx-spec-ruler > div { animation-play-state: running; }

@keyframes prxCaliperCloseLeft {
  0% { left: 46%; opacity: 0; }
  20% { opacity: 1; }
  100% { left: 4%; opacity: 1; }
}
@keyframes prxCaliperCloseRight {
  0% { right: 46%; opacity: 0; }
  20% { opacity: 1; }
  100% { right: 4%; opacity: 1; }
}
@keyframes prxCaliperMeasure {
  0% { opacity: 0; transform: scaleX(0); }
  100% { opacity: 1; transform: scaleX(1); }
}
@keyframes prxCaliperReadout {
  0% { opacity: .25; background: rgba(223, 255, 86, .18); }
  100% { opacity: 1; background: transparent; }
}

/* 9. Opposed spool wheels pull the FAQ tape; open answers unroll vertically. */
.js [data-motion="prx-spool"] .prx-spool-wheel-a {
  animation: prxSpoolTurn 5.8s linear infinite both paused;
}
.js [data-motion="prx-spool"] .prx-spool-wheel-b {
  animation: prxSpoolTurnReverse 5.8s linear infinite both paused;
}
.js [data-motion="prx-spool"] .prx-paper-feed span {
  animation: prxPaperTeeth .75s ease-in-out infinite alternate both paused;
  animation-delay: calc(var(--tooth, 0) * 80ms);
}
.js [data-motion="prx-spool"] .prx-paper-feed span:nth-child(2) { --tooth: 1; }
.js [data-motion="prx-spool"] .prx-paper-feed span:nth-child(3) { --tooth: 2; }
.js [data-motion="prx-spool"] .prx-paper-feed span:nth-child(4) { --tooth: 3; }
.js [data-motion="prx-spool"] .prx-paper-feed span:nth-child(5) { --tooth: 4; }
.js [data-motion="prx-spool"] .prx-paper-feed span:nth-child(6) { --tooth: 5; }
.js [data-motion="prx-spool"].is-motion-active .prx-spool-wheel,
.js [data-motion="prx-spool"].is-motion-active .prx-paper-feed span { animation-play-state: running; }
.prx-faq-list details[open] p { animation: prxFaqUnroll .42s cubic-bezier(.2, .75, .3, 1) both; }

@keyframes prxSpoolTurn { to { transform: rotate(360deg); } }
@keyframes prxSpoolTurnReverse { to { transform: rotate(-360deg); } }
@keyframes prxPaperTeeth {
  0% { transform: translateY(0); }
  100% { transform: translateY(9px); }
}
@keyframes prxFaqUnroll {
  0% { opacity: 0; transform: scaleY(.72); transform-origin: top; }
  100% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* 10. The final receipt feeds from the terminal, followed by barcode ticks and a signal lamp. */
.js [data-motion="prx-receipt"] .prx-final-receipt {
  animation: prxReceiptFeed 1.15s cubic-bezier(.16, .82, .24, 1) both paused;
}
.js [data-motion="prx-receipt"] .prx-receipt-bars span {
  animation: prxReceiptBars .5s steps(3, end) both paused;
  animation-delay: calc(.72s + var(--bar, 0) * 42ms);
}
.js [data-motion="prx-receipt"] .prx-receipt-bars span:nth-child(2) { --bar: 1; }
.js [data-motion="prx-receipt"] .prx-receipt-bars span:nth-child(3) { --bar: 2; }
.js [data-motion="prx-receipt"] .prx-receipt-bars span:nth-child(4) { --bar: 3; }
.js [data-motion="prx-receipt"] .prx-receipt-bars span:nth-child(5) { --bar: 4; }
.js [data-motion="prx-receipt"] .prx-receipt-bars span:nth-child(6) { --bar: 5; }
.js [data-motion="prx-receipt"] .prx-receipt-bars span:nth-child(7) { --bar: 6; }
.js [data-motion="prx-receipt"] .prx-receipt-bars span:nth-child(8) { --bar: 7; }
.js [data-motion="prx-receipt"] .prx-receipt-bars span:nth-child(9) { --bar: 8; }
.js [data-motion="prx-receipt"] .prx-receipt-bars span:nth-child(10) { --bar: 9; }
.js [data-motion="prx-receipt"] .prx-receipt-bars span:nth-child(11) { --bar: 10; }
.js [data-motion="prx-receipt"] .prx-terminal-light {
  animation: prxTerminalSignal 1.8s ease-out .7s infinite both paused;
}
.js [data-motion="prx-receipt"].is-motion-active .prx-final-receipt,
.js [data-motion="prx-receipt"].is-motion-active .prx-receipt-bars span,
.js [data-motion="prx-receipt"].is-motion-active .prx-terminal-light { animation-play-state: running; }

@keyframes prxReceiptFeed {
  0% { opacity: 0; transform: translateY(-110px) scaleY(.65); transform-origin: top; }
  64% { opacity: 1; transform: translateY(10px) scaleY(1.02); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes prxReceiptBars {
  0% { opacity: 0; transform: scaleY(.15); transform-origin: bottom; }
  100% { opacity: 1; transform: scaleY(1); transform-origin: bottom; }
}
@keyframes prxTerminalSignal {
  0% { box-shadow: 0 0 0 0 rgba(223, 255, 86, .42); }
  70%, 100% { box-shadow: 0 0 0 22px rgba(223, 255, 86, 0); }
}

@media (max-width: 840px) {
  .prx-ribbon-track { --prx-ribbon-shift: -210px; }
  .prx-register-scan { --prx-scan-distance: 510px; }
}

@media (max-width: 560px) {
  .js [data-motion="prx-route"] .prx-route-runner { display: none; }
  .prx-ribbon-track { --prx-ribbon-shift: -150px; }
}

@media (prefers-reduced-motion: reduce) {
  .price-page { scroll-behavior: auto; }
  .price-page [data-motion] *,
  .price-page [data-motion] *::before,
  .price-page [data-motion] *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .price-page .prx-counter-window > span { transform: translateY(-47px); }
}