/* Account-credit celebration (static/credit.js). */
.ts-credit{position:fixed;inset:0;z-index:10000;display:flex;align-items:flex-start;justify-content:center;
  padding-top:calc(env(safe-area-inset-top) + 22vh);pointer-events:auto;cursor:pointer;
  background:radial-gradient(60% 40% at 50% 30%,rgba(245,181,58,.16),rgba(3,10,18,.55) 70%);
  opacity:0;transition:opacity .35s ease;-webkit-tap-highlight-color:transparent}
.ts-credit.show{opacity:1}
.ts-credit.hide{opacity:0;transition:opacity .4s ease}

.ts-credit-glow{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 22vh + 70px);width:340px;height:340px;
  transform:translate(-50%,-50%) scale(.6);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,206,92,.55),rgba(255,206,92,0));opacity:0}
.ts-credit.show .ts-credit-glow{animation:tsCreditGlow 1.6s ease-out forwards}

.ts-credit-card{position:relative;min-width:250px;max-width:min(88vw,360px);padding:22px 26px 20px;border-radius:24px;text-align:center;
  color:#fff8e6;background:linear-gradient(160deg,#16365c 0%,#0b2240 55%,#0a1c33 100%);
  border:1px solid rgba(255,214,120,.55);
  box-shadow:0 0 0 1px rgba(255,214,120,.15) inset,0 18px 50px rgba(0,0,0,.45),0 0 40px rgba(245,181,58,.35);
  transform:translateY(26px) scale(.86);opacity:0;transition:transform .55s cubic-bezier(.18,1.35,.4,1),opacity .35s ease}
.ts-credit.show .ts-credit-card{transform:none;opacity:1}
.ts-credit.hide .ts-credit-card{transform:translateY(-14px) scale(.96);opacity:0}
.ts-credit.pulse .ts-credit-amount{animation:tsCreditPop .5s cubic-bezier(.2,1.4,.4,1)}

.ts-credit-badge{width:46px;height:46px;margin:-46px auto 8px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,#ffd86b,#f5a524);box-shadow:0 6px 18px rgba(245,165,36,.55),0 0 0 4px rgba(10,28,51,.9)}
.ts-credit-badge svg{width:26px;height:26px;fill:none;stroke:#3b2500;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24}
.ts-credit.show .ts-credit-badge svg{animation:tsCreditTick .45s .25s ease-out forwards}

.ts-credit-amount{font-size:44px;font-weight:800;letter-spacing:-.5px;line-height:1.05;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff3c4 0%,#ffd15a 45%,#f2a51f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(245,181,58,.45))}
.ts-credit-plus{font-size:.7em;vertical-align:.18em;margin-right:2px}
.ts-credit-label{margin-top:8px;font-size:15px;font-weight:600;color:#eaf3ff}
.ts-credit-sub{margin-top:3px;font-size:12px;color:#a9c3dd;min-height:0}
.ts-credit-sub:empty{display:none}

/* coins and sparks burst from behind the amount */
.ts-credit-coins{position:absolute;left:50%;top:48%;width:0;height:0;pointer-events:none}
.ts-credit-coins i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;opacity:0;
  animation:tsCreditBurst 1.25s cubic-bezier(.15,.75,.35,1) var(--d,0s) forwards}
.ts-credit-coins i.coin{background:radial-gradient(circle at 35% 30%,#fff1b0 0 18%,#ffd15a 40%,#e39b16 100%);
  box-shadow:inset 0 0 0 2px rgba(150,95,0,.45),0 2px 6px rgba(0,0,0,.3)}
.ts-credit-coins i.coin::after{content:"$";position:absolute;inset:0;display:grid;place-items:center;font:800 11px/1 system-ui,sans-serif;color:#7a4b00}
.ts-credit-coins i.spark{width:8px;height:8px;left:-4px;top:-4px;background:#fff6cf;box-shadow:0 0 10px 3px rgba(255,214,120,.9)}

/* the TollSpark mark glows gold for a moment */
body.ts-credit-on .tsx-facet{filter:drop-shadow(0 0 12px rgba(245,181,58,.95)) brightness(1.15)!important;transition:filter .4s ease}
body.ts-credit-on .tsx-halo{opacity:.8!important;background:radial-gradient(closest-side,rgba(245,181,58,.45),transparent 70%)!important}

@keyframes tsCreditGlow{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}35%{opacity:1}100%{opacity:.55;transform:translate(-50%,-50%) scale(1.15)}}
@keyframes tsCreditPop{0%{transform:scale(.8)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes tsCreditTick{to{stroke-dashoffset:0}}
@keyframes tsCreditBurst{
  0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}
  12%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 40px)) scale(1) rotate(var(--r))}}

@media (prefers-reduced-motion:reduce){
  .ts-credit-card{transition:opacity .3s ease;transform:none!important}
  .ts-credit.show .ts-credit-glow,.ts-credit.pulse .ts-credit-amount,.ts-credit-coins i{animation:none!important}
  .ts-credit.show .ts-credit-badge svg{animation:none;stroke-dashoffset:0}
}