/* Dreamli loader v5: one steady mascot inside a slow, seamless color ring. */
:is(.dreamli-flying-loader,.customer-spinner){
  --loader-size:172px;
  --dragon-width:136px;
  --track-inset:12px;
  --dreamli-cycle:10s;
  width:var(--loader-size);
  height:var(--loader-size);
  position:relative;
  display:block;
  flex:0 0 var(--loader-size);
  isolation:isolate;
  overflow:visible;
  border:0;
  border-radius:50%;
  background:none;
  box-shadow:none;
  transform:none;
  animation:none;
  pointer-events:none;
}
.dreamli-flying-loader{margin:20px auto 28px}
.dreamli-flying-loader[hidden]{display:none!important}
body:has(#customer-book-section:not([hidden])) #dreamli-flying-loader{display:none!important}
.customer-spinner{--loader-size:120px;--dragon-width:96px;--track-inset:8px;margin:8px 8px 8px 0}

:is(.dreamli-flying-loader,.customer-spinner)::before{
  content:"";
  position:absolute;
  inset:16%;
  border-radius:50%;
  background:radial-gradient(circle at 42% 40%,rgba(237,213,248,.35),rgba(249,222,233,.15) 55%,transparent 72%);
  animation:dreamli-v5-halo 6s ease-in-out infinite;
  z-index:0;
}
/* The mascot has one image; legacy pseudo-element mascots stay disabled. */
:is(.dreamli-flying-loader,.customer-spinner)::after,
.dreamli-loader-orbit::before,.dreamli-loader-orbit::after,
.dreamli-loader-dragon-svg{content:none;display:none}

.dreamli-loader-track{
  position:absolute;
  inset:var(--track-inset);
  border:1px solid rgba(112,70,182,.10);
  border-radius:50%;
  z-index:1;
}
.dreamli-loader-track::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  background:conic-gradient(from 0deg,rgba(193,162,220,.12),rgba(193,162,220,.18) 90deg,#b48ad0 180deg,#e9a5c4 250deg,#f4c695 300deg,rgba(193,162,220,.12) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  animation:dreamli-v5-color-flow var(--dreamli-cycle) linear infinite;
}
.dreamli-loader-track::after{content:none;display:none}

/* This wrapper is stationary: only the ring moves around the character. */
.dreamli-loader-orbit{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  transform:none;
  animation:none;
  z-index:3;
}
.dreamli-loader-mascot{
  display:block;
  position:relative;
  width:var(--dragon-width);
  aspect-ratio:3/2;
}
.dreamli-loader-mascot::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("assets/dreamli-loader-mascot-v4.webp?v=20261008") center/contain no-repeat;
  filter:drop-shadow(0 4px 5px rgba(67,32,128,.10));
  animation:dreamli-v5-float 4.8s ease-in-out infinite;
}
.dreamli-loader-sparkles{position:absolute;inset:0;pointer-events:none;z-index:2}
.dreamli-loader-sparkles i{
  position:absolute;
  display:block;
  width:6px;
  height:6px;
  background:#dfb7d4;
  clip-path:polygon(50% 0,63% 36%,100% 50%,63% 63%,50% 100%,36% 63%,0 50%,36% 36%);
  opacity:.2;
  animation:dreamli-v5-twinkle 7.2s ease-in-out infinite;
}
.dreamli-loader-sparkles i:nth-child(1){left:11%;top:19%;animation-delay:-4.8s}
.dreamli-loader-sparkles i:nth-child(2){right:12%;top:15%;width:5px;height:5px;background:#ecc9a4;animation-delay:-2.4s}
.dreamli-loader-sparkles i:nth-child(3){left:57%;bottom:2%;width:5px;height:5px;background:#c6b3dd;animation-delay:0s}

@keyframes dreamli-v5-color-flow{from{transform:rotate(-30deg)}to{transform:rotate(330deg)}}
@keyframes dreamli-v5-float{0%,100%{transform:translateY(1px)}50%{transform:translateY(-2px)}}
@keyframes dreamli-v5-halo{0%,100%{transform:scale(.96);opacity:.7}50%{transform:scale(1.04);opacity:1}}
@keyframes dreamli-v5-twinkle{0%,60%,100%{transform:scale(.8);opacity:.15}30%{transform:scale(1.15);opacity:.6}}

@media(max-width:640px){
  .dreamli-flying-loader{--loader-size:148px;--dragon-width:116px;--track-inset:10px;margin:18px auto 24px}
  .customer-spinner{--loader-size:100px;--dragon-width:80px;--track-inset:7px;margin:6px 4px 6px 0}
  .customer-progress-hero{align-items:center;gap:10px}
}
@media(prefers-reduced-motion:reduce){
  :is(.dreamli-flying-loader,.customer-spinner)::before,
  .dreamli-loader-track::before,.dreamli-loader-mascot::before,
  .dreamli-loader-sparkles i{animation:none}
  .dreamli-loader-track::before{transform:rotate(-30deg)}
  .dreamli-loader-sparkles i{opacity:.3}
}
