/* Two quiet product vignettes. Every state remains readable without motion. */
.journey-visual {
  position:relative;
  display:grid;
  align-items:center;
  width:100%;
  height:230px;
  min-width:0;
  color:var(--journey-ink);
  font-family:"DM Sans",sans-serif;
  isolation:isolate;
}
:root:root .journey-visual {
  --journey-paper:#fff;
  --journey-paper-note:#f8f8ff;
  --journey-ink:var(--lt-ink,#20283b);
  --journey-muted:var(--lt-muted,#657187);
  --journey-line:#dfe5f0;
  --journey-accent:var(--lt-accent,#555ae8);
  --journey-success:var(--lt-success,#29745b);
  --journey-shadow:0 2px 3px #26385703,0 10px 22px #26385706;
}
/* Three compact sources share one paper; their pulses and brand changes take turns. */
.journey-emission {
  --emission-duration:9.6s;
  --invoice-duration:3.2s;
  display:grid;
  grid-template-columns:116px minmax(32px,1fr) 164px;
  align-items:center;
  width:100%;
  max-width:380px;
  margin-inline:auto;
}
.journey-emission__sources { display:grid; gap:16px; }
.journey-emission__source { display:flex; align-items:center; gap:10px; min-width:0; height:40px; }
.journey-emission__logo { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; }
.journey-emission__logo img { display:block; width:28px; height:28px; border-radius:7px; box-shadow:0 2px 4px #00000008; }
.journey-emission__platform { display:block; min-width:0; color:var(--journey-ink); font-size:11px; font-weight:500; line-height:1.35; overflow-wrap:anywhere; }
.journey-emission__routes { display:block; width:100%; height:152px; padding-inline:8px 10px; overflow:visible; }
.journey-emission__track { stroke:var(--journey-line); stroke-width:1; }
/* A single dash travels forward, from before the path to beyond its end.
   The gap exceeds the pathLength=100 so another dash can never wrap into view. */
.journey-emission__pulse { stroke:var(--journey-accent); stroke-width:1.3; stroke-linecap:round; stroke-dasharray:12 200; stroke-dashoffset:14; opacity:0; }
.journey-invoice { position:relative; min-width:0; padding:20px 18px 17px; background:var(--journey-paper); border:1px solid var(--journey-line); border-radius:10px; box-shadow:0 3px 5px #14233d03,0 14px 28px #14233d06; }
.journey-invoice__brand { display:flex; align-items:center; gap:9px; color:var(--journey-muted); font-size:11px; line-height:1.3; white-space:nowrap; }
.journey-invoice__brand img { display:block; width:20px; height:24px; object-fit:contain; }
.journey-invoice__lines { display:grid; gap:8px; margin:21px 0; }
.journey-invoice__lines i { display:block; height:3px; width:100%; border-radius:2px; background:var(--journey-line); transform-origin:left; }
.journey-invoice__lines i:nth-child(2) { width:78%; }
.journey-invoice__lines i:nth-child(3) { width:52%; }
.journey-invoice__status { display:grid; padding-top:12px; border-top:1px solid var(--journey-line); font-size:11px; line-height:1.4; white-space:nowrap; }
.journey-invoice__state { grid-area:1 / 1; display:flex; align-items:center; gap:7px; min-height:16px; }
.journey-invoice__state--loading { color:var(--journey-muted); opacity:0; visibility:hidden; }
.journey-invoice__state--complete { color:var(--journey-success); }
.journey-invoice__status-icon { display:grid; place-items:center; flex:0 0 16px; width:16px; height:16px; }
.journey-invoice__spinner { display:block; width:12px; height:12px; border:1.5px solid color-mix(in srgb,var(--journey-muted) 20%,transparent); border-top-color:var(--journey-muted); border-radius:50%; }
.journey-invoice__state--complete path { stroke-dasharray:14; stroke-dashoffset:0; }
.journey-invoice__status svg { display:block; width:16px; height:16px; }
.journey-visual--sales.is-ready .journey-emission__source { animation:journey-platform-cycle var(--emission-duration) ease-in-out var(--emission-phase) infinite; }
.journey-visual--sales.is-ready .journey-emission__pulse { animation:journey-emission-send var(--emission-duration) ease-in-out var(--emission-phase) infinite; }
.journey-visual--sales.is-ready .journey-invoice__lines i { animation:journey-invoice-write var(--invoice-duration) ease-in-out infinite; }
.journey-visual--sales.is-ready .journey-invoice__state--loading { animation:journey-invoice-loading var(--invoice-duration) steps(1,end) infinite; }
.journey-visual--sales.is-ready .journey-invoice__state--complete { animation:journey-invoice-complete var(--invoice-duration) steps(1,end) infinite; }
.journey-visual--sales.is-ready .journey-invoice__spinner { animation:journey-invoice-spin .8s linear infinite; }
.journey-visual--sales.is-ready .journey-invoice__state--complete path { animation:journey-invoice-check-draw var(--invoice-duration) ease-out infinite; }
.journey-notasy-icon { display:grid; width:27px; height:27px; flex:0 0 27px; place-items:center; border-radius:6px; background:linear-gradient(135deg,#6c6de9,#4d4bc0); box-shadow:inset 0 1px 0 #ffffff26; }
.journey-notasy-icon img { display:block; width:16px; height:19px; object-fit:contain; }
.journey-closing { position:relative; width:100%; max-width:352px; margin-inline:auto; padding:13px 6px; }
.journey-closing::before,
.journey-closing::after { content:""; position:absolute; inset:7px 15px 19px; background:var(--journey-paper); border:1px solid var(--journey-line); border-radius:12px; z-index:-1; }
.journey-closing::before { inset:1px 23px 25px; opacity:.6; }
.journey-report { position:relative; padding:19px; background:var(--journey-paper); border:1px solid var(--journey-line); border-radius:12px; box-shadow:var(--journey-shadow); }
.journey-report__head { display:flex; align-items:center; gap:10px; }
.journey-report__head > div,
.journey-delivery > div { display:grid; min-width:0; gap:5px; }
.journey-report__head strong,
.journey-delivery strong { color:var(--journey-ink); font-size:12px; font-weight:500; line-height:1.25; }
.journey-report__head div > span,
.journey-delivery div > span { color:var(--journey-muted); font-size:10px; font-weight:400; line-height:1.3; }
.journey-report__formats { display:flex; align-self:flex-start; gap:4px; margin-left:auto; padding-top:2px; }
.journey-report__formats i { padding:3px 4px; border:1px solid var(--journey-line); border-radius:3px; color:var(--journey-muted); font-size:9px; font-weight:500; font-style:normal; line-height:1; letter-spacing:.3px; }
.journey-report__route { position:relative; height:1px; margin:20px 0 16px; background:var(--journey-line); overflow:hidden; }
.journey-report__route > span { position:absolute; inset:0 auto 0 0; width:50px; background:linear-gradient(90deg,transparent,var(--journey-accent),transparent); opacity:0; animation:journey-closing-send 8s ease-in-out infinite; }
.journey-delivery { display:flex; align-items:center; gap:10px; }
.journey-delivery__mail { display:grid; place-items:center; width:27px; height:27px; flex:0 0 27px; color:var(--journey-muted); }
.journey-delivery__mail svg { width:23px; height:23px; }
.journey-delivery__check { display:grid; place-items:center; width:21px; height:21px; margin-left:auto; border:1px solid color-mix(in srgb,var(--journey-success) 22%,transparent); border-radius:50%; color:var(--journey-success); background:color-mix(in srgb,var(--journey-success) 8%,transparent); animation:journey-delivery-confirm 8s ease-in-out infinite; }
.journey-delivery__check svg { display:block; width:15px; height:15px; }
.journey-visual:not(.is-active) :is(.journey-emission__source,.journey-emission__pulse,.journey-invoice__lines i,.journey-invoice__state,.journey-invoice__spinner,.journey-invoice__state--complete path,.journey-report__route > span,.journey-delivery__check) { animation-play-state:paused; }
.journey-visual.is-active :is(.journey-emission__source,.journey-emission__pulse,.journey-invoice__lines i,.journey-invoice__state,.journey-invoice__spinner,.journey-invoice__state--complete path,.journey-report__route > span,.journey-delivery__check) { animation-play-state:running; }
@keyframes journey-platform-cycle {
  0% { opacity:0; transform:translateY(4px); }
  5%,
95% { opacity:1; transform:translateY(0); }
  100% { opacity:0; transform:translateY(-4px); }
}
@keyframes journey-emission-send {
  0%,
5% { opacity:0; stroke-dashoffset:14; }
  8% { opacity:.85; stroke-dashoffset:14; }
  19% { opacity:.85; stroke-dashoffset:-112; }
  22%,
100% { opacity:0; stroke-dashoffset:-112; }
}
@keyframes journey-invoice-write {
  0%,
30% { transform:scaleX(.72); opacity:.45; }
  49%,
90% { transform:scaleX(1); opacity:1; }
  100% { transform:scaleX(.72); opacity:.45; }
}
/* Each route finishes at 1.824s; show success at 2s of the 3.2s invoice cycle. */
@keyframes journey-invoice-loading {
  0% { opacity:1; visibility:visible; }
  62.5%,
100% { opacity:0; visibility:hidden; }
}
@keyframes journey-invoice-complete {
  0% { opacity:0; visibility:hidden; }
  62.5%,
100% { opacity:1; visibility:visible; }
}
@keyframes journey-invoice-spin { to { transform:rotate(360deg); } }
@keyframes journey-invoice-check-draw {
  0%,
62.5% { stroke-dashoffset:14; }
  76%,
100% { stroke-dashoffset:0; }
}
@keyframes journey-closing-send {
  0%,
18% { opacity:0; transform:translateX(-100%); }
  23% { opacity:.9; transform:translateX(-100%); }
  49% { opacity:.9; transform:translateX(600%); }
  53%,
100% { opacity:0; transform:translateX(600%); }
}
@keyframes journey-delivery-confirm {
  0%,
43%,
100% { opacity:.65; transform:scale(1); }
  53% { opacity:1; transform:scale(1.07); }
  62%,
85% { opacity:1; transform:scale(1); }
}
@media(max-width:1000px) {
  .journey-visual { height:220px; }
  .journey-emission { grid-template-columns:94px minmax(20px,1fr) 132px; max-width:340px; }
  .journey-emission__source { gap:7px; }
  .journey-emission__platform { font-size:10px; }
  .journey-emission__routes { padding-inline:4px 7px; }
  .journey-invoice { padding:18px 12px 15px; }
  .journey-notasy-icon { width:24px; height:24px; flex-basis:24px; }
  .journey-report { padding:16px; }
  .journey-report__formats { flex-direction:column; gap:3px; }
}