/* Journey page: timeline + animated illustrations */
nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:7px}
.jhero{background:var(--deep);color:var(--deep-ink);text-align:center;padding:84px 0 72px}
.jhero h1{font-size:clamp(40px,6.5vw,80px);font-weight:800;letter-spacing:-.03em}
.jhero p{color:var(--hero-sub);font-size:21px;max-width:40ch;margin:18px auto 0}
.tl{position:relative;max-width:1000px;margin:0 auto;padding:72px 24px}
.tl::before,.tl-fill{content:"";position:absolute;left:50%;top:72px;width:4px;margin-left:-2px;border-radius:4px}
.tl::before{bottom:72px;background:var(--line)}
.tl-fill{height:calc((100% - 144px) * var(--p,0));background:linear-gradient(var(--gold),var(--laterite));z-index:1}
.step{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center;padding:34px 0;opacity:0;transform:translateY(36px);transition:opacity .7s,transform .7s}
.step.in{opacity:1;transform:none}
.step:nth-of-type(even) .art{order:2}
.step .n{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--gold);color:var(--on-gold);font:800 20px "Bricolage Grotesque",sans-serif;display:grid;place-items:center;border:5px solid var(--bg);z-index:2}
.step h2{font-size:clamp(26px,3.4vw,38px)}
.step p{color:var(--muted);margin:10px 0 0;max-width:40ch}
.art{background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.art svg{display:block;width:100%;height:auto}
.step:not(.in) *{animation-play-state:paused!important}
/* svg animations */
.sway,.apple,.nut,.rays,.hl,.hr,.kern,.wh,.pulse{transform-box:fill-box}
.sway{transform-origin:50% 100%;animation:sway 5s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.pulse{transform-origin:center;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.7);opacity:.6}}
.apple{transform-origin:50% 0;animation:grow 5s ease-in-out infinite}
@keyframes grow{0%,8%{transform:scale(0)}40%,100%{transform:scale(1)}}
.fall{animation:fall 3.4s ease-in infinite;opacity:0}
@keyframes fall{0%{transform:translateY(-150px);opacity:0}8%{opacity:1}50%{transform:translateY(0)}60%{transform:translateY(-14px)}70%,90%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:0}}
.rays{transform-origin:center;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nut{transform-origin:center;animation:turn 3.2s ease-in-out infinite alternate}
@keyframes turn{from{transform:rotate(-25deg)}to{transform:rotate(35deg)}}
.hl,.hr{transform-origin:center;animation:open 4.5s ease-in-out infinite}
.hl{--dx:-30px;--r:-14deg}.hr{--dx:30px;--r:14deg}
@keyframes open{0%,15%{transform:translate(0,0) rotate(0)}45%,80%{transform:translate(var(--dx),-6px) rotate(var(--r))}100%{transform:translate(0,0) rotate(0)}}
.kern{transform-origin:center;animation:kern 4.5s ease-in-out infinite}
@keyframes kern{0%,15%{transform:scale(.55);opacity:.3}45%,80%{transform:scale(1.05);opacity:1}100%{transform:scale(.55);opacity:.3}}
.spark{animation:tw 2s ease-in-out infinite alternate}
@keyframes tw{from{opacity:.2}to{opacity:1}}
.drive{animation:drive 7s linear infinite}
@keyframes drive{from{transform:translateX(-160px)}to{transform:translateX(340px)}}
.wh{transform-origin:center;animation:spin .7s linear infinite}
.road{animation:road .6s linear infinite}
@keyframes road{to{stroke-dashoffset:-36}}
/* peeling photos */
.photo .pf{position:relative;aspect-ratio:4/3;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .pa{position:absolute;inset:0;animation:xf 6s ease-in-out infinite}
@keyframes xf{0%,40%{opacity:0}55%,90%{opacity:1}100%{opacity:0}}
.chip{position:absolute;left:14px;bottom:14px;background:var(--gold);color:var(--on-gold);font:700 14px "Bricolage Grotesque","Noto Sans Devanagari",sans-serif;padding:6px 14px;border-radius:999px;z-index:2}
.c1{animation:c1 6s ease-in-out infinite}.c2{animation:xf 6s ease-in-out infinite}
@keyframes c1{0%,40%{opacity:1}55%,90%{opacity:0}100%{opacity:1}}
/* grading */
.gr{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:20px}
.gc{margin:0;text-align:center;animation:pop .6s both calc(var(--i)*.18s),bob 3s ease-in-out calc(var(--i)*.18s + .6s) infinite alternate}
.gc img{aspect-ratio:1/1;object-fit:cover;border-radius:50%;width:100%;border:3px solid var(--bg)}
.gc figcaption{font:600 13px "Bricolage Grotesque","Noto Sans Devanagari",sans-serif;margin-top:6px;color:var(--ink)}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes bob{to{transform:translateY(-6px)}}
.step:not(.in) .gc{opacity:0}
@media(max-width:760px){
.jhero{padding:56px 0 48px}.jhero p{font-size:19px}
.tl{padding:48px 18px}.tl::before,.tl-fill{left:41px;top:48px}.tl::before{bottom:48px}.tl-fill{height:calc((100% - 96px) * var(--p,0))}
.step{grid-template-columns:1fr;gap:16px;padding:24px 0 24px 58px}.step:nth-of-type(even) .art{order:0}
.step .n{left:0;top:34px;margin:0;width:42px;height:42px;font-size:18px}
.gr{gap:10px;padding:14px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.step{opacity:1;transform:none}.apple,.fall,.gc{opacity:1}.photo .pa,.c2{opacity:0}.fall{opacity:0}}