/* =====================================================
   Эффект ступени: у каждой свой и про её эмблему.
   Один слой на два места — шапку раздела «Лига» и
   поздравление с подъёмом, — поэтому все расстояния
   заданы через --fx-k: множитель подгоняет эффект под
   размер значка, а геометрия остаётся общей.
   ===================================================== */

.lg-fx {
  position: absolute;
  inset: -35%;
  overflow: visible;
  pointer-events: none;
  --fx-k: 1px;
}
.lg-fx > i {
  position: absolute;
  display: block;
  opacity: 0;
}

/* Четырёхлучевая звёздочка: круг читался бы как пузырь, а он занят сапфиром. */
.lg-fx .fx-star {
  clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%,
    41% 59%, 0% 50%, 41% 41%);
}

@keyframes fxTwinkle {
  0%, 100% { opacity: 0; transform: scale(.35) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.1) rotate(45deg); }
}
@keyframes fxSweep {
  0%, 58% { opacity: 0; transform: translateX(0) rotate(20deg); }
  63% { opacity: .95; }
  100% { opacity: 0; transform: translateX(calc(var(--fx-k) * 210)) rotate(20deg); }
}

/* -------- Бронза: крошки от надкусанного крекера -------- */
.lg-fx[data-tier="bronze"] > i {
  top: 62%;
  width: calc(var(--fx-k) * 9);
  height: calc(var(--fx-k) * 8);
  border-radius: calc(var(--fx-k) * 3);
  background: linear-gradient(140deg, #d97706, #92400e);
  animation: fxCrumb 2.8s ease-in infinite;
}
.lg-fx[data-tier="bronze"] > i:nth-child(1) { left: 30%; animation-delay: 0s; }
.lg-fx[data-tier="bronze"] > i:nth-child(2) { left: 64%; animation-delay: .5s; }
.lg-fx[data-tier="bronze"] > i:nth-child(3) { left: 70%; animation-delay: 1.1s; }
.lg-fx[data-tier="bronze"] > i:nth-child(4) { left: 24%; animation-delay: 1.7s; }
.lg-fx[data-tier="bronze"] > i:nth-child(n+5) { display: none; }
@keyframes fxCrumb {
  0% { opacity: 0; transform: translateY(calc(var(--fx-k) * -12)) rotate(0deg); }
  22% { opacity: .95; }
  75% { opacity: .9; }
  100% { opacity: 0; transform: translateY(calc(var(--fx-k) * 46)) rotate(210deg); }
}

/* -------- Серебро: блик по гладкой скорлупе -------- */
.lg-fx[data-tier="silver"] > i:nth-child(1) {
  top: 4%;
  left: -30%;
  width: calc(var(--fx-k) * 34);
  height: 92%;
  background: linear-gradient(90deg, transparent,
    rgba(255, 255, 255, 0.9), transparent);
  transform: rotate(20deg);
  animation: fxSweep 3.6s ease-in-out infinite;
}
.lg-fx[data-tier="silver"] > i:nth-child(2),
.lg-fx[data-tier="silver"] > i:nth-child(3) {
  width: calc(var(--fx-k) * 13);
  height: calc(var(--fx-k) * 13);
  clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%,
    41% 59%, 0% 50%, 41% 41%);
  background: linear-gradient(140deg, #fff, #cbd5e1);
  animation: fxTwinkle 2.4s ease-in-out infinite;
}
.lg-fx[data-tier="silver"] > i:nth-child(2) { top: 24%; left: 20%; animation-delay: .3s; }
.lg-fx[data-tier="silver"] > i:nth-child(3) { top: 58%; left: 74%; animation-delay: 1.2s; }
.lg-fx[data-tier="silver"] > i:nth-child(n+4) { display: none; }

/* -------- Золото: капля мёда срывается с соты -------- */
.lg-fx[data-tier="gold"] > i:nth-child(1) {
  top: 58%;
  left: 47%;
  width: calc(var(--fx-k) * 13);
  height: calc(var(--fx-k) * 17);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: linear-gradient(180deg, #fbbf24, #d97706);
  animation: fxDrip 3.4s cubic-bezier(0.6, 0, 0.9, 0.4) infinite;
}
.lg-fx[data-tier="gold"] > i:nth-child(2),
.lg-fx[data-tier="gold"] > i:nth-child(3) {
  width: calc(var(--fx-k) * 12);
  height: calc(var(--fx-k) * 12);
  clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%,
    41% 59%, 0% 50%, 41% 41%);
  background: linear-gradient(140deg, #fff, #fbbf24);
  animation: fxTwinkle 2.6s ease-in-out infinite;
}
.lg-fx[data-tier="gold"] > i:nth-child(2) { top: 20%; left: 18%; animation-delay: .2s; }
.lg-fx[data-tier="gold"] > i:nth-child(3) { top: 52%; left: 76%; animation-delay: 1.1s; }
.lg-fx[data-tier="gold"] > i:nth-child(n+4) { display: none; }
@keyframes fxDrip {
  0%, 25% { opacity: 0; transform: translateY(0) scaleY(.6); }
  35% { opacity: 1; transform: translateY(calc(var(--fx-k) * 4)) scaleY(1); }
  85% { opacity: .9; }
  100% { opacity: 0; transform: translateY(calc(var(--fx-k) * 40)) scaleY(1.4); }
}

/* -------- Сапфир: пузырьки, как в лесной ягоде -------- */
.lg-fx[data-tier="sapphire"] > i {
  top: 72%;
  width: calc(var(--fx-k) * 11);
  height: calc(var(--fx-k) * 11);
  border-radius: 50%;
  border: 1.5px solid rgba(96, 165, 250, 0.95);
  background: rgba(191, 219, 254, 0.4);
  animation: fxBubble 4s ease-in infinite;
}
.lg-fx[data-tier="sapphire"] > i:nth-child(1) { left: 24%; animation-delay: 0s; }
.lg-fx[data-tier="sapphire"] > i:nth-child(2) { left: 70%; animation-delay: .8s; }
.lg-fx[data-tier="sapphire"] > i:nth-child(3) { left: 16%; animation-delay: 1.6s; }
.lg-fx[data-tier="sapphire"] > i:nth-child(4) { left: 78%; animation-delay: 2.4s; }
.lg-fx[data-tier="sapphire"] > i:nth-child(n+5) { display: none; }
@keyframes fxBubble {
  0% { opacity: 0; transform: translateY(0) translateX(0); }
  20% { opacity: .95; }
  80% { opacity: .8; }
  100% { opacity: 0;
    transform: translateY(calc(var(--fx-k) * -60)) translateX(calc(var(--fx-k) * 8)); }
}

/* -------- Рубин: вспышки на гранях -------- */
.lg-fx[data-tier="ruby"] > i {
  width: calc(var(--fx-k) * 18);
  height: calc(var(--fx-k) * 18);
  clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%,
    41% 59%, 0% 50%, 41% 41%);
  background: linear-gradient(140deg, #fff, #fb7185);
  animation: fxTwinkle 2.2s ease-in-out infinite;
}
.lg-fx[data-tier="ruby"] > i:nth-child(1) { top: 18%; left: 16%; animation-delay: 0s; }
.lg-fx[data-tier="ruby"] > i:nth-child(2) { top: 46%; left: 78%; animation-delay: .6s; }
.lg-fx[data-tier="ruby"] > i:nth-child(3) { top: 72%; left: 22%; animation-delay: 1.2s; }
.lg-fx[data-tier="ruby"] > i:nth-child(4) { top: 8%; left: 62%; animation-delay: 1.7s; }
.lg-fx[data-tier="ruby"] > i:nth-child(n+5) { display: none; }

/* -------- Изумруд: листья планируют вниз -------- */
.lg-fx[data-tier="emerald"] > i {
  top: 46%;
  width: calc(var(--fx-k) * 16);
  height: calc(var(--fx-k) * 10);
  border-radius: 0 100% 0 100%;
  background: linear-gradient(135deg, #34d399, #059669);
  animation: fxLeaf 4.4s ease-in infinite;
}
.lg-fx[data-tier="emerald"] > i:nth-child(1) { left: 18%; animation-delay: 0s; }
.lg-fx[data-tier="emerald"] > i:nth-child(2) { left: 72%; animation-delay: 1.4s; }
.lg-fx[data-tier="emerald"] > i:nth-child(3) { left: 12%; animation-delay: 2.8s; }
.lg-fx[data-tier="emerald"] > i:nth-child(n+4) { display: none; }
@keyframes fxLeaf {
  0% { opacity: 0; transform: translate(0, calc(var(--fx-k) * -14)) rotate(0deg); }
  18% { opacity: .95; }
  78% { opacity: .9; }
  100% { opacity: 0;
    transform: translate(calc(var(--fx-k) * 18), calc(var(--fx-k) * 52)) rotate(200deg); }
}

/* -------- Бриллиант: радужные блики бегут по граням -------- */
.lg-fx[data-tier="diamond"] > i:nth-child(1) {
  top: 2%;
  left: -30%;
  width: calc(var(--fx-k) * 46);
  height: 96%;
  background: linear-gradient(90deg, transparent,
    rgba(125, 211, 252, .55), rgba(255, 255, 255, .92),
    rgba(196, 181, 253, .55), transparent);
  transform: rotate(20deg);
  animation: fxSweep 2.8s ease-in-out infinite;
}
.lg-fx[data-tier="diamond"] > i:nth-child(n+2) {
  width: calc(var(--fx-k) * 20);
  height: calc(var(--fx-k) * 20);
  clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%,
    41% 59%, 0% 50%, 41% 41%);
  background: linear-gradient(140deg, #fff, #38bdf8);
  animation: fxTwinkle 2.6s ease-in-out infinite;
}
.lg-fx[data-tier="diamond"] > i:nth-child(2) { top: 10%; left: 14%; animation-delay: .1s; }
.lg-fx[data-tier="diamond"] > i:nth-child(3) { top: 44%; left: 80%; animation-delay: .9s; }
.lg-fx[data-tier="diamond"] > i:nth-child(4) { top: 76%; left: 20%; animation-delay: 1.5s;
  background: linear-gradient(140deg, #fff, #c084fc); }
.lg-fx[data-tier="diamond"] > i:nth-child(n+5) { display: none; }

/* Значок дышит по-своему: у каждой ступени свой характер движения. */
.lg-anim[data-tier] > .lg-badge-img { animation-delay: .9s; animation-iteration-count: infinite; }
.lg-anim[data-tier="bronze"] > .lg-badge-img { animation-name: fxBob; animation-duration: 2.6s; }
.lg-anim[data-tier="silver"] > .lg-badge-img { animation-name: fxWobble; animation-duration: 3.4s; }
.lg-anim[data-tier="gold"] > .lg-badge-img { animation-name: fxBob; animation-duration: 3s; }
.lg-anim[data-tier="sapphire"] > .lg-badge-img { animation-name: fxFloat; animation-duration: 3.6s; }
.lg-anim[data-tier="ruby"] > .lg-badge-img { animation-name: fxPulse; animation-duration: 2.8s; }
.lg-anim[data-tier="emerald"] > .lg-badge-img { animation-name: fxFloat; animation-duration: 4s; }
.lg-anim[data-tier="diamond"] > .lg-badge-img { animation-name: fxShimmer; animation-duration: 3.2s; }
.lg-anim > .lg-badge-img { animation-timing-function: ease-in-out; }

@keyframes fxBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes fxWobble {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@keyframes fxFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-6px) rotate(1.5deg); }
}
@keyframes fxPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes fxShimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.14) saturate(1.1); }
}

/* Спокойный режим и стенд: движения нет вовсе. */
@media (prefers-reduced-motion: reduce) {
  .lg-fx { display: none; }
  .lg-anim > .lg-badge-img { animation: none; }
}
body.calm-preview .lg-fx { display: none; }
body.calm-preview .lg-anim > .lg-badge-img { animation: none; }