/* Rank frames for group avatars. Linked from the standings pages and the trivia presenter. */

@property --rank-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.group-avatar.rank-1,
.group-avatar.rank-2,
.group-avatar.rank-3,
.group-avatar.rank-4,
.group-avatar.rank-5,
.group-avatar.rank-6,
.group-avatar.rank-7,
.group-avatar.rank-8,
.group-avatar.rank-9,
.group-avatar.rank-10,
.group-avatar.rank-11,
.group-avatar.rank-12 {
  --rank-scale: 1;
  --rank-angle: 0deg;
  position: relative;
  overflow: visible;
  background: linear-gradient(145deg, var(--ring-a), var(--ring-b) 46%, var(--ring-c));
}

.group-avatar.rank-1,
.group-avatar.rank-2,
.group-avatar.rank-3,
.group-avatar.rank-4 {
  --ring-a: #f8e2c8;
  --ring-b: #8a4b22;
  --ring-c: #e7b07a;
  --spark: #ffe7c4;
}

.group-avatar.rank-5,
.group-avatar.rank-6,
.group-avatar.rank-7,
.group-avatar.rank-8 {
  --ring-a: #ffffff;
  --ring-b: #7f8b99;
  --ring-c: #d5dee8;
  --spark: #ffffff;
}

.group-avatar.rank-9,
.group-avatar.rank-10,
.group-avatar.rank-11,
.group-avatar.rank-12 {
  --ring-a: #fff8dc;
  --ring-b: #b8860b;
  --ring-c: #e7c56a;
  --spark: #fff6d4;
}

.group-avatar.rank-1 img,
.group-avatar.rank-2 img,
.group-avatar.rank-3 img,
.group-avatar.rank-4 img,
.group-avatar.rank-5 img,
.group-avatar.rank-6 img,
.group-avatar.rank-7 img,
.group-avatar.rank-8 img,
.group-avatar.rank-9 img,
.group-avatar.rank-10 img,
.group-avatar.rank-11 img,
.group-avatar.rank-12 img,
.group-avatar.rank-1 .group-avatar-letter,
.group-avatar.rank-2 .group-avatar-letter,
.group-avatar.rank-3 .group-avatar-letter,
.group-avatar.rank-4 .group-avatar-letter,
.group-avatar.rank-5 .group-avatar-letter,
.group-avatar.rank-6 .group-avatar-letter,
.group-avatar.rank-7 .group-avatar-letter,
.group-avatar.rank-8 .group-avatar-letter,
.group-avatar.rank-9 .group-avatar-letter,
.group-avatar.rank-10 .group-avatar-letter,
.group-avatar.rank-11 .group-avatar-letter,
.group-avatar.rank-12 .group-avatar-letter {
  position: relative;
  z-index: 1;
}

.group-avatar.rank-1 { --rank-scale: 1; }
.group-avatar.rank-5 { --rank-scale: 1; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72); }
.group-avatar.rank-9 {
  --rank-scale: 1;
  box-shadow: 0 0 0 1px #fff1c4, 0 0 12px rgba(231, 197, 106, 0.45);
}

.group-avatar.rank-2,
.group-avatar.rank-3,
.group-avatar.rank-4,
.group-avatar.rank-6,
.group-avatar.rank-7,
.group-avatar.rank-8,
.group-avatar.rank-10,
.group-avatar.rank-11,
.group-avatar.rank-12 {
  background: conic-gradient(from var(--rank-angle), var(--ring-a), var(--ring-b), var(--ring-c), #fff 78%, var(--ring-a));
}

.group-avatar.rank-2 { --twist: 18s; --rank-scale: 1.03; }
.group-avatar.rank-3 { --twist: 14s; --bob: 4px; --rank-scale: 1.05; }
.group-avatar.rank-4 { --twist: 11s; --bob: 5px; --sway: 6deg; --rank-scale: 1.08; }
.group-avatar.rank-6 { --twist: 13s; --rank-scale: 1.04; }
.group-avatar.rank-7 { --twist: 10s; --bob: 6px; --rank-scale: 1.07; }
.group-avatar.rank-8 { --twist: 8s; --bob: 7px; --sway: 8deg; --rank-scale: 1.11; }
.group-avatar.rank-10 { --twist: 9s; --rank-scale: 1.08; }
.group-avatar.rank-11 { --twist: 6.5s; --bob: 8px; --rank-scale: 1.12; }
.group-avatar.rank-12 { --twist: 4.2s; --bob: 10px; --sway: 12deg; --rank-scale: 1.18; }

.group-avatar.rank-2,
.group-avatar.rank-6,
.group-avatar.rank-10 {
  animation: rank-twist var(--twist) linear infinite;
  transform: scale(var(--rank-scale));
}

.group-avatar.rank-3,
.group-avatar.rank-7,
.group-avatar.rank-11 {
  animation: rank-twist var(--twist) linear infinite, rank-bob 2.6s ease-in-out infinite;
}

.group-avatar.rank-4,
.group-avatar.rank-8,
.group-avatar.rank-12 {
  animation: rank-twist var(--twist) linear infinite, rank-sway 1.8s ease-in-out infinite;
}

.group-avatar.rank-6,
.group-avatar.rank-7,
.group-avatar.rank-8 {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8), 0 0 10px rgba(206, 220, 232, 0.45);
}

.group-avatar.rank-8 {
  box-shadow: 0 0 0 2px #f4f7fb, 0 0 0 4px #8d97a3, 0 0 14px rgba(255, 255, 255, 0.45);
}

.group-avatar.rank-10,
.group-avatar.rank-11 {
  box-shadow: 0 0 0 1px #fff6d4, 0 0 14px rgba(231, 197, 106, 0.55);
}

.group-avatar.rank-12 {
  box-shadow:
    0 0 0 2px #fff8dc,
    0 0 0 5px #a67c00,
    0 0 18px rgba(231, 197, 106, 0.85);
  animation: rank-twist var(--twist) linear infinite, rank-sway 1.35s ease-in-out infinite, rank-glow 1.8s ease-in-out infinite;
}

.group-avatar.rank-3::after,
.group-avatar.rank-4::after,
.group-avatar.rank-7::after,
.group-avatar.rank-8::after,
.group-avatar.rank-11::after,
.group-avatar.rank-12::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  z-index: 2;
  animation: rank-sparkle 2.4s ease-in-out infinite;
}

.group-avatar.rank-3::after {
  box-shadow: 18px -14px 0 var(--spark), -16px 10px 0 #fff;
}

.group-avatar.rank-4::after {
  box-shadow: 20px -16px 0 var(--spark), -18px -8px 0 #fff, 8px 20px 0 var(--spark);
}

.group-avatar.rank-7::after {
  box-shadow: 22px -16px 0 #fff, -20px -6px 0 var(--spark), 4px 22px 0 #fff, -8px 18px 0 var(--spark);
  animation-duration: 2s;
}

.group-avatar.rank-8::after {
  box-shadow:
    24px -14px 0 #fff,
    -22px -10px 0 var(--spark),
    12px 22px 0 #fff,
    -14px 20px 0 var(--spark),
    0 -26px 0 #fff;
  animation-duration: 1.7s;
}

.group-avatar.rank-11::after {
  box-shadow:
    26px -16px 0 #fff6d4,
    -24px -8px 0 #fff,
    14px 24px 0 #e7c56a,
    -16px 22px 0 #fff,
    0 -28px 0 #fff6d4;
  animation-duration: 1.45s;
}

.group-avatar.rank-12::after {
  box-shadow:
    30px -18px 0 #fff,
    -28px -12px 0 #fff6d4,
    18px 28px 0 #e7c56a,
    -20px 26px 0 #fff,
    0 -32px 0 #fff8dc,
    32px 4px 0 #e7c56a,
    -30px 6px 0 #fff;
  animation: rank-sparkle-spin 5.5s linear infinite;
}

@keyframes rank-twist {
  to { --rank-angle: 360deg; }
}

@keyframes rank-bob {
  0%, 100% { transform: translateY(0) scale(var(--rank-scale)); }
  50% { transform: translateY(calc(var(--bob) * -1)) scale(var(--rank-scale)); }
}

@keyframes rank-sway {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(var(--rank-scale)); }
  35% { transform: translateY(calc(var(--bob) * -1)) rotate(calc(var(--sway) * -1)) scale(var(--rank-scale)); }
  70% { transform: translateY(calc(var(--bob) * -0.35)) rotate(var(--sway)) scale(var(--rank-scale)); }
}

@keyframes rank-glow {
  0%, 100% { box-shadow: 0 0 0 2px #fff8dc, 0 0 0 5px #a67c00, 0 0 12px rgba(231, 197, 106, 0.45); }
  50% { box-shadow: 0 0 0 2px #fff, 0 0 0 6px #e7c56a, 0 0 22px rgba(255, 246, 212, 0.95); }
}

@keyframes rank-sparkle {
  0%, 100% { opacity: 0.2; transform: scale(0.72) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(16deg); }
}

@keyframes rank-sparkle-spin {
  0% { opacity: 0.55; transform: rotate(0deg) scale(0.92); }
  50% { opacity: 1; transform: rotate(180deg) scale(1); }
  100% { opacity: 0.55; transform: rotate(360deg) scale(0.92); }
}

.group-avatar.fx-bounce {
  animation: avatar-bounce 0.7s ease 3;
}

.group-avatar.fx-dance {
  animation: avatar-dance 0.48s ease-in-out 4;
}

.group-avatar.fx-star::after {
  content: "";
  position: absolute;
  inset: 8px;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  z-index: 3;
  background: #e7c56a;
  box-shadow: none;
  opacity: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: avatar-star 2.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .group-avatar.rank-1,
  .group-avatar.rank-2,
  .group-avatar.rank-3,
  .group-avatar.rank-4,
  .group-avatar.rank-5,
  .group-avatar.rank-6,
  .group-avatar.rank-7,
  .group-avatar.rank-8,
  .group-avatar.rank-9,
  .group-avatar.rank-10,
  .group-avatar.rank-11,
  .group-avatar.rank-12,
  .group-avatar.rank-3::after,
  .group-avatar.rank-4::after,
  .group-avatar.rank-7::after,
  .group-avatar.rank-8::after,
  .group-avatar.rank-11::after,
  .group-avatar.rank-12::after {
    animation: none;
    transform: scale(var(--rank-scale));
  }
}