.donators-top {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 1.35rem 0 4.5rem;
}

/* v10: page-local animated ambient background */
.donators-top__backdrop {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% -8%, rgba(255, 231, 157, 0.035), transparent 46%),
    radial-gradient(ellipse at 50% 48%, rgba(140, 105, 38, 0.025), transparent 58%),
    linear-gradient(180deg, rgba(14, 15, 17, 0.16), rgba(5, 6, 7, 0.04));
}

.donators-top__backdrop::before {
  content: "";
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.017) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.017) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 38%, #000 0%, rgba(0,0,0,.52) 43%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 38%, #000 0%, rgba(0,0,0,.52) 43%, transparent 78%);
  opacity: 0.48;
  transform: perspective(650px) rotateX(63deg) translateY(-7%);
  transform-origin: 50% 10%;
  animation: donatorsBackdropGrid 38s linear infinite;
}

.donators-top__backdrop::after {
  content: "";
  position: absolute;
  inset: -8%;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.15) 0 1px, transparent 1.7px),
    radial-gradient(circle at 27% 62%, rgba(255,222,130,.10) 0 1px, transparent 1.8px),
    radial-gradient(circle at 45% 31%, rgba(255,255,255,.09) 0 1px, transparent 1.6px),
    radial-gradient(circle at 62% 68%, rgba(255,214,101,.09) 0 1px, transparent 1.7px),
    radial-gradient(circle at 79% 27%, rgba(255,255,255,.12) 0 1px, transparent 1.7px),
    radial-gradient(circle at 91% 74%, rgba(255,205,93,.08) 0 1px, transparent 1.5px);
  background-size: 360px 330px, 430px 390px, 390px 450px, 470px 410px, 410px 360px, 520px 470px;
  opacity: 0.34;
  filter: blur(.15px);
  animation: donatorsBackdropDust 24s ease-in-out infinite alternate;
}

.donators-top > :not(.donators-top__backdrop) {
  position: relative;
  z-index: 2;
}

.donators-top__ambient {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: 0.58;
  filter: blur(18px);
  will-change: transform, opacity;
}

.donators-top__ambient--gold {
  top: 8%;
  left: 50%;
  width: min(58vw, 920px);
  height: min(47vw, 720px);
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(211, 157, 38, 0.105) 0%, rgba(157, 109, 22, 0.042) 39%, transparent 72%);
  animation: donatorsAmbientGold 13s ease-in-out infinite;
}

.donators-top__ambient--silver {
  top: 22%;
  left: 15%;
  width: min(34vw, 540px);
  height: min(38vw, 620px);
  background: radial-gradient(ellipse, rgba(191, 205, 223, 0.050), rgba(110, 124, 143, 0.018) 44%, transparent 72%);
  animation: donatorsAmbientSideLeft 18s ease-in-out infinite;
}

.donators-top__ambient--bronze {
  top: 23%;
  right: 13%;
  width: min(34vw, 540px);
  height: min(38vw, 620px);
  background: radial-gradient(ellipse, rgba(207, 116, 67, 0.050), rgba(122, 66, 40, 0.018) 44%, transparent 72%);
  animation: donatorsAmbientSideRight 19s ease-in-out infinite;
}

.donators-top__ambient--lower {
  left: 50%;
  bottom: -20%;
  width: min(86vw, 1360px);
  height: min(36vw, 560px);
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(184, 132, 29, 0.042), transparent 69%);
  filter: blur(30px);
  animation: donatorsAmbientLower 16s ease-in-out infinite;
}

.donators-top__header {
  display: flex;
  max-width: 720px;
  margin: 0 auto 3.1rem;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.donators-top__title {
  margin: 0;
  color: var(--text-default);
  font-family: var(--font-family-1);
  font-size: clamp(2rem, 3.4vw, 3.35rem);
  font-weight: var(--font-weight-7);
  letter-spacing: -0.035em;
  line-height: 1;
  text-transform: uppercase;
}

.donators-top__subtitle {
  max-width: 620px;
  margin: 0.75rem auto 0;
  color: var(--text-secondary);
  font-size: clamp(0.82rem, 1vw, 0.98rem);
  font-weight: var(--font-weight-5);
  line-height: 1.45;
}

.donators-top__filters {
  display: flex;
  width: min(560px, 100%);
  margin-top: 1.45rem;
  overflow: hidden;
  border: 1px solid var(--transparent-10-w);
  border-radius: var(--br-8);
  background: var(--card);
}

.donators-top__filter {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  height: 2.85rem;
  padding: 0 1rem;
  border: 0 !important;
  border-right: 1px solid var(--transparent-10-w) !important;
  border-radius: 0;
  outline: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-6);
  white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.donators-top__filter:last-child {
  border-right: 0 !important;
}

.donators-top__filter:hover {
  background: var(--button-hover) !important;
  color: var(--text-default) !important;
}

.donators-top__filter.active {
  background: var(--money-bg) !important;
  color: var(--money) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--money) 28%, transparent);
}

.donators-top__stage {
  min-height: 60vh;
}

.donators-top__content,
.donators-top__loading {
  display: flex;
  flex-direction: column;
  gap: clamp(2.15rem, 3.5vw, 3.8rem);
}

.donators-top__podium {
  display: grid;
  grid-template-columns: minmax(220px, 0.92fr) minmax(280px, 1.12fr) minmax(220px, 0.92fr);
  align-items: start;
  justify-content: center;
  gap: clamp(1.2rem, 2.4vw, 2.6rem);
  width: min(1010px, 100%);
  margin: 0 auto;
}

.donators-top__row {
  display: grid;
  align-items: start;
  justify-content: center;
  gap: clamp(0.9rem, 1.55vw, 1.55rem);
  width: 100%;
  margin: 0 auto;
}

.donators-top__row--middle {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  max-width: 1180px;
}

.donators-top__row--bottom {
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  max-width: 1420px;
}

.donator-card {
  --card-edge: rgba(210, 151, 43, 0.9);
  --card-edge-dark: rgba(83, 57, 17, 0.9);
  --card-edge-soft: rgba(255, 194, 63, 0.28);
  --card-surface-1: #20252b;
  --card-surface-2: #101419;
  --card-text: #f3ead9;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 0.66;
  padding: 2px;
  overflow: hidden;
  color: var(--card-text);
  text-decoration: none;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), transparent 16%),
    linear-gradient(315deg, rgba(255, 255, 255, 0.08), transparent 22%),
    linear-gradient(145deg, var(--card-edge), var(--card-edge-dark) 44%, var(--card-edge));
  clip-path: polygon(50% 0, 84% 6%, 93% 13%, 100% 20%, 100% 77%, 93% 84%, 84% 91%, 50% 100%, 16% 91%, 7% 84%, 0 77%, 0 20%, 7% 13%, 16% 6%);
  filter: drop-shadow(0 16px 27px rgba(0, 0, 0, 0.32));
  isolation: isolate;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --card-lift: 0px;
  --card-scale: 1;
  --shine-x: 50%;
  --shine-y: 50%;
  --shine-opacity: 0;
  --tilt-strength: 0;
  --rank-x: 0px;
  --rank-y: 0px;
  --avatar-x: 0px;
  --avatar-y: 0px;
  --name-x: 0px;
  --name-y: 0px;
  --progress-x: 0px;
  --progress-y: 0px;
  transform: perspective(760px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--card-lift)) scale(var(--card-scale));
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transition: transform 260ms cubic-bezier(.2,.75,.25,1), filter 220ms ease;
  will-change: transform;
  animation: donatorCardBreath 5.8s ease-in-out infinite;
}

.donator-card--gold {
  animation-name: donatorGoldBreath;
  animation-duration: 4.8s;
}

.donator-card::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: -35%;
  left: -70%;
  width: 48%;
  height: 170%;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.015) 34%,
    rgba(255, 255, 255, 0.16) 48%,
    rgba(255, 255, 255, 0.025) 60%,
    transparent 100%);
  transform: rotate(10deg) translateX(0);
  opacity: 0;
  mix-blend-mode: screen;
  animation: donatorAmbientSweep 7.2s ease-in-out infinite;
}

.donator-card--gold::before {
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 238, 173, 0.02) 32%,
    rgba(255, 232, 135, 0.24) 48%,
    rgba(255, 220, 98, 0.04) 61%,
    transparent 100%);
  animation-duration: 6.2s;
}

.donator-card::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 1px;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--shine-x) var(--shine-y),
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.38) 9%,
      rgba(255, 255, 255, 0.14) 22%,
      transparent 46%);
  mix-blend-mode: screen;
  opacity: var(--shine-opacity);
  transition: opacity 90ms linear;
}

.donator-card:hover {
  color: var(--card-text);
  text-decoration: none;
  --card-lift: -10px;
  --card-scale: 1.025;
  filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.42));
}

.donator-card.is-tilting {
  transition: transform 70ms linear, filter 220ms ease;
}

.donator-card:focus-visible {
  outline: 2px solid var(--card-edge);
  outline-offset: 4px;
}

.donator-card__surface {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  padding: 10.5% 8% 8%;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255, 255, 255, 0.16), transparent 26%),
    linear-gradient(118deg, transparent 24%, color-mix(in srgb, var(--card-edge) 9%, transparent) 44%, rgba(255, 255, 255, 0.055) 50%, transparent 67%),
    radial-gradient(circle at 50% 30%, var(--card-edge-soft), transparent 38%),
    linear-gradient(160deg, var(--card-surface-1), var(--card-surface-2) 74%);
  background-size: 100% 100%, 220% 220%, 112% 112%, 100% 100%;
  background-position: 50% 0%, 0% 48%, 50% 30%, 0 0;
  clip-path: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -26px 45px rgba(0, 0, 0, 0.12);
  transform-style: preserve-3d;
  animation: donatorSurfaceDrift 8.5s ease-in-out infinite;
}

.donator-card__surface::before,
.donator-card__surface::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.donator-card__surface::before {
  inset: 4.3% 4.8%;
  border: 1px solid color-mix(in srgb, var(--card-edge) 62%, transparent);
  clip-path: polygon(50% 0, 84% 6%, 93% 13%, 100% 20%, 100% 77%, 93% 84%, 84% 91%, 50% 100%, 16% 91%, 7% 84%, 0 77%, 0 20%, 7% 13%, 16% 6%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 73%, rgba(0,0,0,.7) 79%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 73%, rgba(0,0,0,.7) 79%, transparent 88%);
  opacity: 0.58;
}

.donator-card__surface::after {
  top: 6.2%;
  left: 50%;
  width: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card-edge) 70%, #fff 30%), transparent);
  box-shadow:
    0 0 8px color-mix(in srgb, var(--card-edge) 34%, transparent),
    0 11px 22px color-mix(in srgb, var(--card-edge) 18%, transparent);
  transform: translateX(-50%);
  opacity: 0.78;
  animation: donatorEdgePulse 4.5s ease-in-out infinite;
}

.donator-card--gold {
  --card-edge: #f8ce5a;
  --card-edge-dark: #80540e;
  --card-edge-soft: rgba(255, 194, 36, 0.42);
  --card-surface-1: #9b6917;
  --card-surface-2: #3b2508;
  --card-text: #fff0b9;
  z-index: 3;
  width: min(100%, 320px);
  justify-self: center;
  filter:
    drop-shadow(0 20px 36px rgba(128, 82, 0, 0.34))
    drop-shadow(0 0 12px rgba(248, 206, 90, 0.08));
}

.donator-card--silver {
  --card-edge: #d7dde5;
  --card-edge-dark: #646b74;
  --card-edge-soft: rgba(213, 224, 235, 0.34);
  --card-surface-1: #5a626d;
  --card-surface-2: #1f252c;
  --card-text: #f5f7f9;
  width: min(100%, 265px);
  margin-top: 78px;
  justify-self: end;
}

.donator-card--bronze {
  --card-edge: #d88b5d;
  --card-edge-dark: #754025;
  --card-edge-soft: rgba(222, 119, 66, 0.32);
  --card-surface-1: #75422d;
  --card-surface-2: #25160f;
  --card-text: #f4d0bc;
  width: min(100%, 265px);
  margin-top: 78px;
  justify-self: start;
}

.donator-card--regular {
  max-width: 212px;
  justify-self: center;
}

.donator-card--small {
  max-width: 190px;
}

.donator-card__rank {
  position: relative;
  z-index: 2;
  transform: translate3d(var(--rank-x), var(--rank-y), 24px);
  transition: transform 90ms linear, text-shadow 180ms ease;
  margin-bottom: 5.5%;
  font-family: var(--font-family-1);
  font-size: clamp(1rem, 1.45vw, 1.55rem);
  font-weight: var(--font-weight-7);
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  animation: donatorRankPulse 4.6s ease-in-out infinite;
}

.donator-card--gold .donator-card__rank {
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.donator-card__avatar-ring {
  position: relative;
  z-index: 2;
  transform: translate3d(var(--avatar-x), var(--avatar-y), 38px);
  transition: transform 90ms linear, box-shadow 220ms ease;
  width: 72%;
  aspect-ratio: 4 / 3;
  padding: 3px;
  margin: 1% auto 7%;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--card-edge), rgba(255, 255, 255, 0.38), var(--card-edge));
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.14),
    0 13px 28px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.donator-card--gold .donator-card__avatar-ring {
  width: 74%;
  border-radius: 12px;
  box-shadow:
    0 0 0 5px rgba(50, 25, 0, 0.22),
    0 0 36px rgba(255, 193, 38, 0.24),
    0 14px 30px rgba(0, 0, 0, 0.34);
}

.donator-card__avatar-ring {
  animation: donatorAvatarFrame 4.6s ease-in-out infinite;
}

.donator-card--gold .donator-card__avatar-ring {
  animation-name: donatorGoldAvatarFrame;
  animation-duration: 4s;
}

.donator-card__avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.32);
  transition: transform 320ms ease, filter 320ms ease;
}

.donator-card--gold .donator-card__avatar {
  border-radius: 9px;
}

.donator-card:hover .donator-card__avatar {
  transform: scale(1.035);
  filter: contrast(1.03) saturate(1.04);
}

.donator-card__name {
  position: relative;
  z-index: 2;
  transform: translate3d(var(--name-x), var(--name-y), 30px);
  transition: transform 90ms linear, text-shadow 180ms ease;
  width: 100%;
  overflow: hidden;
  color: currentColor;
  font-family: var(--font-family-1);
  font-size: clamp(0.82rem, 1.05vw, 1.1rem);
  font-weight: var(--font-weight-7);
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.34);
  white-space: nowrap;
  animation: donatorNameGlow 5.4s ease-in-out infinite;
}

.donator-card--gold .donator-card__name {
  font-size: clamp(1.1rem, 1.45vw, 1.55rem);
}


.donator-card__progress-wrap {
  position: relative;
  z-index: 2;
  transform: translate3d(var(--progress-x), var(--progress-y), 20px);
  transition: transform 90ms linear;
  width: 86%;
  margin-top: 7.5%;
  margin-bottom: 0;
}

.donator-card__progress-label {
  margin-bottom: 6px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.48rem, 0.57vw, 0.62rem);
  font-weight: var(--font-weight-5);
  letter-spacing: 0.035em;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.donator-card__progress {
  width: 100%;
  height: 9px;
  padding: 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.42),
    0 0 0 1px color-mix(in srgb, var(--card-edge) 8%, transparent);
  animation: donatorProgressFrame 4.8s ease-in-out infinite;
}

.donator-card__progress-fill {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  box-shadow: 0 0 8px currentColor;
}

.donator-card__progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: translateX(-100%);
  animation: donatorProgressSheen 3.6s ease-in-out infinite;
}

.donator-card__progress-fill--green {
  color: #5ccf64;
  background: linear-gradient(90deg, #32a84a, #73db72);
}

.donator-card__progress-fill--yellow {
  color: #f2b84b;
  background: linear-gradient(90deg, #e18b2c, #f4c856);
}

.donator-card__progress-fill--red {
  color: #e75454;
  background: linear-gradient(90deg, #cb3d3d, #ef6868);
}

.donator-card__medallion {
  position: absolute;
  z-index: 2;
  bottom: 8.8%;
  left: 50%;
  display: grid;
  width: 19%;
  aspect-ratio: 1;
  place-items: center;
  color: var(--card-edge);
  transform: translateX(-50%);
}

.donator-card__medallion:not(.donator-card__medallion--crown) {
  animation: donatorBadgeFloat 4.4s ease-in-out infinite;
}

.donator-card__medallion::before,
.donator-card__medallion::after {
  content: none !important;
  display: none !important;
}

.donator-card__medallion svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  filter:
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 6px color-mix(in srgb, var(--card-edge) 22%, transparent));
}

.donator-card__medallion--crown {
  bottom: 10.8%;
  width: 27%;
  color: #ffe486;
  filter: drop-shadow(0 0 12px rgba(248, 206, 90, 0.34));
  animation: donatorCrownFloat 3.2s ease-in-out infinite;
}

.donator-card__medallion--crown svg {
  overflow: visible;
  fill: currentColor;
  stroke: rgba(105, 66, 4, 0.82);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.donator-card--gold .donator-card__medallion:not(.donator-card__medallion--crown) {
  width: 15%;
}

.donator-card--gold .donator-card__medallion--crown {
  width: 27%;
}

.donator-card-skeleton {
  position: relative;
  width: 100%;
  max-width: 212px;
  aspect-ratio: 0.66;
  justify-self: center;
  overflow: hidden;
  background: var(--input-form);
  clip-path: polygon(50% 0, 84% 6%, 93% 13%, 100% 20%, 100% 77%, 93% 84%, 84% 91%, 50% 100%, 16% 91%, 7% 84%, 0 77%, 0 20%, 7% 13%, 16% 6%);
}

.donator-card-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--transparent-2-w), transparent);
  animation: donatorShimmer 1.45s infinite;
  transform: translateX(-100%);
}

.donator-card-skeleton--first {
  max-width: 320px;
}

.donator-card-skeleton--side {
  max-width: 265px;
  margin-top: 78px;
}

.donator-card-skeleton--small {
  max-width: 190px;
}

.donators-top__podium--loading .donator-card-skeleton:first-child {
  justify-self: end;
}

.donators-top__podium--loading .donator-card-skeleton:last-child {
  justify-self: start;
}

.donators-top__empty {
  padding: 4rem 1rem;
  color: var(--text-secondary);
  font-size: var(--font-size-m);
  text-align: center;
}

.donators-top__actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.6rem, 5vw, 4.5rem);
}

.donators-top__pay-button {
  min-width: 190px;
  padding: 0 24px !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--money) 12%, transparent);
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.donators-top__pay-button:hover {
  background: color-mix(in srgb, var(--money-bg) 82%, var(--button-hover) 18%) !important;
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--money) 22%, transparent),
    0 8px 22px rgba(0, 0, 0, 0.2);
}

.donators-top__pay-button .donators-top__pay-label {
  color: var(--money) !important;
}

@keyframes donatorShimmer {
  to {
    transform: translateX(100%);
  }
}

@keyframes donatorProgressSheen {
  0%, 58% {
    transform: translateX(-110%);
  }
  82%, 100% {
    transform: translateX(110%);
  }
}

@keyframes donatorAmbientSweep {
  0%, 62% {
    left: -70%;
    opacity: 0;
  }
  68% {
    opacity: 0.22;
  }
  79% {
    opacity: 0.42;
  }
  91% {
    left: 128%;
    opacity: 0;
  }
  100% {
    left: 128%;
    opacity: 0;
  }
}

@keyframes donatorCardBreath {
  0%, 100% {
    filter: drop-shadow(0 16px 27px rgba(0, 0, 0, 0.32));
  }
  50% {
    filter: drop-shadow(0 18px 31px rgba(0, 0, 0, 0.38));
  }
}

@keyframes donatorGoldBreath {
  0%, 100% {
    filter: drop-shadow(0 20px 36px rgba(128, 82, 0, 0.34));
  }
  50% {
    filter: drop-shadow(0 24px 44px rgba(162, 108, 6, 0.46));
  }
}

@keyframes donatorAvatarFrame {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.05);
  }
}

@keyframes donatorGoldAvatarFrame {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(255, 202, 76, 0));
  }
  50% {
    filter: brightness(1.07) drop-shadow(0 0 7px rgba(255, 202, 76, 0.24));
  }
}

@keyframes donatorBadgeFloat {
  0%, 100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    transform: translateX(-50%) translateY(-2px) scale(1.035);
  }
}

@keyframes donatorCrownFloat {
  0%, 100% {
    transform: translateX(-50%) translateY(0) scale(1);
    filter: drop-shadow(0 0 10px rgba(248, 206, 90, 0.28));
  }
  50% {
    transform: translateX(-50%) translateY(-4px) scale(1.045);
    filter: drop-shadow(0 0 18px rgba(248, 206, 90, 0.52));
  }
}


@keyframes donatorEdgePulse {
  0%, 100% {
    opacity: 0.58;
    transform: translateX(-50%) scaleX(0.94);
  }
  50% {
    opacity: 0.9;
    transform: translateX(-50%) scaleX(1.07);
  }
}


@keyframes donatorSurfaceDrift {
  0%, 100% {
    background-position: 50% 0%, 0% 48%, 50% 30%, 0 0;
  }
  50% {
    background-position: 50% 0%, 100% 54%, 54% 27%, 0 0;
  }
}

@keyframes donatorRankPulse {
  0%, 100% {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  }
  50% {
    text-shadow:
      0 2px 12px rgba(0, 0, 0, 0.42),
      0 0 10px color-mix(in srgb, var(--card-edge) 18%, transparent);
  }
}

@keyframes donatorNameGlow {
  0%, 100% {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.34);
  }
  50% {
    text-shadow:
      0 2px 12px rgba(0, 0, 0, 0.38),
      0 0 8px color-mix(in srgb, var(--card-edge) 14%, transparent);
  }
}

@keyframes donatorProgressFrame {
  0%, 100% {
    filter: brightness(0.98);
  }
  50% {
    filter: brightness(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .donator-card,
  .donator-card::after,
  .donator-card__avatar,
  .donators-top__pay-button {
    transition: none;
  }

  .donator-card,
  .donator-card::before,
  .donator-card__surface,
  .donator-card__surface::after,
  .donator-card__rank,
  .donator-card__name,
  .donator-card__progress,
  .donator-card__avatar-ring,
  .donator-card__medallion,
  .donator-card-skeleton::after,
  .donator-card__progress-fill::after {
    animation: none;
  }
}

@media (max-width: 1250px) {
  .donators-top__row--bottom {
    grid-template-columns: repeat(4, minmax(145px, 1fr));
    max-width: 920px;
  }
}

@media (max-width: 980px) {
  .donators-top__podium {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
  }

  .donators-top__row--middle {
    grid-template-columns: repeat(3, minmax(145px, 1fr));
    max-width: 780px;
  }
}

@media (max-width: 680px) {
  .donators-top {
    padding-top: 0.45rem;
  }

  .donators-top__header {
    margin-bottom: 2.4rem;
  }

  .donators-top__title {
    font-size: clamp(1.85rem, 9vw, 2.5rem);
  }

  .donators-top__subtitle {
    max-width: 92%;
    font-size: 0.82rem;
  }

  .donators-top__filters {
    width: 100%;
  }

  .donators-top__filter {
    padding: 0 0.55rem;
    font-size: 0.72rem;
  }

  .donators-top__podium,
  .donators-top__row--middle,
  .donators-top__row--bottom {
    grid-template-columns: repeat(2, minmax(135px, 1fr));
    align-items: start;
    max-width: 490px;
  }

  .donator-card--gold,
  .donator-card--silver,
  .donator-card--bronze,
  .donator-card--regular,
  .donator-card--small {
    width: 100%;
    max-width: 214px;
    margin-top: 0;
    justify-self: center;
  }

  .donators-top__podium .donator-card--gold {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 240px;
  }

  .donators-top__podium .donator-card--silver,
  .donators-top__podium .donator-card--bronze {
    grid-row: 2;
  }

  .donators-top__podium--loading .donator-card-skeleton--side {
    margin-top: 0;
  }

  .donators-top__podium--loading .donator-card-skeleton--first {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 240px;
  }

  .donators-top__podium--loading .donator-card-skeleton--side {
    grid-row: 2;
    width: 100%;
    max-width: 214px;
    justify-self: center;
  }

  .donators-top__pay-button {
    min-width: 180px;
  }
}

/* v8: enhanced first-place presentation */
.donator-card--gold .donator-card__surface {
  background:
    radial-gradient(ellipse at 50% 3%, rgba(255, 245, 202, 0.23), transparent 24%),
    radial-gradient(circle at 50% 29%, rgba(255, 211, 77, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.028) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(315deg, rgba(255,255,255,.018) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(118deg, transparent 24%, rgba(255, 218, 111, 0.12) 44%, rgba(255, 255, 255, 0.075) 50%, transparent 67%),
    linear-gradient(160deg, #9b6917, #3b2508 74%);
  background-size: 100% 100%, 112% 112%, 18px 18px, 18px 18px, 220% 220%, 100% 100%;
  animation: donatorGoldSurfaceDrift 8.2s ease-in-out infinite;
}

.donator-card--gold .donator-card__surface::before {
  opacity: 0.82;
  box-shadow:
    inset 0 0 0 1px rgba(255, 235, 158, 0.08),
    0 0 22px rgba(255, 194, 36, 0.07);
}

.donator-card--gold .donator-card__surface::after {
  width: 61%;
  box-shadow:
    0 0 11px rgba(255, 226, 137, 0.32),
    0 13px 27px rgba(244, 176, 28, 0.16);
}

.donator-card--gold .donator-card__name {
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.34),
    0 0 14px rgba(255, 221, 113, 0.11);
}

.donator-card__champion-spine {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 60.5%;
  width: 1px;
  height: 14.5%;
  transform: translate3d(-50%, 0, 10px);
  background: linear-gradient(to bottom, transparent, rgba(255, 222, 121, 0.54) 26%, rgba(255, 214, 93, 0.18) 84%, transparent);
  box-shadow: 0 0 10px rgba(255, 209, 69, 0.18);
  opacity: 0.9;
  pointer-events: none;
}

.donator-card__champion-spine::before,
.donator-card__champion-spine::after,
.donator-card__champion-spine > span {
  content: "";
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 231, 145, 0.76);
  background: rgba(105, 67, 6, 0.75);
  box-shadow:
    0 0 8px rgba(255, 215, 84, 0.36),
    inset 0 0 3px rgba(255, 244, 195, 0.34);
  transform: translateX(-50%) rotate(45deg);
}

.donator-card__champion-spine::before { top: 12%; }
.donator-card__champion-spine > span { top: 48%; width: 5px; height: 5px; opacity: .72; }
.donator-card__champion-spine::after { bottom: 4%; }

.donator-card__champion-ornament {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 5.4%;
  width: 58%;
  aspect-ratio: 1.14;
  pointer-events: none;
  transform: translate3d(calc(-50% + var(--name-x)), var(--name-y), 18px);
  transform-style: preserve-3d;
  transition: transform 90ms linear;
}

.donator-card__champion-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.donator-card__champion-ring--outer {
  width: 62%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 226, 126, 0.29);
  background:
    conic-gradient(from 0deg,
      transparent 0 8%,
      rgba(255, 222, 112, 0.52) 8.5% 9.5%,
      transparent 10% 24%,
      rgba(255, 240, 180, 0.36) 24.5% 25.5%,
      transparent 26% 49%,
      rgba(255, 210, 63, 0.48) 49.5% 50.5%,
      transparent 51% 74%,
      rgba(255, 238, 170, 0.38) 74.5% 75.5%,
      transparent 76% 100%);
  box-shadow:
    0 0 18px rgba(255, 196, 40, 0.13),
    inset 0 0 18px rgba(255, 220, 105, 0.05);
  opacity: 0.72;
  animation: donatorChampionRing 18s linear infinite;
}

.donator-card__champion-ring--inner {
  width: 47%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 234, 159, 0.34);
  box-shadow:
    0 0 15px rgba(255, 211, 70, 0.10),
    inset 0 0 12px rgba(255, 232, 147, 0.06);
  opacity: .64;
  animation: donatorChampionRingReverse 13s linear infinite;
}

.donator-card__laurel {
  position: absolute;
  top: 20%;
  width: 31%;
  height: 70%;
  overflow: visible;
  fill: rgba(255, 225, 123, 0.72);
  stroke: rgba(255, 224, 118, 0.60);
  stroke-width: 1.25;
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.28))
    drop-shadow(0 0 5px rgba(255, 204, 53, 0.12));
  opacity: .74;
  animation: donatorLaurelBreath 4.8s ease-in-out infinite;
}

.donator-card__laurel-stem {
  fill: none;
  stroke-width: 2;
  opacity: .78;
}

.donator-card__laurel--left {
  left: 4%;
  transform: rotate(-7deg);
}

.donator-card__laurel--right {
  right: 4%;
  transform: scaleX(-1) rotate(-7deg);
}

.donator-card__champion-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  border: 1px solid rgba(255, 241, 189, 0.8);
  background: rgba(255, 219, 101, 0.76);
  box-shadow: 0 0 9px rgba(255, 208, 64, 0.55);
  opacity: 0;
  animation: donatorChampionSpark 3.8s ease-in-out infinite;
}

.donator-card__champion-spark--1 { left: 21%; top: 26%; animation-delay: -.6s; }
.donator-card__champion-spark--2 { right: 20%; top: 31%; animation-delay: -1.8s; transform: rotate(45deg) scale(.72); }
.donator-card__champion-spark--3 { left: 27%; bottom: 19%; animation-delay: -2.7s; transform: rotate(45deg) scale(.58); }
.donator-card__champion-spark--4 { right: 28%; bottom: 17%; animation-delay: -3.3s; transform: rotate(45deg) scale(.52); }

.donator-card--gold .donator-card__medallion--crown {
  z-index: 3;
  bottom: 10.4%;
  width: 31%;
  color: #ffe88f;
  filter:
    drop-shadow(0 0 10px rgba(248, 206, 90, 0.32))
    drop-shadow(0 4px 8px rgba(73, 42, 0, 0.42));
}

.donator-card--gold:hover .donator-card__champion-ring--outer {
  opacity: .92;
  box-shadow:
    0 0 25px rgba(255, 196, 40, 0.23),
    inset 0 0 20px rgba(255, 220, 105, 0.08);
}

.donator-card--gold:hover .donator-card__laurel {
  opacity: .92;
}

@keyframes donatorGoldSurfaceDrift {
  0%, 100% {
    background-position: 50% 0%, 50% 29%, 0 0, 9px 9px, 0% 48%, 0 0;
  }
  50% {
    background-position: 50% 0%, 54% 27%, 4px 3px, 13px 12px, 100% 54%, 0 0;
  }
}

@keyframes donatorChampionRing {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes donatorChampionRingReverse {
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes donatorLaurelBreath {
  0%, 100% { opacity: .67; filter: drop-shadow(0 2px 4px rgba(0,0,0,.28)) drop-shadow(0 0 4px rgba(255, 204, 53, 0.08)); }
  50% { opacity: .86; filter: drop-shadow(0 2px 4px rgba(0,0,0,.28)) drop-shadow(0 0 8px rgba(255, 204, 53, 0.20)); }
}

@keyframes donatorChampionSpark {
  0%, 100% { opacity: 0; filter: brightness(.9); }
  28% { opacity: .22; }
  48% { opacity: .95; filter: brightness(1.5); }
  68% { opacity: .16; }
}

@media (prefers-reduced-motion: reduce) {
  .donator-card__champion-ring,
  .donator-card__laurel,
  .donator-card__champion-spark {
    animation: none;
  }
}

/* v9: premium podium treatment for #2 and #3 */
.donator-card--silver .donator-card__surface,
.donator-card--bronze .donator-card__surface {
  background-size: 100% 100%, 16px 16px, 220% 220%, 112% 112%, 100% 100%;
}

.donator-card--silver .donator-card__surface {
  background:
    radial-gradient(ellipse at 50% 3%, rgba(245, 249, 255, 0.20), transparent 26%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.026) 0 1px, transparent 1px 8px),
    linear-gradient(118deg, transparent 24%, rgba(224, 232, 242, 0.11) 44%, rgba(255,255,255,.08) 50%, transparent 67%),
    radial-gradient(circle at 50% 30%, rgba(213, 224, 235, 0.28), transparent 38%),
    linear-gradient(160deg, #626b77, #1d232a 74%);
  animation: donatorSilverSurfaceDrift 9.4s ease-in-out infinite;
}

.donator-card--bronze .donator-card__surface {
  background:
    radial-gradient(ellipse at 50% 3%, rgba(255, 222, 199, 0.17), transparent 26%),
    repeating-radial-gradient(circle at 30% 20%, rgba(255,255,255,.018) 0 1px, transparent 1px 7px),
    linear-gradient(118deg, transparent 24%, rgba(224, 139, 91, 0.10) 44%, rgba(255,255,255,.065) 50%, transparent 67%),
    radial-gradient(circle at 50% 30%, rgba(222, 119, 66, 0.25), transparent 38%),
    linear-gradient(160deg, #7f4932, #25160f 74%);
  animation: donatorBronzeSurfaceDrift 9.8s ease-in-out infinite;
}

.donator-card--silver .donator-card__surface::before,
.donator-card--bronze .donator-card__surface::before {
  opacity: .72;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-edge) 8%, transparent);
}

.donator-card--silver .donator-card__surface::after,
.donator-card--bronze .donator-card__surface::after {
  width: 56%;
}

.donator-card--silver .donator-card__name,
.donator-card--bronze .donator-card__name {
  text-shadow:
    0 2px 10px rgba(0,0,0,.40),
    0 0 12px color-mix(in srgb, var(--card-edge) 12%, transparent);
}

.donator-card__podium-spine {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 61.5%;
  width: 1px;
  height: 17.5%;
  transform: translate3d(-50%, 0, 10px);
  background: linear-gradient(to bottom,
    transparent,
    color-mix(in srgb, var(--card-edge) 56%, transparent) 26%,
    color-mix(in srgb, var(--card-edge) 20%, transparent) 82%,
    transparent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--card-edge) 15%, transparent);
  opacity: .68;
  pointer-events: none;
}

.donator-card__podium-spine::before,
.donator-card__podium-spine::after,
.donator-card__podium-spine > span {
  content: "";
  position: absolute;
  left: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid color-mix(in srgb, var(--card-edge) 75%, transparent);
  background: color-mix(in srgb, var(--card-surface-2) 78%, var(--card-edge) 22%);
  box-shadow: 0 0 7px color-mix(in srgb, var(--card-edge) 30%, transparent);
  transform: translateX(-50%) rotate(45deg);
}

.donator-card__podium-spine::before { top: 12%; }
.donator-card__podium-spine > span { top: 50%; width: 4px; height: 4px; opacity: .65; }
.donator-card__podium-spine::after { bottom: 3%; }

.donator-card__podium-ornament {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 5.6%;
  width: 52%;
  aspect-ratio: 1.13;
  color: var(--card-edge);
  pointer-events: none;
  transform: translate3d(calc(-50% + var(--name-x)), var(--name-y), 17px);
  transform-style: preserve-3d;
  transition: transform 90ms linear, opacity 180ms ease;
}

.donator-card__podium-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--card-edge) 35%, transparent);
  border-radius: 50%;
  background: conic-gradient(from 18deg,
    transparent 0 11%,
    color-mix(in srgb, var(--card-edge) 58%, transparent) 11.5% 12.4%,
    transparent 13% 37%,
    color-mix(in srgb, var(--card-edge) 42%, transparent) 37.5% 38.2%,
    transparent 39% 62%,
    color-mix(in srgb, var(--card-edge) 50%, transparent) 62.5% 63.3%,
    transparent 64% 88%,
    color-mix(in srgb, var(--card-edge) 45%, transparent) 88.5% 89.2%,
    transparent 90% 100%);
  box-shadow:
    0 0 16px color-mix(in srgb, var(--card-edge) 12%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--card-edge) 5%, transparent);
  opacity: .62;
  transform: translate(-50%, -50%);
  animation: donatorPodiumHalo 16s linear infinite;
}

.donator-card__podium-arc {
  position: absolute;
  top: 50%;
  width: 30%;
  height: 52%;
  border-top: 1px solid color-mix(in srgb, var(--card-edge) 56%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--card-edge) 26%, transparent);
  opacity: .72;
}

.donator-card__podium-arc--left {
  left: 5%;
  border-left: 1px solid color-mix(in srgb, var(--card-edge) 48%, transparent);
  border-radius: 70% 0 0 70%;
  transform: translateY(-50%) rotate(-8deg);
}

.donator-card__podium-arc--right {
  right: 5%;
  border-right: 1px solid color-mix(in srgb, var(--card-edge) 48%, transparent);
  border-radius: 0 70% 70% 0;
  transform: translateY(-50%) rotate(8deg);
}

.donator-card__podium-laurel {
  position: absolute;
  top: 20%;
  width: 27%;
  height: 66%;
  overflow: visible;
  fill: color-mix(in srgb, var(--card-edge) 68%, transparent);
  stroke: color-mix(in srgb, var(--card-edge) 58%, transparent);
  stroke-width: 1.2;
  filter:
    drop-shadow(0 2px 3px rgba(0,0,0,.28))
    drop-shadow(0 0 4px color-mix(in srgb, var(--card-edge) 15%, transparent));
  opacity: .58;
  animation: donatorPodiumLaurel 5.5s ease-in-out infinite;
}

.donator-card__podium-laurel-stem {
  fill: none;
  stroke-width: 2;
  opacity: .72;
}

.donator-card__podium-laurel--left {
  left: 5.5%;
  transform-origin: 50% 100%;
  transform: rotate(-4deg);
}

.donator-card__podium-laurel--right {
  right: 5.5%;
  transform-origin: 50% 100%;
  transform: rotate(4deg) scaleX(-1);
}

.donator-card__podium-leaves ellipse {
  stroke: none;
}

.donator-card__podium-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border: 1px solid color-mix(in srgb, var(--card-edge) 75%, #fff 25%);
  background: color-mix(in srgb, var(--card-edge) 78%, #fff 22%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--card-edge) 42%, transparent);
  transform: rotate(45deg);
  opacity: 0;
  animation: donatorPodiumSpark 4.4s ease-in-out infinite;
}

.donator-card__podium-spark--1 { left: 20%; top: 30%; animation-delay: -.8s; }
.donator-card__podium-spark--2 { right: 18%; top: 35%; animation-delay: -2.1s; transform: rotate(45deg) scale(.72); }
.donator-card__podium-spark--3 { left: 50%; bottom: 11%; animation-delay: -3.2s; transform: translateX(-50%) rotate(45deg) scale(.62); }

.donator-card--silver .donator-card__medallion,
.donator-card--bronze .donator-card__medallion {
  z-index: 3;
  bottom: 12.2%;
  width: 20.5%;
  filter:
    drop-shadow(0 3px 6px rgba(0,0,0,.42))
    drop-shadow(0 0 9px color-mix(in srgb, var(--card-edge) 24%, transparent));
}

.donator-card--silver:hover .donator-card__podium-ornament,
.donator-card--bronze:hover .donator-card__podium-ornament {
  opacity: 1;
}

.donator-card--silver:hover .donator-card__podium-halo,
.donator-card--bronze:hover .donator-card__podium-halo {
  opacity: .86;
  box-shadow:
    0 0 21px color-mix(in srgb, var(--card-edge) 20%, transparent),
    inset 0 0 16px color-mix(in srgb, var(--card-edge) 8%, transparent);
}

.donator-card--silver:hover .donator-card__podium-laurel,
.donator-card--bronze:hover .donator-card__podium-laurel {
  opacity: .78;
}

@keyframes donatorSilverSurfaceDrift {
  0%, 100% { background-position: 50% 0%, 0 0, 0% 48%, 50% 30%, 0 0; }
  50% { background-position: 52% 1%, 6px 3px, 100% 52%, 54% 28%, 0 0; }
}

@keyframes donatorBronzeSurfaceDrift {
  0%, 100% { background-position: 50% 0%, 0 0, 0% 48%, 50% 30%, 0 0; }
  50% { background-position: 48% 1%, 5px 4px, 100% 53%, 46% 29%, 0 0; }
}

@keyframes donatorPodiumHalo {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes donatorPodiumLaurel {
  0%, 100% { opacity: .52; filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)) drop-shadow(0 0 3px color-mix(in srgb, var(--card-edge) 10%, transparent)); }
  50% { opacity: .70; filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)) drop-shadow(0 0 7px color-mix(in srgb, var(--card-edge) 25%, transparent)); }
}

@keyframes donatorPodiumSpark {
  0%, 100% { opacity: 0; filter: brightness(.9); }
  34% { opacity: .18; }
  50% { opacity: .88; filter: brightness(1.42); }
  68% { opacity: .10; }
}

@media (prefers-reduced-motion: reduce) {
  .donator-card--silver .donator-card__surface,
  .donator-card--bronze .donator-card__surface,
  .donator-card__podium-halo,
  .donator-card__podium-laurel,
  .donator-card__podium-spark {
    animation: none;
  }
}

@keyframes donatorsBackdropGrid {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 58px 58px, 58px 58px; }
}

@keyframes donatorsBackdropDust {
  0% { transform: translate3d(-0.8%, -0.6%, 0) scale(1); opacity: .24; }
  45% { opacity: .38; }
  100% { transform: translate3d(1.2%, 1.1%, 0) scale(1.025); opacity: .30; }
}

@keyframes donatorsAmbientGold {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); opacity: .50; }
  50% { transform: translateX(-50%) translateY(2.2%) scale(1.045); opacity: .68; }
}

@keyframes donatorsAmbientSideLeft {
  0%, 100% { transform: translate3d(-2%, 0, 0) scale(1); opacity: .38; }
  50% { transform: translate3d(3%, 3%, 0) scale(1.08); opacity: .58; }
}

@keyframes donatorsAmbientSideRight {
  0%, 100% { transform: translate3d(2%, 1%, 0) scale(1.03); opacity: .40; }
  50% { transform: translate3d(-3%, -2%, 0) scale(.98); opacity: .57; }
}

@keyframes donatorsAmbientLower {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .34; }
  50% { transform: translateX(-50%) scaleX(1.08); opacity: .50; }
}

@media (prefers-reduced-motion: reduce) {
  .donators-top__backdrop::before,
  .donators-top__backdrop::after,
  .donators-top__ambient {
    animation: none !important;
  }
}


/* v11: performance pass --------------------------------------------------
   Keep the visual design, but stop continuously repainting all 15 cards.
   Idle motion is restricted to compositor-friendly transform/opacity effects
   on the podium. Pointer-driven lighting remains active only on the hovered card. */

/* Do not permanently allocate a compositor layer for every card. */
.donator-card {
  will-change: auto;
  animation: none;
  transition: transform 220ms cubic-bezier(.2,.75,.25,1), filter 180ms ease;
  contain: layout style;
}

.donator-card:hover,
.donator-card.is-tilting {
  will-change: transform;
}

/* Background-position/filter animations trigger full repaints. Keep those
   surfaces static; the pointer highlight still gives the same depth on hover. */
.donator-card__surface,
.donator-card--gold .donator-card__surface,
.donator-card--silver .donator-card__surface,
.donator-card--bronze .donator-card__surface,
.donator-card__surface::after,
.donator-card__rank,
.donator-card__name,
.donator-card__progress,
.donator-card__avatar-ring,
.donator-card__progress-fill::after {
  animation: none;
}

/* The sweeping highlight now runs only for the card the user interacts with,
   instead of 15 independent infinite animations. */
.donator-card::before {
  animation: none;
  left: -70%;
  opacity: 0;
}

.donator-card:hover::before {
  animation: donatorAmbientSweep 2.8s ease-out 1;
}

/* Keep premium idle motion on the top three, but only with transform/opacity. */
.donator-card__medallion {
  animation: none;
}

.donator-card--gold .donator-card__medallion--crown {
  animation: donatorCrownFloatOptimized 4.2s ease-in-out infinite;
}

.donator-card--silver .donator-card__medallion,
.donator-card--bronze .donator-card__medallion {
  animation: donatorBadgeFloatOptimized 5.1s ease-in-out infinite;
}

.donator-card__champion-ring,
.donator-card__podium-halo {
  will-change: transform;
}

.donator-card__laurel {
  animation: donatorLaurelBreathOptimized 5.4s ease-in-out infinite;
}

.donator-card__podium-laurel {
  animation: donatorPodiumLaurelOptimized 6s ease-in-out infinite;
}

.donator-card__champion-spark,
.donator-card__podium-spark {
  animation-timing-function: ease-in-out;
  will-change: opacity, transform;
}

/* Large blurred moving layers are expensive. Leave the ambience visible but
   static, with one cheap opacity pulse behind first place. */
.donators-top__backdrop::before,
.donators-top__backdrop::after,
.donators-top__ambient {
  animation: none;
  will-change: auto;
}

.donators-top__ambient--gold {
  animation: donatorsAmbientGoldOptimized 9s ease-in-out infinite;
  will-change: opacity;
}

@keyframes donatorCrownFloatOptimized {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-4px) scale(1.04); }
}

@keyframes donatorBadgeFloatOptimized {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-2px) scale(1.025); }
}

@keyframes donatorLaurelBreathOptimized {
  0%, 100% { opacity: .66; }
  50% { opacity: .84; }
}

@keyframes donatorPodiumLaurelOptimized {
  0%, 100% { opacity: .54; }
  50% { opacity: .70; }
}

@keyframes donatorsAmbientGoldOptimized {
  0%, 100% { opacity: .48; }
  50% { opacity: .62; }
}

/* v12: transformed cards must be allowed to paint outside their grid cell.
   content-visibility:auto applies paint containment and clipped tilted/raised cards.
   The expensive idle effects are already disabled above, so keep rows fully paintable. */
.donators-top__podium,
.donators-top__row {
  overflow: visible;
}

.donator-card:hover,
.donator-card.is-tilting {
  z-index: 20;
}

@media (max-width: 760px) {
  /* Mobile GPUs benefit most from avoiding filters during interaction. */
  .donator-card,
  .donator-card:hover,
  .donator-card--gold {
    filter: none;
  }

  .donators-top__ambient--silver,
  .donators-top__ambient--bronze,
  .donators-top__ambient--lower,
  .donators-top__backdrop::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .donator-card--gold .donator-card__medallion--crown,
  .donator-card--silver .donator-card__medallion,
  .donator-card--bronze .donator-card__medallion,
  .donator-card__laurel,
  .donator-card__podium-laurel,
  .donators-top__ambient--gold {
    animation: none !important;
  }
}


/* v13: corrected #2/#3 podium wreath geometry and raised badges.
   The previous free-form path produced uneven, folded-looking leaves after mirroring. */
.donator-card--silver .donator-card__medallion,
.donator-card--bronze .donator-card__medallion {
  bottom: 12.2%;
}

.donator-card--silver .donator-card__podium-laurel,
.donator-card--bronze .donator-card__podium-laurel {
  top: 20%;
  width: 27%;
  height: 66%;
}

.donator-card--silver .donator-card__podium-laurel--left,
.donator-card--bronze .donator-card__podium-laurel--left {
  left: 5.5%;
  transform-origin: 50% 100%;
  transform: rotate(-4deg);
}

.donator-card--silver .donator-card__podium-laurel--right,
.donator-card--bronze .donator-card__podium-laurel--right {
  right: 5.5%;
  transform-origin: 50% 100%;
  transform: rotate(4deg) scaleX(-1);
}

/* v14: center #2/#3 badge inside the podium halo.
   With card aspect-ratio .66 and ornament geometry, 14% aligns the badge center
   with the halo center. The badge pulse keeps only scale so it does not drift
   vertically out of the circle during the idle animation. */
.donator-card--silver .donator-card__medallion,
.donator-card--bronze .donator-card__medallion {
  bottom: 14%;
}

@keyframes donatorBadgeFloatOptimized {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.025); }
}


/* v15: #2/#3 badge is now physically anchored to the exact center of the
   podium ornament instead of being positioned independently from the card.
   This keeps the badge centered inside the halo at every card size and during
   all tilt/parallax states. */
.donator-card--silver .donator-card__podium-ornament > .donator-card__medallion--podium,
.donator-card--bronze .donator-card__podium-ornament > .donator-card__medallion--podium {
  top: 50%;
  left: 50%;
  bottom: auto;
  width: 39.5%;
  z-index: 5;
  transform: translate(-50%, -50%) scale(1);
  animation: donatorPodiumBadgePulse 5.1s ease-in-out infinite;
}

@keyframes donatorPodiumBadgePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
  .donator-card--silver .donator-card__podium-ornament > .donator-card__medallion--podium,
  .donator-card--bronze .donator-card__podium-ornament > .donator-card__medallion--podium {
    animation: none !important;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* v17: optical alignment of #2/#3 badge.
   The visible badge artwork needs to sit slightly above the geometric centre
   of the podium halo. Support both the pre-v15 sibling markup and the v15+
   nested markup so the fix remains correct even while an older JS asset is
   still present in the browser cache. */
.donator-card--silver .donator-card__podium-ornament > .donator-card__medallion--podium,
.donator-card--bronze .donator-card__podium-ornament > .donator-card__medallion--podium {
  top: 49% !important;
  left: 50% !important;
  bottom: auto !important;
  width: 35% !important;
  transform: translate(-50%, -50%) scale(1) !important;
  animation: donatorPodiumBadgePulseV17 5.1s ease-in-out infinite !important;
}

/* Compatibility with the old markup where the badge was a sibling of the
   ornament. This is intentionally kept because module JS can be browser-cached. */
.donator-card--silver .donator-card__podium-ornament + .donator-card__medallion,
.donator-card--bronze .donator-card__podium-ornament + .donator-card__medallion {
  top: auto !important;
  bottom: 14.8% !important;
  width: 18.2% !important;
  transform: translateX(-50%) scale(1) !important;
  animation: donatorBadgePulseV17 5.1s ease-in-out infinite !important;
}

@keyframes donatorPodiumBadgePulseV17 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.025); }
}

@keyframes donatorBadgePulseV17 {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
  .donator-card--silver .donator-card__podium-ornament > .donator-card__medallion--podium,
  .donator-card--bronze .donator-card__podium-ornament > .donator-card__medallion--podium {
    animation: none !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
  .donator-card--silver .donator-card__podium-ornament + .donator-card__medallion,
  .donator-card--bronze .donator-card__podium-ornament + .donator-card__medallion {
    animation: none !important;
    transform: translateX(-50%) scale(1) !important;
  }
}