/* Autoplay repair: overrides older time-based animations and OS reduced-motion freezes.
   Only affects the demo phone, not the rest of the website. */
#app-tour .hb-story-topline,
#app-tour .hb-story-bottom{display:none!important}
#app-tour .hb-story-phone {
  animation:hbPhoneArriveFixed 1.4s cubic-bezier(.18,.78,.23,1) 1 both !important;
  opacity:1!important;
  transform:translate3d(0,-15px,0) rotateX(0) rotateY(0) scale(1.025);
}
@keyframes hbPhoneArriveFixed{
  0%{opacity:0;transform:translate3d(-12px,105px,-70px) rotateX(51deg) rotateY(-27deg) rotateZ(-12deg) scale(.75)}
  100%{opacity:1;transform:translate3d(0,-15px,0) rotateX(0) rotateY(0) rotateZ(0) scale(1.025)}
}
#app-tour .phone-screen{opacity:1!important;animation:none!important;visibility:visible!important}
#app-tour .phone-back{opacity:0!important;animation:none!important;visibility:hidden!important}
#app-tour .hb-story-scene{
  animation:none!important;opacity:0!important;visibility:hidden;
  transform:translateY(10px) scale(.986);
  transition:opacity .75s ease-in-out, transform .75s ease-in-out, visibility 0s linear .75s!important;
  pointer-events:none;
}
#app-tour .hb-story-scene.is-active{
  opacity:1!important;visibility:visible!important;
  transform:translateY(0) scale(1);
  transition:opacity .75s ease-in-out, transform .75s ease-in-out, visibility 0s linear 0s!important;
}
/* When an individual stage becomes active, animate details immediately. */
#app-tour .hb-story-scan-line,#app-tour .hb-story-check,
#app-tour .hb-story-risk-shape,#app-tour .hb-story-risk-track i,
#app-tour .hb-story-goal-choice,#app-tour .hb-story-select-check,
#app-tour .hb-story-progress-track i,#app-tour .hb-story-donut,
#app-tour .hb-story-float,#app-tour .hb-story-time-progress{animation:none!important}
#app-tour .hb-story-scan-line{opacity:0}
#app-tour .hb-story-scan.is-active .hb-story-scan-line{animation:hbScanVisible 2.8s ease-in-out .25s 1 both!important}
@keyframes hbScanVisible{0%{opacity:0;transform:translateY(0)}12%{opacity:1}81%{opacity:1;transform:translateY(155px)}100%{opacity:0;transform:translateY(155px)}}
#app-tour .hb-story-check{opacity:0}
#app-tour .hb-story-scan.is-active .hb-story-check{animation:hbCheckVisible .45s ease-out 1.5s 1 forwards!important}
#app-tour .hb-story-scan.is-active .hb-story-metric:nth-of-type(4) .hb-story-check{animation-delay:1.8s!important}
#app-tour .hb-story-scan.is-active .hb-story-metric:nth-of-type(5) .hb-story-check{animation-delay:2.1s!important}
@keyframes hbCheckVisible{0%{opacity:0;transform:scale(.55)}100%{opacity:1;transform:scale(1)}}
#app-tour .hb-story-risk-shape{opacity:0;transform:scale(.08);transform-origin:50% 64%}
#app-tour .hb-story-risk.is-active .hb-story-risk-shape{animation:hbRiskVisible 1.6s cubic-bezier(.15,.73,.3,1) .25s 1 both!important}
@keyframes hbRiskVisible{0%{opacity:0;transform:scale(.08)}100%{opacity:1;transform:scale(1)}}
#app-tour .hb-story-risk-track i{transform:scaleX(0)}
#app-tour .hb-story-risk.is-active .hb-story-risk-track i{animation:hbBarVisible 1.5s cubic-bezier(.12,.75,.25,1) .7s 1 both!important}
@keyframes hbBarVisible{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
#app-tour .hb-story-goal-choice{border-color:#eaefee;background:#fcfcfc}
#app-tour .hb-story-goals.is-active .hb-story-goal-choice{animation:hbGoalVisible .7s ease 1.1s 1 forwards!important}
@keyframes hbGoalVisible{0%{background:#fcfcfc;border-color:#eaefee}100%{background:#edf8f4;border-color:#299587;box-shadow:0 7px 25px #27938513}}
#app-tour .hb-story-select-check{opacity:0}
#app-tour .hb-story-goals.is-active .hb-story-select-check{animation:hbCheckVisible .5s ease 1.2s 1 forwards!important}
#app-tour .hb-story-progress-track i{transform:scaleX(0)}
#app-tour .hb-story-goals.is-active .hb-story-progress-track i{animation:hbBarVisible 1.7s ease 1.5s 1 both!important}
#app-tour .hb-story-donut{opacity:0;transform:rotate(-30deg) scale(.7)}
#app-tour .hb-story-portfolio.is-active .hb-story-donut{animation:hbDonutVisible 1.7s cubic-bezier(.16,.76,.23,1) .35s 1 both!important}
@keyframes hbDonutVisible{0%{opacity:0;transform:rotate(-30deg) scale(.7)}100%{opacity:1;transform:rotate(0) scale(1)}}
#app-tour .hb-story-float{display:none!important}
/* Override any inherited prefers-reduced-motion rules that previously froze the phone. */
@media (prefers-reduced-motion:reduce){
  #app-tour .hb-story-phone{animation:hbPhoneArriveFixed 1.4s ease-out 1 both!important}
  #app-tour .hb-story-scene{animation:none!important}
  #app-tour .hb-story-scene.is-active{opacity:1!important;visibility:visible!important}
}