/* ==========================================================
   Journey icons — line art on the dark band (js/jicons.js)
   ========================================================== */
.jcard__fig--svg{display:block}
.jcard__fig--svg .ji{position:absolute;left:6%;top:7%;width:88%;height:86%;overflow:visible}
.ji .ln{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ji .ln.thin{stroke-width:1.1}
.ji .ln.dim{stroke:rgba(255,255,255,.3)}
.ji .ln.solid{fill:var(--ink)}
.ji .j-ch{font:800 6.4px var(--f-lat);fill:#fff;letter-spacing:.06em}
.ji .j-bang{font:800 13px var(--f-lat);fill:#fff;text-anchor:middle}
.ji .j-lab{font:700 9px var(--f-jp);text-anchor:middle;letter-spacing:.14em;fill:#fff;opacity:.45}

/* 01 — light comes on, a glint crosses the glass, the eye is caught */
.j1-cone{animation:j1cone 5s ease-in-out infinite}
@keyframes j1cone{0%{opacity:.2}18%,80%{opacity:1}100%{opacity:.2}}
.j1-glint{opacity:.35;transform-box:view-box;animation:j1glint 5s var(--ease-io) infinite}
@keyframes j1glint{0%,32%{transform:translateX(0) skewX(-20deg)}56%,100%{transform:translateX(96px) skewX(-20deg)}}
.j1-spark{transform-box:fill-box;transform-origin:0% 100%;animation:j1spark 5s var(--ease) infinite}
@keyframes j1spark{0%,48%{opacity:0;transform:scale(.5)}56%{opacity:1;transform:scale(1.12)}64%,84%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}

/* 02 — remote → signal → painting wipes to TV → "!" */
.j2-arcs path{opacity:0;animation:j2arc 7s linear infinite}
.j2-arcs path:nth-child(2){animation-delay:.12s}.j2-arcs path:nth-child(3){animation-delay:.24s}
@keyframes j2arc{0%,14%{opacity:0}17%{opacity:1}21%{opacity:0}24%{opacity:1}28%,100%{opacity:0}}
.j2-tv{clip-path:inset(0 100% 0 0);animation:j2tv 7s var(--ease-io) infinite}
@keyframes j2tv{0%,30%{clip-path:inset(0 100% 0 0)}40%,74%{clip-path:inset(0 0 0 0)}86%,100%{clip-path:inset(0 0 0 100%)}}
.j2-wipe{stroke:#fff;stroke-width:2;opacity:0;transform-box:view-box;animation:j2wipe 7s var(--ease-io) infinite}
@keyframes j2wipe{0%,30%{opacity:0;transform:translateX(0)}31%{opacity:1;transform:translateX(0)}40%{opacity:1;transform:translateX(92px)}41%,74%{opacity:0;transform:translateX(0)}75%{opacity:1;transform:translateX(0)}86%{opacity:1;transform:translateX(92px)}87%,100%{opacity:0;transform:translateX(92px)}}
.j2-led{fill:#5a5a5a;animation:j2led 7s linear infinite}
@keyframes j2led{0%,36%{fill:#5a5a5a}40%,76%{fill:#ff6a4a}82%,100%{fill:#5a5a5a}}
.j2-bang{transform-box:fill-box;transform-origin:50% 50%;transform:scale(0);animation:j2bang 7s var(--ease) infinite}
@keyframes j2bang{0%,38%{transform:scale(0)}44%{transform:scale(1.2)}49%,72%{transform:scale(1)}78%,100%{transform:scale(0)}}

/* 03 — the pick moves, taps, the screen follows */
.j3-a{opacity:0;animation:j3show 8s ease-in-out infinite}
.j3-a2{animation-delay:2s}.j3-a3{animation-delay:4s}.j3-a4{animation-delay:6s}
@keyframes j3show{0%{opacity:0}3%,25%{opacity:1}28%,100%{opacity:0}}
.j3-pick{transform-box:view-box;animation:j3pick 8s var(--ease) infinite}
@keyframes j3pick{0%,21%{transform:translateX(0)}25%,46%{transform:translateX(42px)}50%,71%{transform:translateX(84px)}75%,96%{transform:translateX(126px)}100%{transform:translateX(0)}}
.j3-rip{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:j3rip 2s ease-out infinite}
@keyframes j3rip{0%{opacity:0;transform:scale(.1)}6%{opacity:.85}40%,100%{opacity:0;transform:scale(1)}}
.j3-hand{transform-box:fill-box;transform-origin:0% 0%;animation:j3hand 2s var(--ease) infinite}
@keyframes j3hand{0%,100%{transform:none}5%{transform:translate(-1px,-1.5px) scale(.88)}14%{transform:none}}

/* 04 — vote (card drops in), diagnose (a dot takes a branch), photo (shutter) */
.j4-card{transform-box:view-box;opacity:0;animation:j4card 6s var(--ease-io) infinite}
@keyframes j4card{0%{opacity:0;transform:translateY(-10px)}4%,10%{opacity:1;transform:translateY(-10px)}22%{opacity:1;transform:translateY(30px)}23%,100%{opacity:0;transform:translateY(30px)}}
.j4-box{transform-box:fill-box;transform-origin:50% 100%;animation:j4box 6s var(--ease) infinite}
@keyframes j4box{0%,21%{transform:none}23.5%{transform:scaleY(.92)}28%,100%{transform:none}}
.j4-dot{transform-box:view-box;opacity:0;animation:j4dot 6s ease-in-out infinite}
@keyframes j4dot{0%,36%{opacity:0;transform:translate(0,0)}38%{opacity:1;transform:translate(0,0)}46%{transform:translate(0,-20px)}53%{transform:translate(6px,-33px)}59%{opacity:1;transform:translate(14px,-49px)}62%,100%{opacity:0;transform:translate(14px,-49px)}}
.j4-b{transform-box:fill-box;fill:transparent;stroke:#fff;stroke-width:1.1;transform-origin:50% 50%;animation:j4b 6s var(--ease) infinite}
@keyframes j4b{0%,58%{fill:transparent;stroke:#fff;transform:none}61%{fill:#c4412a;stroke:#c4412a;transform:scale(1.4)}66%,92%{fill:#c4412a;stroke:#c4412a;transform:none}97%,100%{fill:transparent;stroke:#fff}}
.j4-a{animation:j4a 6s linear infinite}
@keyframes j4a{0%,58%{opacity:1}62%,92%{opacity:.3}97%,100%{opacity:1}}
.j4-lens{fill:#2a2a2a;animation:j4lens 6s ease-out infinite}
@keyframes j4lens{0%,76%{fill:#2a2a2a}79%{fill:#fff4e2}90%,100%{fill:#2a2a2a}}
.j4-cam{transform-box:fill-box;transform-origin:50% 50%;animation:j4cam 6s var(--ease) infinite}
@keyframes j4cam{0%,76%{transform:none}78%{transform:scale(.96)}83%,100%{transform:none}}
.j4-flash{transform-box:fill-box;fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;transform-origin:0% 100%;opacity:0;animation:j4flash 6s ease-out infinite}
@keyframes j4flash{0%,77%{opacity:0;transform:scale(.4)}80%{opacity:1;transform:scale(1.05)}90%,100%{opacity:0;transform:scale(1.2)}}
.j4-l{animation:j4lab 6s linear infinite}
.j4-l:nth-of-type(2){animation-delay:2s}.j4-l:nth-of-type(3){animation-delay:4s}
@keyframes j4lab{0%,30%{fill:#e8573a;opacity:1}34%,100%{fill:#fff;opacity:.45}}

/* 05 — scan the QR, product card on the phone, the art flies home */
.j5-beam{fill:#fff;opacity:0;animation:j5beam 8s linear infinite}
@keyframes j5beam{0%,6%{opacity:0}9%,18%{opacity:.16}21%,100%{opacity:0}}
.j5-scan{stroke:#e8573a;stroke-width:1.5;opacity:0;transform-box:view-box;animation:j5scan 8s ease-in-out infinite}
@keyframes j5scan{0%,6%{opacity:0;transform:translateY(0)}8%{opacity:1;transform:translateY(0)}18%{opacity:1;transform:translateY(28px)}20%,100%{opacity:0;transform:translateY(28px)}}
.j5-screen{opacity:0;animation:j5screen 8s ease-in-out infinite}
@keyframes j5screen{0%,19%{opacity:0}23%,88%{opacity:1}94%,100%{opacity:0}}
.j5-path{fill:none;stroke:#fff;stroke-width:1;stroke-dasharray:2 4;opacity:0;animation:j5path 8s linear infinite}
@keyframes j5path{0%,26%{opacity:0;stroke-dashoffset:0}30%,56%{opacity:.45}62%,100%{opacity:0;stroke-dashoffset:-24}}
.j5-fx{transform-box:view-box;animation:j5fx 8s linear infinite}
@keyframes j5fx{0%,30%{transform:translateX(0)}55%,100%{transform:translateX(74px)}}
.j5-fy{transform-box:view-box;opacity:0;animation:j5fy 8s infinite}
@keyframes j5fy{0%,29%{opacity:0;transform:translateY(0)}30%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.2,.7,.4,1)}42%{transform:translateY(-30px);animation-timing-function:cubic-bezier(.6,0,.8,.3)}55%{opacity:1;transform:translateY(31px)}56%,100%{opacity:0;transform:translateY(31px)}}
.j5-hung{opacity:0;animation:j5hung 8s ease-in-out infinite}
@keyframes j5hung{0%,54.5%{opacity:0}56%,90%{opacity:1}96%,100%{opacity:0}}
.j5-check{fill:none;stroke:#e8573a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;animation:j5check 8s var(--ease) infinite}
@keyframes j5check{0%,57%{stroke-dashoffset:20;opacity:1}66%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}

@media (prefers-reduced-motion:reduce){
  .ji *{animation:none!important}
  .ji .j3-a1,.ji .j5-screen,.ji .j5-hung,.ji .j1-spark{opacity:1}
  .ji .j5-check{stroke-dashoffset:0}
}