/* Transparent central emblems. The surrounding tier artwork stays static. */
.tier-motion{--gem:67,152,255;--spark:24,112,224;--float-time:7s;--turn-time:11s;--shine-time:6.2s;--shine-opacity:.65;position:relative;isolation:isolate;flex:0 0 auto;width:100%;max-width:350px;height:184px;margin:0 auto;overflow:hidden;contain:layout paint;perspective:700px;pointer-events:auto}
.tier-motion[data-tier="grandmaster"],.tier-motion-stardust[data-tier="grandmaster"]{--gem:168,83,242;--spark:137,47,221;--float-time:7.8s;--turn-time:12.5s;--shine-time:6.8s}
.tier-motion[data-tier="master"],.tier-motion-stardust[data-tier="master"]{--gem:234,48,78;--spark:220,36,71;--float-time:6.6s;--turn-time:10s;--shine-time:5.8s}
.tier-motion-tilt{position:absolute;inset:0;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .35s ease-out;transform-style:preserve-3d}
.tier-motion-aura{position:absolute;inset:14% 15%;border-radius:50%;background:radial-gradient(ellipse,rgba(var(--gem),.18),rgba(var(--gem),.07) 42%,rgba(var(--gem),0) 70%);animation:tier-aura-breathe 5.5s ease-in-out infinite}
.tier-motion-float{position:absolute;inset:12px 20px;display:grid;place-items:center;animation:tier-emblem-float var(--float-time) ease-in-out infinite;transform-style:preserve-3d}
.tier-motion-model{position:relative;width:100%;height:100%;min-height:0;animation:tier-emblem-turn var(--turn-time) ease-in-out infinite;transform-origin:50% 52%}
.tier-motion-emblem{display:block;width:100%;height:100%;min-height:0;object-fit:contain;user-select:none}
.tier-motion[data-tier="master"] .tier-motion-model{animation-name:tier-ruby-pulse}
/* Reuse the artwork's alpha and contain sizing, so the light never fills the
   transparent rectangle around the emblem. Only the narrow shine band moves. */
.tier-motion-sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask-image:var(--emblem-art);mask-image:var(--emblem-art);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-mode:alpha}
.tier-motion-shine{position:absolute;inset:0;opacity:0;background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.12) 45%,rgba(255,255,255,.85) 49%,#fff 50%,rgba(255,255,255,.25) 54%,rgba(255,255,255,0) 59%);animation:tier-emblem-shine var(--shine-time) linear infinite;pointer-events:none}
.tier-motion:not(.is-playing) .tier-motion-sheen{visibility:hidden}
/* Shooting stars cross the frame interior, behind labels and buttons. Artwork
   and content overflow are untouched; only particles are clipped at this inset. */
.tier-motion-stardust{--spark:24,112,224;--meteor-flight:240px;--tail-scale:1;position:absolute;inset:calc(var(--content-top) + var(--frame-safe)) calc(var(--side-panel-width) + var(--frame-safe) + 4px) calc(var(--content-bottom) + var(--frame-safe));z-index:0;overflow:hidden;contain:layout paint;pointer-events:none;user-select:none}
/* Shorten each cycle by 25%, keeping the flight time at 56% of that cycle
   (previously 42%). This adds more arrivals without speeding up their motion. */
.tier-meteor{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);opacity:0;animation:tier-meteor-flight calc(var(--life) * .75) linear infinite;animation-delay:calc(var(--delay) * .75);pointer-events:none}
.tier-meteor::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--tail) * var(--tail-scale));height:2px;border-radius:999px;background:linear-gradient(90deg,rgba(var(--spark),.9),rgba(var(--spark),.48) 24%,rgba(var(--spark),.15) 65%,rgba(var(--spark),0));box-shadow:0 0 4px rgba(var(--spark),.14);transform-origin:0 50%;transform:translateY(-50%) rotate(-45deg)}
.tier-meteor-head{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#fff 0 24%,rgb(var(--spark)) 48%,rgba(var(--spark),0) 76%);box-shadow:0 0 7px rgba(var(--spark),.5)}
.tier-meteor-head::after{content:"";position:absolute;inset:-75%;background:radial-gradient(circle,#fff 0 9%,rgba(var(--spark),.75) 32%,rgba(var(--spark),0) 75%);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
:is(.tier-motion,.tier-motion-stardust) .tier-motion-animated{animation-play-state:paused}
:is(.tier-motion,.tier-motion-stardust).is-playing .tier-motion-animated{animation-play-state:running;will-change:transform,opacity}
.tier-motion.is-playing .tier-motion-aura{will-change:opacity,transform}
.tier-motion:not(.is-playing) .tier-motion-tilt{transform:none}
@keyframes tier-emblem-float{0%,100%{transform:translateY(5px)}50%{transform:translateY(-6px)}}
@keyframes tier-emblem-turn{0%,100%{transform:perspective(650px) rotateY(-11deg) rotateZ(-2deg)}50%{transform:perspective(650px) rotateY(11deg) rotateZ(2deg)}}
@keyframes tier-ruby-pulse{0%,100%{transform:perspective(650px) rotateY(-7deg) scale(.97)}50%{transform:perspective(650px) rotateY(7deg) scale(1.025)}}
@keyframes tier-aura-breathe{0%,100%{opacity:.45;transform:scale(.86)}50%{opacity:1;transform:scale(1.08)}}
@keyframes tier-emblem-shine{
  0%,3%{opacity:0;transform:translate3d(-110%,0,0)}
  7%,19%{opacity:var(--shine-opacity)}
  24%,100%{opacity:0;transform:translate3d(110%,0,0)}
}
@keyframes tier-meteor-flight{
  0%{opacity:0;transform:translate3d(0,0,0)}
  8%{opacity:.9}
  34.6667%{opacity:.8}
  56%,100%{opacity:0;transform:translate3d(calc(0px - var(--meteor-flight)),var(--meteor-flight),0)}
}
@media(max-width:540px){
  .tier-motion{height:148px;max-width:260px;--float-time:9s;--turn-time:14s;--shine-opacity:.5}
  .tier-motion-float{inset:10px 12px}
  .tier-motion-stardust{--tail-scale:.65}
  .tier-meteor:nth-child(n+7){display:none;animation:none;will-change:auto!important}
  .tier-motion-tilt{transform:none!important;transition:none}
  @keyframes tier-emblem-float{0%,100%{transform:translateY(3px)}50%{transform:translateY(-3px)}}
}
@media(prefers-reduced-motion:reduce){
  :is(.tier-motion,.tier-motion-stardust) .tier-motion-animated{animation:none!important;will-change:auto!important}
  .tier-motion-tilt{transform:none!important;transition:none}
  .tier-motion-stardust,.tier-motion-sheen{display:none}
  .tier-motion-aura{opacity:.55}
}
@supports not ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){.tier-motion-sheen{display:none}}