/* the-journey.html - page styles that followed the mobile layer in the original (generated). Loaded after responsive.css. */
/* #ill-css */
  /* motion inside the illustrations (all CSS, stops for reduced motion) */
  @keyframes eebob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .ill .bob{animation:eebob 3.4s ease-in-out infinite}
  .ill .b2{animation-delay:-.9s}.ill .b3{animation-delay:-1.8s}.ill .b4{animation-delay:-2.6s}
  @keyframes eepin{0%,100%{transform:translateY(0)}45%{transform:translateY(-5px)}}
  .ill .pin{animation:eepin 2.4s ease-in-out infinite}
  .ill .pin.p2{animation-delay:-.6s}.ill .pin.p3{animation-delay:-1.2s}.ill .pin.p4{animation-delay:-1.8s}.ill .pin.p5{animation-delay:-.3s}.ill .pin.p6{animation-delay:-.9s}.ill .pin.p7{animation-delay:-1.5s}.ill .pin.p8{animation-delay:-2.1s}.ill .pin.p9{animation-delay:-.45s}
  @keyframes eehop{0%,62%,100%{transform:translateY(0) rotate(0)}72%{transform:translateY(-12px) rotate(-5deg)}84%{transform:translateY(0) rotate(2deg)}}
  .ill .hop{transform-box:fill-box;transform-origin:50% 100%;animation:eehop 3.6s ease-in-out infinite}
  .ill .hop.h2{animation-delay:-1.8s}
  @keyframes eeswing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
  .ill .swing{transform-box:fill-box;transform-origin:50% 0%;animation:eeswing 3s ease-in-out infinite}
  @keyframes eeding{0%,70%,100%{opacity:0;transform:scale(.7)}76%,92%{opacity:1;transform:scale(1)}}
  .ill .ding{transform-box:fill-box;transform-origin:0% 100%;animation:eeding 3.2s ease-out infinite}
  .ill .ding.d2{animation-delay:-1.1s}.ill .ding.d3{animation-delay:-2.2s}
  @keyframes eespin{to{transform:rotate(360deg)}}
  .ill .spin{transform-origin:160px 104px;animation:eespin 26s linear infinite}
  .ill .spin .tr{transform-box:fill-box;transform-origin:50% 50%;animation:eespin 26s linear infinite reverse}
  @keyframes eewave{0%,55%,100%{transform:rotate(0)}65%{transform:rotate(-14deg)}75%{transform:rotate(6deg)}85%{transform:rotate(-10deg)}}
  .ill .wave{transform-box:fill-box;transform-origin:0% 92%;animation:eewave 2.8s ease-in-out infinite}
  @keyframes eesway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
  .ill .sway{transform-box:fill-box;transform-origin:50% 0%;animation:eesway 3.6s ease-in-out infinite}
  .ill .sway.s2{animation-delay:-1.2s}.ill .sway.s3{animation-delay:-2.4s}
  @keyframes eeflick{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.15,.9) rotate(4deg)}}
  .ill .flick{transform-box:fill-box;transform-origin:50% 100%;animation:eeflick 1.1s ease-in-out infinite}
  @keyframes eeroll{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
  .ill .roll{animation:eeroll 4s ease-in-out infinite}
  @keyframes eepop{0%,60%,100%{transform:scale(1)}70%{transform:scale(1.12)}80%{transform:scale(.96)}}
  .ill .pop{transform-box:fill-box;transform-origin:50% 50%;animation:eepop 3.6s ease-in-out infinite}
  @keyframes eetwinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
  .ill .tw{transform-box:fill-box;transform-origin:50% 50%;animation:eetwinkle 2.2s ease-in-out infinite}
  .ill .tw.t2{animation-delay:-.7s}.ill .tw.t3{animation-delay:-1.4s}
  @keyframes eerise{0%{opacity:0;transform:translateY(10px)}30%,70%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-6px)}}
  .ill .rain{animation:eerise 4s ease-in-out infinite}
  @keyframes eedrive{0%{transform:translateX(-140px)}45%,60%{transform:translateX(0)}100%{transform:translateX(150px)}}
  .ill .drive{animation:eedrive 9s ease-in-out infinite}
  @keyframes eebusdrive{0%{transform:translateX(-200px)}100%{transform:translateX(200px)}}
  .ill .busdrive{animation:eebusdrive 12s linear infinite}
  @keyframes eegrow{to{stroke-dashoffset:0}}
  .ill .grow{stroke-dasharray:300;stroke-dashoffset:300;animation:eegrow 2.4s cubic-bezier(.22,.61,.36,1) forwards}
  @keyframes eenotif{0%,8%{opacity:0;transform:translateY(10px) scale(.92)}16%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-6px)}}
  .ill .notif{transform-box:fill-box;transform-origin:50% 50%;animation:eenotif 6s ease-in-out infinite}
  @keyframes eebell{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-14deg)}88%{transform:rotate(12deg)}92%{transform:rotate(-8deg)}96%{transform:rotate(5deg)}}
  .ill .bell{transform-box:fill-box;transform-origin:50% 0%;animation:eebell 4s ease-in-out infinite}
  @media(prefers-reduced-motion:reduce){.ill *{animation:none !important}}

  /* 17 Sep 2026: one illustration per milestone */
  .timeline{max-width:900px}
  .tstep{display:grid;grid-template-columns:1fr 250px;gap:34px;align-items:center;margin-bottom:34px}
  .tstep .tart{border-radius:20px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 18px 44px -28px rgba(24,21,18,.3)}
  .tstep .tart svg{display:block;width:100%;height:100%}
  @media(max-width:700px){.tstep{grid-template-columns:1fr;gap:16px}.tstep .tart{max-width:360px}}

/* #roadmap-css */
  /* 17 Sep 2026: winding road-map layout */
  .timeline{max-width:1080px;padding-left:0}
  .timeline::before{display:none}
  .timeline .road{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
  .timeline .road .edge{fill:none;stroke:#EDE3D6;stroke-width:40;stroke-linecap:round;stroke-linejoin:round}
  .timeline .road .bed{fill:none;stroke:#fff;stroke-width:34;stroke-linecap:round;stroke-linejoin:round}
  .timeline .road .mid{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-dasharray:12 12;stroke-linecap:round;opacity:.85}
  .timeline .road .fly{fill:none;stroke:var(--orange-deep);stroke-width:2.2;stroke-dasharray:3 9;stroke-linecap:round;opacity:.8}
  .timeline .road .plane{fill:var(--ink)}
  .tstep{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;align-items:center;margin-bottom:64px;position:relative;z-index:1}
  .tstep::before{display:none}
  .tstep .ttx{max-width:380px;grid-row:1}
  .tstep .tart{width:250px;grid-row:1}
  /* odd: stop sits at left third, content to its right; even: mirrored */
  .tstep:nth-child(odd){padding-left:300px}
  .tstep:nth-child(odd) .tart{grid-column:1;justify-self:start}
  .tstep:nth-child(odd) .ttx{grid-column:2;justify-self:start;text-align:left}
  .tstep:nth-child(even){padding-right:300px}
  .tstep:nth-child(even) .ttx{grid-column:1;justify-self:end;text-align:right}
  .tstep:nth-child(even) .tart{grid-column:2;justify-self:end}
  .tstep .stop{position:absolute;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;background:var(--orange);color:#fff;font-family:'Fraunces',serif;font-size:17px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px var(--off),0 10px 24px -10px rgba(240,78,35,.6)}
  .tstep:nth-child(odd) .stop{left:170px}
  .tstep:nth-child(even) .stop{right:170px}
  .tstep.hi .stop{background:var(--ink);animation:stoppulse 2.4s ease-out infinite}
  @keyframes stoppulse{0%{box-shadow:0 0 0 5px var(--off),0 0 0 5px rgba(240,78,35,.5)}100%{box-shadow:0 0 0 5px var(--off),0 0 0 24px rgba(240,78,35,0)}}
  .tstep .stop .tag{position:absolute;top:-32px;left:50%;transform:translateX(-50%) rotate(-5deg);white-space:nowrap;font-family:'Caveat';font-size:21px;color:var(--orange-deep)}
  .tstep .stop .tag.sideR{left:58px;right:auto;top:50%;transform:translateY(-50%) rotate(4deg)}
  .tstep .stop .tag.side{left:auto;right:58px;top:50%;transform:translateY(-50%) rotate(-4deg)}
  .tstep .ttx .yr{display:block;margin-bottom:2px}
  @media(max-width:900px){
    .timeline .road{display:none}
    .tstep,.tstep:nth-child(odd),.tstep:nth-child(even){grid-template-columns:44px 1fr;gap:0 18px;align-items:start;margin-bottom:34px;padding:0}
    .tstep .stop,.tstep:nth-child(odd) .stop,.tstep:nth-child(even) .stop{position:static;margin:0;grid-column:1;grid-row:1;width:36px;height:36px;font-size:14px}
    .tstep .ttx,.tstep:nth-child(odd) .ttx,.tstep:nth-child(even) .ttx{grid-column:2;grid-row:1;justify-self:start;text-align:left;max-width:none}
    .tstep .tart,.tstep:nth-child(odd) .tart,.tstep:nth-child(even) .tart{grid-column:2;grid-row:2;justify-self:start;margin-top:14px;max-width:360px;width:100%}
    .tstep .stop .tag{display:none}
    .timeline::before{display:block;left:17px;top:20px;bottom:20px;border-left:2px dashed var(--orange);opacity:.5}
  }
  @media(prefers-reduced-motion:reduce){.tstep.hi .stop{animation:none}}