/* Each sequence finishes at the reference layout. No layout movement while
   counters run; transform-only meter fills stay in sync with their numbers. */
[data-count-group]{--motion-progress:1}
.factor-fill{transform-origin:left center;transform:scaleX(var(--motion-progress,1));will-change:auto}
.motion-counting .factor-fill{will-change:transform}
.motion-counting .factor-icon{box-shadow:0 0 20px #54f72b12}
.motion-enter{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.65,.3,1);transition-delay:var(--enter-delay,0ms)}
.motion-enter.motion-pending{opacity:0;transform:translateY(16px)}
.reveal{opacity:1;transform:none}
.reveal.motion-pending{opacity:0;transform:translateY(12px)}
.count{display:block;min-height:1em}
.motion-chart i{transform-origin:center bottom}
.motion-chart.motion-pending i{transform:scaleY(0)}
.motion-chart.motion-started i{animation:credit-bar-rise 1.3s cubic-bezier(.18,.7,.3,1) both;animation-delay:var(--bar-delay,0ms)}
.motion-arrow path:not(.arrow-head){stroke-dasharray:1;stroke-dashoffset:0}
.motion-arrow.motion-pending path:not(.arrow-head){stroke-dashoffset:1}
.motion-arrow.motion-pending .arrow-head{opacity:0}
.motion-arrow.motion-started path:not(.arrow-head){animation:credit-arrow-draw 1.8s cubic-bezier(.25,.6,.3,1) both}
.motion-arrow.motion-started .arrow-head{animation:credit-arrow-tip .5s ease 1.3s both}
.motion-glow.motion-started{animation:credit-glow-bloom 2.4s ease-out,credit-glow-breathe 9s ease-in-out 2.4s infinite alternate}
.motion-glow:not(.motion-in-view),.motion-paused .motion-glow{animation-play-state:paused}
.cta{transition:transform .22s ease,filter .22s ease,box-shadow .22s ease}
.cta:hover{box-shadow:0 8px 30px #4cf43721}
.cta-arrow{display:inline-block;transition:transform .22s ease}
.cta:hover .cta-arrow{transform:translateX(5px)}
.social-link{transition:transform .25s ease,border-color .25s ease,background .25s ease,color .25s ease,opacity .7s ease}
.social-link:not(:disabled):hover{transform:translateY(-3px);color:#07120c;background:#6af540;border-color:#6af540;transition-delay:0s}
.review-card.shown:hover{transform:translateY(-4px);transition-delay:0s;box-shadow:0 16px 40px #0003}
.desktop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.desktop-nav a.active::after,.desktop-nav a:hover::after{transform:scaleX(1)}
.factor-icon{transition:box-shadow .3s ease,border-color .3s ease}
.credit-factor:hover .factor-icon{box-shadow:0 0 24px #55ef361e;border-color:#60f637}
@keyframes credit-bar-rise{from{transform:scaleY(0);opacity:.3}to{transform:scaleY(1);opacity:1}}
@keyframes credit-arrow-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes credit-arrow-tip{from{opacity:0}to{opacity:1}}
@keyframes credit-glow-bloom{0%{opacity:.25;transform:scale(.86)}70%{opacity:1;transform:scale(1.025)}100%{opacity:1;transform:scale(1)}}
@keyframes credit-glow-breathe{from{opacity:.78;transform:scale(.97)}to{opacity:1;transform:scale(1.035)}}
/* Keep the whole illustration stationary once its chart has appeared. */
.hero-visual.motion-started .hero-art-crop{animation:none}
.hero-visual:not(.motion-in-view) .hero-art-crop,.motion-paused .hero-art-crop{animation-play-state:paused}
.hero-buttons .primary{position:relative;overflow:hidden}
.hero-buttons .primary::after{content:"";position:absolute;inset:-20% -45%;pointer-events:none;background:linear-gradient(110deg,transparent 42%,#fff4 50%,transparent 58%);transform:translateX(-85%);animation:home-button-sheen 9s ease-in-out 2s infinite}
.hero-buttons:not(.motion-in-view) .primary::after,.motion-paused .hero-buttons .primary::after{animation-play-state:paused}
@keyframes home-art-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes home-button-sheen{0%,72%{transform:translateX(-85%)}90%,100%{transform:translateX(85%)}}
/* A gentle light sweep highlights YOUR CREDIT without moving the heading. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .hero h1 em{background-image:linear-gradient(110deg,var(--green) 0%,var(--green) 42%,#e6ffdb 50%,var(--green) 58%,var(--green) 100%);background-size:240% 100%;background-position:125% 50%;background-clip:text;-webkit-background-clip:text;color:transparent}
  .hero h1.motion-started em{animation:home-title-shine 8s ease-in-out .6s infinite}
  .hero h1:not(.motion-in-view) em,.motion-paused .hero h1 em{animation-play-state:paused}
}
@keyframes home-title-shine{0%,15%{background-position:125% 50%}42%,100%{background-position:-25% 50%}}
/* Reveal pixels of the original artwork once; never layer another chart on top. */
.hero-visual.motion-started .home-chart-bars use { animation:home-original-bar-rise 1.3s cubic-bezier(.18,.7,.3,1) both; animation-delay:var(--home-bar-delay,0ms); }
.hero-visual.motion-started .home-chart-curve,.hero-visual.motion-started .home-phone-curve { animation:credit-arrow-draw 1.8s cubic-bezier(.25,.6,.3,1) .35s both; }
.hero-visual.motion-started .home-score-arrow { animation:credit-arrow-draw .7s ease .9s both; }
.hero-visual.motion-started .home-chart-tip { animation:credit-arrow-tip .4s ease 1.85s both; }
.hero-visual.motion-pending .home-chart-bars use { transform:scaleY(0); }
.hero-visual.motion-pending .home-chart-curve,.hero-visual.motion-pending .home-phone-curve,.hero-visual.motion-pending .home-score-arrow { stroke-dashoffset:1; }
.hero-visual.motion-pending .home-chart-tip { opacity:0; }
@keyframes home-original-bar-rise { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .motion-enter,.motion-enter.motion-pending,.reveal,.reveal.motion-pending{opacity:1!important;transform:none!important;transition:none!important}
  .factor-fill{transform:scaleX(1)!important}
  .motion-chart i,.motion-glow{animation:none!important;transform:none!important;opacity:1!important}
  .motion-arrow path{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}
  .cta:hover{transform:none}
  .cta-arrow,.social-link,.desktop-nav a::after{transition:none!important}
  .cta:hover .cta-arrow,.social-link:not(:disabled):hover,.review-card.shown:hover{transform:none}
  .hero-visual .hero-art-crop{animation:none!important;transform:none!important}
  .hero-buttons .primary::after{animation:none!important;display:none}
  .hero h1 em{animation:none!important;background:none!important;color:var(--green)}
  .home-original-art{mask:none}
  .home-chart-motion use{animation:none!important;transform:none!important;stroke-dashoffset:0!important;opacity:1!important}
}

@media(prefers-reduced-motion:no-preference) {
  .login-button { animation:login-glow 5s ease-in-out infinite; }
  .login-button::after { content:""; position:absolute; inset:-25% -60%; pointer-events:none; background:linear-gradient(110deg,transparent 43%,#b5ffa92b 50%,transparent 57%); transform:translateX(-85%); animation:home-button-sheen 8s ease-in-out infinite; }
  .motion-paused .login-button,.motion-paused .login-button::after { animation-play-state:paused; }
}
@keyframes login-glow { 0%,100% { border-color:#55f52c65; box-shadow:0 0 0 #55f52c00; } 50% { border-color:#7dff5dc9; box-shadow:0 0 16px #55f52c1a; } }

/* The title slides into place once, then keeps its existing text shimmer. */
.hero h1 .home-title-line { display:inline-block; max-width:100%; }
@media(prefers-reduced-motion:no-preference) {
 .hero h1.motion-enter,.hero h1.motion-enter.motion-pending { opacity:1; transform:none; transition:none; }
 .hero h1.motion-pending .home-title-line { opacity:0; transform:translateX(-40px); }
 .hero h1.motion-started .home-title-line { animation:home-title-enter 1.25s cubic-bezier(.16,1,.3,1) .15s both; }
 .hero h1.motion-started .home-title-line:last-child { animation-delay:.35s; }
}
@keyframes home-title-enter { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:translateX(0); } }
