/* 2. Ball bounce on glass */
.loader-ball{background:#07080c}
.loader-ball .scene{position:absolute;inset:0}
.well{position:absolute;inset:0;pointer-events:none}
.floor{position:absolute;left:50%;top:68%;width:min(140vw,1200px);height:38vh;transform:translate(-50%,0) rotateX(68deg);transform-origin:center top;background:
  linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 16%,rgba(48,65,203,.06) 42%,transparent 80%);
  border-radius:50%;pointer-events:none}
.floor::before{content:"";position:absolute;left:8%;right:8%;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),var(--yellow),rgba(255,255,255,.5),transparent);opacity:.75}
.ball,.refl{position:absolute;left:50%;width:64px;height:64px;margin-left:-32px;border-radius:50%;will-change:transform,opacity;pointer-events:none}
.ball{top:12%;z-index:2;transform-origin:50% 100%;background:
  radial-gradient(circle at 32% 28%,#fff6a8 0 10%,#ebea64 28%,#c9c431 68%,#8a8a16 100%);
  box-shadow:inset -6px -8px 14px rgba(60,60,0,.28),0 10px 22px rgba(0,0,0,.4)}
.ball::after{content:"";position:absolute;inset:8% 18%;border:1.5px solid rgba(90,80,10,.28);border-radius:50%;border-left-color:transparent;border-right-color:transparent;transform:rotate(-18deg)}
.refl{top:68%;z-index:1;margin-top:2px;transform-origin:50% 0;background:radial-gradient(circle at 50% 0,#ebea64 0 40%,transparent 70%);opacity:.3;transform:scale(1,-.42)}
.loader-ball.is-running .ball{animation:bounce 2.5s cubic-bezier(.2,.7,.3,1) forwards}
.loader-ball.is-running .refl{animation:bounceRefl 2.5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes bounce{
  0%{transform:translateY(0) scale(1,1)}
  16%{transform:translateY(calc(56vh - 64px)) scale(1,1)}
  19%{transform:translateY(calc(56vh - 64px)) scale(1.28,.68)}
  22%{transform:translateY(calc(56vh - 64px)) scale(1,1)}
  36%{transform:translateY(18vh) scale(.96,1.08)}
  48%{transform:translateY(calc(56vh - 64px)) scale(1,1)}
  51%{transform:translateY(calc(56vh - 64px)) scale(1.22,.74)}
  54%{transform:translateY(calc(56vh - 64px)) scale(1,1)}
  64%{transform:translateY(32vh) scale(.98,1.05)}
  72%{transform:translateY(calc(56vh - 64px)) scale(1,1)}
  75%{transform:translateY(calc(56vh - 64px)) scale(1.16,.8)}
  78%{transform:translateY(calc(56vh - 64px)) scale(1,1)}
  86%{transform:translateY(42vh) scale(1,1.03)}
  92%{transform:translateY(calc(56vh - 64px)) scale(1,1)}
  95%{transform:translateY(calc(56vh - 64px)) scale(1.2,.72)}
  100%{transform:translateY(calc(56vh - 64px)) scale(1,1)}
}
@keyframes bounceRefl{
  0%{transform:scale(1,-.28);opacity:.1}
  16%{transform:scale(1,-.48);opacity:.34}
  19%{transform:scale(1.28,-.32);opacity:.4}
  22%{transform:scale(1,-.48);opacity:.32}
  36%{transform:scale(.9,-.28);opacity:.1}
  48%{transform:scale(1,-.46);opacity:.32}
  51%{transform:scale(1.22,-.32);opacity:.38}
  54%{transform:scale(1,-.46);opacity:.3}
  64%{transform:scale(.92,-.28);opacity:.1}
  72%{transform:scale(1,-.44);opacity:.3}
  75%{transform:scale(1.16,-.3);opacity:.36}
  78%{transform:scale(1,-.44);opacity:.28}
  86%{transform:scale(.94,-.26);opacity:.1}
  92%{transform:scale(1,-.44);opacity:.3}
  95%{transform:scale(1.2,-.3);opacity:.36}
  100%{transform:scale(1,-.44);opacity:.22}
}
.hud{position:absolute;left:var(--pad);right:var(--pad);bottom:8%;display:flex;align-items:flex-end;justify-content:space-between;z-index:3}
.hud [data-pct]{font:800 italic clamp(28px,5vw,56px)/1 var(--display);color:var(--yellow);letter-spacing:.06em}
.hud .kicker{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--t-muted);margin:0 0 10px}
.mark-mini{position:absolute;top:clamp(24px,6vh,64px);left:50%;transform:translateX(-50%);width:min(36vw,200px);opacity:.9;z-index:3}
.mark-mini img{width:100%}
.flash{position:absolute;left:50%;top:68%;width:min(70vw,520px);height:min(70vw,520px);margin:0;transform:translate(-50%,-50%) scale(.4);border-radius:50%;background:radial-gradient(circle,rgba(235,234,100,.28) 0 8%,rgba(255,255,255,.08) 28%,transparent 64%);opacity:0;z-index:4;pointer-events:none;will-change:transform,opacity;mix-blend-mode:screen}
.loader-ball.is-done .flash{animation:flashOut .7s var(--ease) forwards}
@keyframes flashOut{0%{opacity:1;transform:translate(-50%,-50%) scale(.35)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
.loader-ball.is-done .scene>:not(.ring){opacity:0;transition:opacity .4s var(--ease)}
.loader-ball.is-done{transition:opacity .55s var(--ease) .12s}

@media (orientation:landscape) and (max-height:500px){
  .ball,.refl{width:48px;height:48px;margin-left:-24px}
  .mark-mini{width:min(22vw,140px);top:16px}
}
@media (prefers-reduced-motion:reduce){
  .loader-ball.is-running .ball,.loader-ball.is-running .refl{animation:none}
  .loader-ball.is-running .ball{transform:translateY(calc(56vh - 64px))}
}