/* Leaderboard motion polish: all falling effects start below the Hero and stop after ranks 4-10. */

/* The shared atmosphere layer is dynamically bounded by leaderboard-motion-polish.js. */
.lbx-confetti{
  overflow:hidden;
  pointer-events:none;
}

.atmo-praise .lbx-confetti span{
  top:-52px;
  opacity:.78;
}

/* Every falling mode now travels through the bounded layer instead of the full viewport/page. */
@keyframes lbxConfetti{
  0%{top:-28px;transform:translate3d(0,-16px,0) rotate(0deg);opacity:0}
  8%{opacity:.75}
  88%{opacity:.5}
  100%{top:calc(100% + 42px);transform:translate3d(70px,0,0) rotate(var(--spin));opacity:0}
}

@keyframes lbxSnowFall{
  0%{top:-34px;transform:translate3d(0,-18px,0) rotate(0deg);opacity:0}
  8%{opacity:.9}
  50%{transform:translate3d(35px,0,0) rotate(180deg)}
  100%{top:calc(100% + 42px);transform:translate3d(-25px,0,0) rotate(360deg);opacity:.15}
}

@keyframes lbxSunFall{
  0%{top:-30px;transform:translate3d(0,-14px,0) scale(.4);opacity:0}
  15%{opacity:.85}
  50%{transform:translate3d(22px,0,0) scale(1.2)}
  100%{top:calc(100% + 44px);transform:translate3d(-18px,0,0) scale(.55);opacity:0}
}

@keyframes lbxSparkleFall{
  0%{top:-28px;transform:translate3d(0,-14px,0) rotate(45deg) scale(.25);opacity:0}
  15%{opacity:1}
  55%{transform:translate3d(24px,0,0) rotate(225deg) scale(1)}
  100%{top:calc(100% + 42px);transform:translate3d(-18px,0,0) rotate(405deg) scale(.35);opacity:0}
}

@keyframes lbxPraiseFall{
  0%{
    top:-52px;
    transform:translate3d(0,-18px,0) rotate(-4deg);
    opacity:0;
  }
  8%{opacity:.82}
  48%{
    transform:translate3d(30px,0,0) rotate(3deg);
    opacity:.82;
  }
  100%{
    top:calc(100% + 58px);
    transform:translate3d(-18px,0,0) rotate(-3deg);
    opacity:0;
  }
}

/* A true traveling perimeter light for player cards 1-10 only. */
@property --lbx-edge-angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}

.lbx-podium-card .lbx-card-shimmer::after,
.lbx-contender-card::before{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  padding:3px;
  background:conic-gradient(
    from var(--lbx-edge-angle),
    transparent 0deg 36deg,
    color-mix(in srgb,var(--rank,var(--lbx-accent)) 82%,#fff) 48deg,
    #fff5bf 60deg,
    color-mix(in srgb,var(--rank,var(--lbx-accent)) 86%,#fff) 72deg,
    transparent 88deg 188deg,
    rgba(101,231,255,.94) 204deg,
    rgba(255,79,184,.82) 218deg,
    transparent 234deg 360deg
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
  opacity:.86;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--rank,var(--lbx-accent)) 56%,transparent));
  animation:lbxEdgeOrbit 4.2s linear infinite;
}

.lbx-podium-card .lbx-card-shimmer::after{
  inset:-3px;
  border-radius:28px;
}

.lbx-contender-card{
  --rank:var(--lbx-accent);
}
.lbx-contender-card::before{
  z-index:1;
  opacity:.82;
  background:conic-gradient(
    from var(--lbx-edge-angle),
    transparent 0deg 42deg,
    rgba(101,231,255,.98) 54deg,
    rgba(255,244,183,.96) 66deg,
    rgba(255,216,93,.92) 78deg,
    transparent 94deg 198deg,
    rgba(255,79,184,.9) 214deg,
    rgba(101,231,255,.9) 226deg,
    transparent 242deg 360deg
  );
  animation:lbxEdgeOrbit 4.4s linear infinite;
}
.lbx-contender-card:nth-child(2)::before{animation-delay:-.63s}
.lbx-contender-card:nth-child(3)::before{animation-delay:-1.26s}
.lbx-contender-card:nth-child(4)::before{animation-delay:-1.89s}
.lbx-contender-card:nth-child(5)::before{animation-delay:-2.52s}
.lbx-contender-card:nth-child(6)::before{animation-delay:-3.15s}
.lbx-contender-card:nth-child(7)::before{animation-delay:-3.78s}

@keyframes lbxEdgeOrbit{
  to{--lbx-edge-angle:360deg}
}

.lbx-contender-rank{
  font-size:1.08em!important;
  font-weight:950!important;
}
.lbx-contender-copy strong{
  font-size:1.08em!important;
  line-height:1.08!important;
}
.lbx-contender-copy span{
  font-size:1.04em!important;
}

@media(max-width:760px){
  .lbx-podium-card .lbx-card-shimmer::after,
  .lbx-contender-card::before{
    padding:2px;
    inset:-2px;
  }
}

@media(prefers-reduced-motion:reduce){
  .lbx-podium-card .lbx-card-shimmer::after,
  .lbx-contender-card::before{
    animation:none!important;
  }
}