/* Wizard loading spinner: square, layers peel inward, core blooms, reset.
   Colors come from tokens.css (--wizard-line, --wizard-core), so it follows light/dark automatically.
   Speed: change --wizard-spinner-duration (default 1.8s). Everything stays in sync. */
.wizard-spinner{display:inline-block;vertical-align:middle}
/* Hero pace: the same animation, slowed down for showpiece use. Never use it as a real loader. */
.wizard-spinner--hero{--wizard-spinner-duration:var(--wizard-spinner-duration-hero,3.8s)}
/* At hero pace the squares build calmly, then the core blooms quickly: about half a second, like a spell landing. */
.wizard-spinner.wizard-spinner--hero .core{animation-name:wizard-core-hero}
.wizard-spinner .lines{stroke:var(--wizard-line,#121417)}
.wizard-spinner .core{fill:var(--wizard-core,#FF5B23)}
.wizard-spinner .l1,.wizard-spinner .l2,.wizard-spinner .l3,.wizard-spinner .l4,.wizard-spinner .l5,.wizard-spinner .core{
  transform-box:view-box;transform-origin:50px 50px;
  animation-duration:var(--wizard-spinner-duration,1.8s);animation-iteration-count:infinite;animation-timing-function:linear}
.wizard-spinner .l1{animation-name:wizard-l1}
.wizard-spinner .l2{animation-name:wizard-l2}
.wizard-spinner .l3{animation-name:wizard-l3}
.wizard-spinner .l4{animation-name:wizard-l4}
.wizard-spinner .l5{animation-name:wizard-l5}
.wizard-spinner .core{animation-name:wizard-core}
@media (prefers-reduced-motion: reduce){
  .wizard-spinner .l1,.wizard-spinner .l2,.wizard-spinner .l3,.wizard-spinner .l4,.wizard-spinner .l5,.wizard-spinner .core,.wizard-spinner.wizard-spinner--hero .core{animation:none}
}
@keyframes wizard-l1{0%,4%{opacity:0;transform:rotate(-12deg) scale(1.2011);animation-timing-function:cubic-bezier(.2,.7,.2,1)}14%,84%{opacity:1;transform:rotate(0deg) scale(1)}94%,100%{opacity:0;transform:rotate(0deg) scale(1)}}
@keyframes wizard-l2{0%,11%{opacity:0;transform:rotate(-12deg) scale(1.2042);animation-timing-function:cubic-bezier(.2,.7,.2,1)}21%,84%{opacity:1;transform:rotate(0deg) scale(1)}94%,100%{opacity:0;transform:rotate(0deg) scale(1)}}
@keyframes wizard-l3{0%,18%{opacity:0;transform:rotate(-12deg) scale(1.2079);animation-timing-function:cubic-bezier(.2,.7,.2,1)}28%,84%{opacity:1;transform:rotate(0deg) scale(1)}94%,100%{opacity:0;transform:rotate(0deg) scale(1)}}
@keyframes wizard-l4{0%,25%{opacity:0;transform:rotate(-12deg) scale(1.2126);animation-timing-function:cubic-bezier(.2,.7,.2,1)}35%,84%{opacity:1;transform:rotate(0deg) scale(1)}94%,100%{opacity:0;transform:rotate(0deg) scale(1)}}
@keyframes wizard-l5{0%,32%{opacity:0;transform:rotate(-12deg) scale(1.2184);animation-timing-function:cubic-bezier(.2,.7,.2,1)}42%,84%{opacity:1;transform:rotate(0deg) scale(1)}94%,100%{opacity:0;transform:rotate(0deg) scale(1)}}
/* Core entrance: "bloom". To try another entrance, replace only this block. */
@keyframes wizard-core{0%,40%{opacity:0;transform:scale(.5);animation-timing-function:ease-out}58%{opacity:1;transform:scale(1)}84%{opacity:1;transform:scale(1);animation-timing-function:ease-in}94%,100%{opacity:0;transform:scale(.5)}}
@keyframes wizard-core-hero{0%,40%{opacity:0;transform:scale(.5);animation-timing-function:ease-out}53.3%{opacity:1;transform:scale(1)}84%{opacity:1;transform:scale(1);animation-timing-function:ease-in}94%,100%{opacity:0;transform:scale(.5)}}