/* ══════════════════════════════════════════════
   MOTION — loaders, skeletons, page + scroll choreography
   Loaded last so it refines the base components.
   Everything here collapses to near-instant under prefers-reduced-motion.
══════════════════════════════════════════════ */

/* ── Spinner: gradient arc on a faint track ── */
.spinner{
  --sp:16px;
  width:var(--sp);height:var(--sp);border:0;border-radius:50%;flex-shrink:0;
  background:conic-gradient(from 0deg,transparent 0 25%,var(--accent) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
  animation:spin .75s cubic-bezier(.5,.2,.5,.8) infinite;
}
.spinner-lg{--sp:30px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));}
.loading{animation:fadeIn .25s ease .12s both;} /* skip the flash on fast responses */

/* ── Three-dot typing loader ── */
.dots{display:inline-flex;gap:4px;align-items:center;}
.dots i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;animation:dotBounce 1.1s ease-in-out infinite;}
.dots i:nth-child(2){animation-delay:.14s;}
.dots i:nth-child(3){animation-delay:.28s;}
@keyframes dotBounce{0%,70%,100%{transform:translateY(0);opacity:.35;}35%{transform:translateY(-4px);opacity:1;}}

/* ── Skeletons ── */
.sk{
  position:relative;overflow:hidden;border-radius:6px;background:var(--bg4);
}
.sk::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  animation:shimmer 1.5s ease-in-out infinite;
}
[data-theme="light"] .sk::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);}
@keyframes shimmer{to{transform:translateX(100%);}}
.sk-line{height:10px;margin-bottom:10px;}
.sk-line.w30{width:30%;}.sk-line.w45{width:45%;}.sk-line.w60{width:60%;}.sk-line.w80{width:80%;}
.sk-title{height:22px;width:200px;max-width:60%;margin-bottom:8px;}
.sk-sub{height:11px;width:280px;max-width:80%;}
.sk-num{height:24px;width:55%;margin-top:8px;}
.sk-circle{border-radius:50%;width:34px;height:34px;flex-shrink:0;}
.sk-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.sk-row:last-child{border-bottom:0;}
.sk-row .sk-line{margin:0;flex:1;}
.sk-page{animation:fadeIn .2s ease .1s both;}
.sk-page .stat-card{pointer-events:none;}
.sk-page .card{margin-bottom:12px;}

/* ── Top route progress bar ── */
#route-bar{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:2000;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);opacity:0;
  background:linear-gradient(90deg,var(--accent2),var(--accent),#f0d28f);
  box-shadow:0 0 10px rgba(212,168,83,.55);
  transition:transform .25s ease-out,opacity .3s ease .05s;
}
#route-bar.on{opacity:1;}
#route-bar.reset{transition:none;}

/* ── Boot splash ── */
#boot-splash{
  position:fixed;inset:0;z-index:1900;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:radial-gradient(ellipse 60% 50% at 50% 42%,var(--accent-bg),transparent 70%),var(--bg);
  animation:fadeIn .25s ease both;
}
#boot-splash.leaving{animation:splashOut .38s var(--ease-spring) both;pointer-events:none;}
@keyframes splashOut{to{opacity:0;transform:scale(1.04);}}
.splash-mark{position:relative;width:72px;height:72px;display:flex;align-items:center;justify-content:center;}
.splash-logo{width:48px;height:48px;border-radius:13px;position:relative;z-index:1;animation:markPulse 2s ease-in-out infinite;}
.splash-ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 30%,var(--accent) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  animation:spin 1.1s linear infinite;}
.splash-ring.r2{inset:-9px;opacity:.35;animation-duration:1.9s;animation-direction:reverse;}
@keyframes markPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 1px var(--border2),0 8px 24px var(--shadow),0 0 0 0 rgba(212,168,83,.35);}50%{transform:scale(1.06);box-shadow:0 0 0 1px var(--border2),0 8px 24px var(--shadow),0 0 0 14px rgba(212,168,83,0);}}
.splash-name{font-family:var(--font-serif);font-size:22px;letter-spacing:-.4px;color:var(--text);}
.splash-msg{font-size:12.5px;color:var(--text3);min-height:18px;display:flex;align-items:center;gap:8px;transition:opacity .25s;}
.splash-msg.swap{opacity:0;}
.splash-track{width:140px;height:3px;border-radius:99px;background:var(--bg4);overflow:hidden;}
.splash-track::after{content:"";display:block;height:100%;width:40%;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:trackSlide 1.2s ease-in-out infinite;}
@keyframes trackSlide{from{transform:translateX(-100%);}to{transform:translateX(350%);}}

/* ── Button loading state (added automatically for async handlers) ── */
.btn{position:relative;}
.btn.is-loading{pointer-events:none;opacity:.85;}
.btn.is-loading::before{
  content:"";width:13px;height:13px;border-radius:50%;flex-shrink:0;
  border:2px solid currentColor;border-right-color:transparent;opacity:.85;
  animation:spin .6s linear infinite;
}
.btn-primary:hover{box-shadow:0 6px 18px -6px rgba(212,168,83,.55);}
.btn-primary:active{box-shadow:none;}

/* ── Page content choreography (children rise in sequence) ── */
.page-enter .stat-grid>*,
.page-enter .grid-2>*,
.page-enter .grid-auto>*,
.page-enter .content>.card,
.page-enter .profile-card,
.page-enter .announce-item{
  animation:riseIn .55s var(--ease-spring) backwards;
}
@keyframes riseIn{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}}
.page-enter .topbar{animation:fadeUp .45s var(--ease-spring) backwards;}

.page-enter :is(.stat-grid,.grid-2,.grid-auto)>:nth-child(1){animation-delay:.04s;}
.page-enter :is(.stat-grid,.grid-2,.grid-auto)>:nth-child(2){animation-delay:.09s;}
.page-enter :is(.stat-grid,.grid-2,.grid-auto)>:nth-child(3){animation-delay:.14s;}
.page-enter :is(.stat-grid,.grid-2,.grid-auto)>:nth-child(4){animation-delay:.19s;}
.page-enter :is(.stat-grid,.grid-2,.grid-auto)>:nth-child(5){animation-delay:.24s;}
.page-enter :is(.stat-grid,.grid-2,.grid-auto)>:nth-child(6){animation-delay:.29s;}
.page-enter :is(.stat-grid,.grid-2,.grid-auto)>:nth-child(n+7){animation-delay:.33s;}
.page-enter .content>.card:nth-of-type(1){animation-delay:.06s;}
.page-enter .content>.card:nth-of-type(2){animation-delay:.14s;}
.page-enter .content>.card:nth-of-type(3){animation-delay:.22s;}
.page-enter .content>.card:nth-of-type(n+4){animation-delay:.28s;}
.page-enter .profile-card:nth-child(3n+2){animation-delay:.05s;}
.page-enter .profile-card:nth-child(3n){animation-delay:.1s;}

/* Progress bars grow from empty when they appear */
.mini-bar-fill,
.page-enter [style*="transition:width"]{animation:barGrow .9s var(--ease-spring) .15s backwards;}
@keyframes barGrow{from{width:0;}}

/* ── Landing: hero entrance + scroll reveal ── */
.hero-badge,.hero-title,.hero-sub,.hero-actions,.hero-stats,.hero-visual{animation:fadeUp .8s var(--ease-spring) backwards;}
.hero-title{animation-delay:.08s;}
.hero-sub{animation-delay:.16s;}
.hero-actions{animation-delay:.24s;}
.hero-stats{animation-delay:.32s;}
.hero-visual{animation-delay:.42s;}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-spring),transform .7s var(--ease-spring);transition-delay:calc(var(--i,0) * 70ms);}
.reveal.in{opacity:1;transform:none;}

/* ── Surfaces: springier toast, lift on hover ── */
#toast{transform:translateY(14px) scale(.96);transition:opacity .25s,transform .4s var(--ease-snap);}
#toast.show{transform:none;}
.feature-card:hover,.demo-role:hover{transform:translateY(-3px);}
.card{transition:background .25s,border-color .25s,box-shadow .25s;}

/* Focus ring that eases in instead of snapping */
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .sk::after,.splash-track::after,.dots i,.splash-logo{animation:none;}
  .spinner,.splash-ring{animation-duration:2.4s!important;animation-iteration-count:infinite!important;} /* a slow spin is still a progress signal */
  #route-bar{transition:none;}
}