/* HUGO-1975: choreography of the pinned stage. Screen animations are scoped to
   `.journey-stage … .is-on`, so the static articles (no JS, reduced motion,
   assistive tech) always show each screen in its finished state. The one
   exception is the pairing code at the end of this file, which pops in when
   its panel scrolls into view. */
.journey-stage { position: relative; display: grid; perspective: 1400px; --f: .5; }
.journey-stage::before { content: ""; position: absolute; inset: 0 -9% -4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, #ffdf2cd9, transparent); filter: blur(38px); translate: calc((var(--f) - .5) * 60px) calc((var(--f) - .5) * -40px); transition: background .6s; }
.journey-phase.is-done .journey-stage::before { background: radial-gradient(closest-side, #1ba85b55, transparent); }
.journey-stage .journey-screen { grid-area: 1 / 1; opacity: 0; visibility: hidden; translate: 0 2.2em; scale: .94; transition: opacity .35s, translate .55s cubic-bezier(.2, .8, .2, 1), scale .55s cubic-bezier(.2, .8, .2, 1), visibility 0s .55s; }
.journey-stage .journey-screen.is-before { translate: 0 -2.2em; }
.journey-stage .journey-screen.is-on { opacity: 1; visibility: visible; translate: none; scale: 1; transition-delay: 0s; }
.journey-stage .ui { transform: rotateY(calc((var(--f) - .5) * -9deg)) rotateX(calc((var(--f) - .5) * 5deg)); }
.journey-stage .confetti, .journey-stage .ptr, .journey-stage .found-sk, .journey-stage .vf-beam, .journey-stage .plane, .journey-stage .fly, .journey-stage .paper b { display: block !important; }

@keyframes j-rise { from { opacity: 0; translate: 0 .9em; } }
@keyframes j-pop { from { opacity: 0; scale: .4; } 60% { scale: 1.12; } }
@keyframes j-in { from { opacity: 0; } }
@keyframes j-out { to { opacity: 0; } }
@keyframes j-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes j-press { 40% { scale: .93; filter: brightness(.94); } }
@keyframes j-shimmer { 50% { opacity: .35; } }
@keyframes j-bob { to { translate: 0 -.35em; } }
@keyframes j-spin { to { rotate: 360deg; } }
@keyframes j-grow { from { scale: 0 1; } }

/* content of every card rises in, one piece after another */
.journey-stage .is-on :where(.wz-card, .side, .prod-info) > * { animation: j-rise .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
.journey-stage :is(.wz-card, .side, .prod-info) > :nth-child(2) { --i: 1; }
.journey-stage :is(.wz-card, .side, .prod-info) > :nth-child(3) { --i: 2; }
.journey-stage :is(.wz-card, .side, .prod-info) > :nth-child(4) { --i: 3; }
.journey-stage :is(.wz-card, .side, .prod-info) > :nth-child(5) { --i: 4; }
.journey-stage :is(.wz-card, .side, .prod-info) > :nth-child(6) { --i: 5; }
.journey-stage .is-on .wz-dots i.on { animation: j-grow .5s .2s cubic-bezier(.3, 1.4, .5, 1) both; transform-origin: left; }

/* the pointer glides to the main action and clicks it */
.ptr { position: absolute; z-index: 5; left: var(--px, 58%); top: var(--py, 80%); width: 1.1em; height: 1.1em; }
.ptr::before { content: ""; position: absolute; inset: 0; background: #14110d; clip-path: polygon(0 0, 0 82%, 24% 62%, 42% 100%, 58% 92%, 40% 56%, 72% 56%); filter: drop-shadow(0 0 1px #fff); }
.ptr::after { content: ""; position: absolute; left: -.9em; top: -.9em; width: 1.8em; height: 1.8em; border-radius: 50%; background: #14110d2e; scale: 0; }
@keyframes j-ptr { from { opacity: 0; translate: 6em 5em; } 85% { scale: 1; } 92% { scale: .82; } to { opacity: 1; translate: none; scale: 1; } }
@keyframes j-ripple { from { scale: 0; opacity: 1; } to { scale: 1.6; opacity: 0; } }
.journey-stage .is-on .wz-card > .ptr { animation: j-ptr 1.2s var(--pd, 1.7s) cubic-bezier(.3, .7, .2, 1) both; }
.journey-stage .is-on .ptr::after { animation: j-ripple .6s calc(var(--pd, 1.7s) + 1.15s) both; }
.journey-stage .is-on .tap.tap { animation: j-rise .6s calc(var(--i, 0) * 110ms + 150ms) cubic-bezier(.2, .8, .2, 1) both, j-press .4s calc(var(--pd, 1.7s) + 1.1s); }

/* success ring */
.journey-stage .is-on .ok-ring { animation: j-pop .6s .15s cubic-bezier(.3, 1.4, .5, 1) both; }
.journey-stage .is-on .ok-ring circle { --len: 145; animation: j-draw .7s .35s ease-out both; }
.journey-stage .is-on .ok-ring path { --len: 40; animation: j-draw .35s .95s ease-out both; }
.journey-stage .is-on .row-ok::before { animation: j-pop .5s calc(var(--i, 0) * 110ms + 450ms) cubic-bezier(.3, 1.4, .5, 1) both; }
.confetti { position: absolute; left: 50%; top: 34%; z-index: 4; }
.confetti i { position: absolute; width: .45em; height: .7em; border-radius: .1em; background: #ffdf2c; opacity: 0; }
.confetti i:nth-child(3n) { background: #1ba85b; }
.confetti i:nth-child(4n) { background: #14110d; width: .35em; height: .35em; border-radius: 50%; }
.confetti i:nth-child(5n) { background: #e2533b; }
@keyframes j-confetti { from { opacity: 1; translate: 0 0; rotate: 0deg; } 70% { opacity: 1; } to { opacity: 0; translate: var(--x) var(--y); rotate: var(--r); } }
.journey-stage .is-on .wz-card > .confetti { animation: none; }
.journey-stage .is-on .confetti i { animation: j-confetti 1.5s .95s cubic-bezier(.1, .7, .3, 1) both; }
.confetti i:nth-child(1) { --x: -7em; --y: -3em; --r: 300deg; }
.confetti i:nth-child(2) { --x: 7.5em; --y: -2.5em; --r: -260deg; }
.confetti i:nth-child(3) { --x: -5em; --y: 4.5em; --r: 200deg; }
.confetti i:nth-child(4) { --x: 5.5em; --y: 5em; --r: -320deg; }
.confetti i:nth-child(5) { --x: -8.5em; --y: 1.5em; --r: 420deg; }
.confetti i:nth-child(6) { --x: 8.5em; --y: 2em; --r: -180deg; }
.confetti i:nth-child(7) { --x: -2.5em; --y: -4em; --r: 240deg; }
.confetti i:nth-child(8) { --x: 3em; --y: -4.2em; --r: -300deg; }
.confetti i:nth-child(9) { --x: -6.5em; --y: 6em; --r: 380deg; }
.confetti i:nth-child(10) { --x: 6.8em; --y: 6.5em; --r: -220deg; }
.confetti i:nth-child(11) { --x: -1em; --y: 7em; --r: 160deg; }
.confetti i:nth-child(12) { --x: 1.5em; --y: 6em; --r: -400deg; }
.confetti i:nth-child(13) { --x: -9em; --y: -1em; --r: 280deg; }
.confetti i:nth-child(14) { --x: 9.5em; --y: -.5em; --r: -340deg; }

/* cash 0: e-mail, continue */
[data-s="cash0"] { --pd: 1.9s; --px: 60%; --py: 80%; }
.journey-stage .is-on .wz-ico { animation: j-pop .6s .1s cubic-bezier(.3, 1.4, .5, 1) both; }

/* cash 2: company ID → register lookup → details arrive */
[data-s="cash2"] { --pd: .9s; --px: 80%; --py: 40%; }
.found-sk { position: absolute; inset: .55em .7em; background: #f8f6f2; }
.found-sk i { height: .5em; margin-bottom: .36em; border-radius: 9em; background: #dfd9cc; }
.found-sk i:nth-child(2) { width: 78%; }
.found-sk i:nth-child(3) { width: 46%; margin: 0; }
.journey-stage .is-on .found { animation: j-rise .5s 2.2s both; }
.journey-stage .is-on .found-sk { animation: j-out .3s 3.3s both; }
.journey-stage .is-on .found-sk i { animation: j-shimmer .7s 2.2s 2; }
.journey-stage .is-on .found-data > * { animation: j-rise .45s 3.4s both; }
.journey-stage .is-on .found-data > i { animation-delay: 3.5s; }
.journey-stage .is-on[data-s="cash2"] .row-ok { animation-delay: 3.8s; }
.journey-stage .is-on[data-s="cash2"] .row-ok::before { animation-delay: 3.95s; }

/* cash 3: the venue gets its name and the card takes on its atmosphere */
@keyframes j-amb { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.journey-stage .is-on .wz-card > .amb { animation: j-amb .7s 1.5s cubic-bezier(.2, .8, .2, 1) both; }
.journey-stage .is-on .amb b { animation: j-rise .5s 1.9s both; }
.journey-stage .is-on .chip-on { animation: j-pop .5s 1.7s cubic-bezier(.3, 1.4, .5, 1) both; }

/* cash 4: the photographed menu is scanned and the items drop into the list */
@keyframes j-seg { from { translate: 0 0; } }
@keyframes j-beam { from { top: -10%; } to { top: 100%; } }
.paper b { position: absolute; left: 0; right: 0; top: -10%; height: .9em; background: linear-gradient(#0000, #ffdf2cc9); border-bottom: 2px solid #f2c800; }
.journey-stage .is-on .seg::before { animation: j-seg .5s .7s cubic-bezier(.3, 1.2, .4, 1) both; }
.journey-stage .is-on .paper { animation: j-pop .6s .9s cubic-bezier(.3, 1.4, .5, 1) both; }
.journey-stage .is-on .paper b { animation: j-beam .9s 1.3s ease-in-out 3 alternate both; }
.journey-stage .is-on .items > span { animation: j-rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: 1.9s; }
.journey-stage .is-on .items > span:nth-child(2) { animation-delay: 2.4s; }
.journey-stage .is-on .items > span:nth-child(3) { animation-delay: 2.9s; }
.journey-stage .is-on .items i { animation: j-shimmer 1s 3.2s 2; }
.journey-stage .is-on[data-s="cash4"] .btn-y { animation: j-rise .5s 3.3s both, j-press .5s 3.9s; }

/* cash 5: till ready, the app arrives */
@keyframes j-phone { from { opacity: 0; translate: 7em 3em; rotate: 22deg; } }
.journey-stage .is-on[data-s="cash5"] .phone { animation: j-phone .9s 1s cubic-bezier(.2, .9, .3, 1) both, j-bob 2.4s 1.9s ease-in-out infinite alternate; }
.journey-stage .is-on .pos-grid b { animation: j-pop .45s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: 1.6s; }
.journey-stage .is-on .pos-grid b:nth-child(2) { animation-delay: 1.72s; }
.journey-stage .is-on .pos-grid b:nth-child(3) { animation-delay: 1.84s; }
.journey-stage .is-on .pos-grid b:nth-child(4) { animation-delay: 1.96s; }
@keyframes j-glow { 50% { box-shadow: 0 0 0 .5em #ffdf2c00; } from { box-shadow: 0 0 0 0 #ffdf2cb3; } }
.journey-stage .is-on .pos-bar b { animation: j-glow 1.6s 2.3s infinite; }

/* cards 0: one answer after another */
[data-s="cards0"] { --pd: 1s; --px: 82%; --py: 74%; }
@keyframes j-opt { from { border-color: #e6e0d7; background: #fff; } }
.journey-stage .is-on .opt { animation: j-rise .6s .48s cubic-bezier(.2, .8, .2, 1) both, j-opt .3s 2.1s both; }
.journey-stage .is-on .opt b { animation: j-pop .45s 2.1s cubic-bezier(.3, 1.4, .5, 1) both; }
.journey-stage .is-on .qbar i:first-child { animation: j-grow .6s .5s both; transform-origin: left; }

/* cards 1: the ID is framed, scanned and accepted */
@keyframes j-idc { from { opacity: 0; translate: 0 2em; rotate: -14deg; scale: .8; } 70% { rotate: 3deg; } }
@property --c { syntax: '<color>'; inherits: true; initial-value: #1ba85b; }
@keyframes j-vf { from { --c: #ffdf2c; } }
.vf-beam { position: absolute; left: .45em; right: .45em; top: 12%; height: 2px; background: #ffdf2c; box-shadow: 0 0 .6em .12em #ffdf2c; opacity: 0; }
@keyframes j-sweep { from { top: 12%; opacity: 1; } to { top: 86%; opacity: 1; } }
.journey-stage .is-on .vf { animation: j-rise .6s .37s both, j-vf .25s 2.9s both; }
.journey-stage .is-on .idc { animation: j-idc .9s .7s cubic-bezier(.2, .9, .3, 1) both; }
.journey-stage .is-on .vf-beam { animation: j-sweep .65s 1.6s ease-in-out 2 alternate; }
.journey-stage .is-on .vf-ok { animation: j-pop .5s 3s cubic-bezier(.3, 1.4, .5, 1) both; }
.journey-stage .is-on[data-s="cards1"] .row-ok { animation-delay: 3.2s; }
.journey-stage .is-on[data-s="cards1"] .row-ok::before { animation-delay: 3.35s; }

/* cards 2: signed, sent, waiting for approval */
.plane { position: absolute; left: 44%; top: 8%; font-size: 1.5em; color: #315f54; }
@keyframes j-plane { from { opacity: 0; translate: -5em 4em; rotate: -18deg; } 25% { opacity: 1; } 75% { opacity: 1; } to { opacity: 0; translate: 6.5em -2.5em; rotate: 8deg; } }
.journey-stage .is-on .wz-card > .plane { animation: j-plane 1.7s 1.7s cubic-bezier(.4, 0, .3, 1) both; }
.journey-stage .is-on .sig { --len: 120; animation: j-draw 1s .9s ease-in-out both; }
.journey-stage .is-on .row-wait { animation: j-pop .6s 2.3s cubic-bezier(.3, 1.4, .5, 1) both; }
.journey-stage .is-on .clk::before { animation: j-spin 2.4s 2.3s linear infinite; }

/* cards 3: the card taps the phone */
@keyframes j-wave { from { opacity: .9; scale: .6; } to { opacity: 0; scale: 2.3; } }
@keyframes j-bank { from { opacity: 0; translate: 9em 4em; rotate: 20deg; } 45% { opacity: 1; translate: -2.6em -3.4em; rotate: -24deg; } 60% { translate: -2.6em -3.4em; rotate: -24deg; } to { translate: none; rotate: -12deg; } }
.journey-stage .is-on .nfc b { animation: j-wave 1.3s .4s 2 ease-out; }
.journey-stage .is-on .nfc b + b { animation-delay: .85s; }
.journey-stage .is-on .bank { animation: j-bank 2.4s .9s cubic-bezier(.3, .8, .3, 1) both; }
@keyframes j-paid { from { opacity: 0; clip-path: circle(0 at 50% 62%); } to { opacity: 1; clip-path: circle(140% at 50% 62%); } }
.journey-stage .is-on .pay-ok { animation: j-paid .6s 2.15s cubic-bezier(.3, .8, .3, 1) both; }
.journey-stage .is-on .pay-ok::before { animation: j-pop .5s 2.4s cubic-bezier(.3, 1.4, .5, 1) both; }
.journey-stage .is-on[data-s="cards3"] .side > * { animation-delay: calc(var(--i, 0) * 140ms + 2.4s); }
.journey-stage .is-on[data-s="cards3"] .row-ok::before { animation-delay: 2.9s; }

/* hardware 0: the terminal floats and prints, then goes into the basket */
[data-s="hw0"] { --pd: 2s; --px: 70%; --py: 78%; }
@keyframes j-print { from { height: 0; } 30% { height: 7%; } 45% { height: 7%; } 70% { height: 14%; } 82% { height: 14%; } }
.journey-stage .is-on .prod-t { animation: j-pop .7s .2s cubic-bezier(.3, 1.3, .5, 1) both, j-bob 2.6s .9s ease-in-out infinite alternate; }
.journey-stage .is-on .rcpt { animation: j-print 1.6s .9s ease-out both, j-bob 2.6s .9s ease-in-out infinite alternate; }

/* hardware 1: it lands in the basket */
.fly { position: absolute; z-index: 4; left: 8%; top: 45%; width: 3em; height: 4em; object-fit: contain; opacity: 0; }
@keyframes j-fly { from { opacity: 1; translate: 0 0; scale: 1.5; } 55% { opacity: 1; translate: 8em -6em; scale: .9; rotate: 14deg; } to { opacity: 0; translate: 13.5em -8.4em; scale: .2; rotate: 30deg; } }
.journey-stage [data-s="hw1"] .wz-card { overflow: visible; }
.journey-stage .is-on .wz-card > .fly { animation: j-fly .9s .25s cubic-bezier(.4, 0, .6, 1) both; }
.journey-stage .is-on[data-s="hw1"] .cart b { animation: j-pop .5s 1.05s cubic-bezier(.3, 1.6, .5, 1) both; }
.journey-stage .is-on[data-s="hw1"] .cart { animation: j-press .4s 1.05s; }
.journey-stage .is-on[data-s="hw1"] .wz-card > :not(.fly) { animation-delay: calc(var(--i, 0) * 110ms + 1.1s); }
.journey-stage .is-on[data-s="hw1"] .row-ok::before { animation-delay: 1.6s; }

/* hardware 3: the van drives the parcel to the venue */
@keyframes j-drive { from { scale: 0 1; } }
@keyframes j-van { from { left: 0; opacity: 1; } 90% { opacity: 1; } to { left: calc(100% - 2.4em); opacity: 0; } }
@keyframes j-arrive { from { color: #8c8275; background: #e6e0d7; box-shadow: 0 0 0 0 #ffdf2c00; scale: .9; } 60% { scale: 1.18; } }
@keyframes j-ping { from { box-shadow: 0 0 0 0 #ffdf2ca6; } to { box-shadow: 0 0 0 .8em #ffdf2c00; } }
.journey-stage .route > .route-van { display: grid; opacity: 0; }
.journey-stage .is-on .route-line i { animation: j-drive 2.3s .8s cubic-bezier(.5, 0, .3, 1) both; }
.journey-stage .is-on .route-van { animation: j-van 2.3s .8s cubic-bezier(.5, 0, .3, 1) both; }
.journey-stage .is-on .route-end { animation: j-arrive .6s 3s cubic-bezier(.3, 1.4, .5, 1) both, j-ping 1.6s 3.6s infinite; }
.journey-stage .is-on[data-s="hw3"] .row-ok { animation-delay: 3.2s; }
.journey-stage .is-on[data-s="hw3"] .row-next { animation-delay: 3.4s; }
.journey-stage .is-on[data-s="hw3"] .row-ok::before { animation-delay: 3.35s; }

/* branch panels, once they scroll into view */
.journey.is-enhanced .journey-pair b, .journey.is-enhanced .journey-pair span { opacity: 0; }
.journey.is-enhanced .is-in .journey-pair :is(b, span) { opacity: 1; animation: j-pop .45s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i, 0) * 130ms + 400ms); }
.journey-pair :nth-child(2) { --i: 1; }
.journey-pair :nth-child(3) { --i: 2; }
.journey-pair :nth-child(4) { --i: 3; }
.journey-pair :nth-child(5) { --i: 4; }
.journey-pair :nth-child(6) { --i: 5; }
.journey-pair :nth-child(7) { --i: 7; }
@keyframes j-wiggle { 25% { rotate: -8deg; } 75% { rotate: 8deg; } }
.journey.is-enhanced .is-in .journey-nudge-art i { animation: j-pop .5s .5s cubic-bezier(.3, 1.6, .5, 1) both, j-wiggle .9s 1.2s 2; }
@media (prefers-reduced-motion: reduce) { .journey.is-enhanced .journey-pair :is(b, span) { opacity: 1; } }