/* === Learner Journey SVG animation (drop-in) === */
.lj-wrap{max-width:1200px;margin:0 auto;}
.lj-wrap svg.learner-journey-svg{width:70%;height:auto;display:block;overflow:visible; margin: auto;}

@media only screen and (min-width: 1140px) {
    .lj-wrap svg.learner-journey-svg{width:70%;height:auto;display:block;overflow:visible; margin: auto;}
}
@media only screen and (max-width: 768px) {
    .lj-wrap svg.learner-journey-svg{width:95%;height:auto;display:block;overflow:visible; margin: auto;}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .lj-wrap .lj-step,
  .lj-wrap #arrow-bar,
  .lj-wrap #arrow-label{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
    filter:none !important;
  }
}

/* Baseline: hidden until animated */
.lj-wrap .lj-step{
  opacity:0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateX(-64px) scale(.98);
  filter:none;
  will-change: transform, opacity;
}

/* Arrow is controlled by its own pieces */
.lj-wrap #step-arrow{opacity:1;filter:none;}

/* Different “feels” per step */
.lj-wrap #step-plus{
  transform: translateX(-36px) rotate(-18deg) scale(.85);
  filter:none;
}
.lj-wrap #step-equals{
  transform: translateX(-24px) scale(.92);
  filter:none;
}
.lj-wrap #arrow-bar{
  opacity:0;
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(.02);
  will-change: transform, opacity;
  filter:none;
}
.lj-wrap #arrow-label{
  opacity:0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(-10px);
  will-change: transform, opacity;
  filter:none;
}
.lj-wrap #step-verified{
  transform: translateY(-10px) scale(.98);
  filter:none;
}

/* Start animations when .lj-animate is applied */
.lj-wrap.lj-animate #step-laptop{animation: lj-slide-pop .85s cubic-bezier(.18,.95,.22,1) .10s forwards;}
.lj-wrap.lj-animate #step-plus{animation: lj-plus-pop .70s cubic-bezier(.16,1.2,.3,1) 1.05s forwards;}
.lj-wrap.lj-animate #step-hand{animation: lj-slide-pop .85s cubic-bezier(.18,.95,.22,1) 1.55s forwards;}
.lj-wrap.lj-animate #step-equals{animation: lj-fade .55s ease-out 2.55s forwards;}
.lj-wrap.lj-animate #step-card{animation: lj-slide-pop .85s cubic-bezier(.18,.95,.22,1) 2.95s forwards;}

.lj-wrap.lj-animate #arrow-bar{animation: lj-wipe 1.00s cubic-bezier(.22,.9,.22,1) 3.75s forwards;}
.lj-wrap.lj-animate #arrow-label{animation: lj-fade-up .55s ease-out 4.25s forwards;}

/* Verified: show + pulse ONLY twice, then stop */
.lj-wrap.lj-animate #step-verified{
  animation:
    lj-fade-up .60s ease-out 4.75s forwards,
    lj-pulse 1.20s ease-in-out 5.55s 2;
}

/* Keyframes */
@keyframes lj-slide-pop{
  0%{opacity:0;transform:translateX(-64px) scale(.98);filter:none;}
  65%{opacity:1;transform:translateX(10px) scale(1.02);}
  100%{opacity:1;transform:translateX(0) scale(1);filter:none;}
}
@keyframes lj-plus-pop{
  0%{opacity:0;transform:translateX(-36px) rotate(-18deg) scale(.85);}
  70%{opacity:1;transform:translateX(6px) rotate(6deg) scale(1.05);}
  100%{opacity:1;transform:translateX(0) rotate(0deg) scale(1);}
}
@keyframes lj-fade{
  from{opacity:0;transform:translateX(-24px) scale(.92);}
  to{opacity:1;transform:translateX(0) scale(1);}
}
@keyframes lj-wipe{
  0%{opacity:0;transform:scaleX(.02);}
  10%{opacity:1;transform:scaleX(.02);}
  100%{opacity:1;transform:scaleX(1);}
}
@keyframes lj-fade-up{
  0%{opacity:0;transform:translateY(-10px) scale(.99);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes lj-pulse{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(0) scale(1.03);}
}