/* ============================================================
   03 - RANKS: auto-cycling showcase carousel (3-up coverflow).
   Center rank in focus; the two neighbours zoomed out; loops.
   True rank colour = --rc (set inline per card); readable name
   colour = --rc-ink. Positions are set inline by 03-ranks.js.
   ============================================================ */

.ranks-carousel {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 6px;
}

/* stage holds the absolutely-positioned cards; edges fade out */
.ranks-stage {
  position: relative;
  height: 340px;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
          mask: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
}

.rank-card {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(232px, 76vw, 290px);
  transform: translate(-50%, -50%);          /* JS overrides with slot transform */
  opacity: 0;                                 /* JS reveals; [data-i="0"] shown pre-JS below */
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  padding: 28px 24px 24px;
  border-radius: var(--r-lg);
  text-align: center;
  cursor: pointer;
  background:
    radial-gradient(120% 92% at 50% 0%, color-mix(in srgb, var(--rc) 18%, transparent), transparent 62%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--rc) 32%, var(--hairline));
  box-shadow: var(--shadow-md), 0 0 26px -14px color-mix(in srgb, var(--rc) 34%, transparent);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  transition: transform .62s var(--e-out), opacity .5s var(--e-out), box-shadow .5s var(--e-out);
}
/* All 21 rank cards are in the DOM at once, but only five are ever near the
   stage; the rest sit at opacity 0. They were still each running a 20px backdrop
   blur, and each carried `will-change`, which pinned 21 compositor layers for the
   life of the page. The far ones now drop the blur (invisible at opacity 0) and
   nothing is pre-promoted: a transform/opacity transition gets composited on its
   own while it runs, which is exactly when it is needed. */
.rank-card.is-far { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
/* initial focus before JS runs (and a graceful no-JS fallback) */
.rank-card[data-i="0"] { opacity: 1; z-index: 30; }

/* fallback when color-mix is unsupported */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  .rank-card { border-color: var(--hairline-strong); box-shadow: var(--shadow-md), var(--glow-soft); background: var(--surface); }
}

.rank-card.is-active {
  cursor: default;
  border-color: color-mix(in srgb, var(--rc) 55%, var(--hairline-strong));
  box-shadow: var(--shadow-lg), 0 0 38px -14px color-mix(in srgb, var(--rc) 42%, transparent);
}

.rank-num {
  position: absolute; top: 15px; right: 17px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .05em;
  color: var(--text-faint);
}

.rank-ic {
  display: grid; place-items: center;
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rc) 32%, transparent), transparent 66%);
}
.rank-ic img {
  width: 78px; height: 78px; object-fit: contain;
  filter: drop-shadow(0 5px 12px color-mix(in srgb, var(--rc) 38%, transparent));
}

.rank-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  color: var(--rc-ink);
  text-shadow: 0 1px 10px color-mix(in srgb, var(--rc) 26%, transparent), 0 1px 2px rgba(0,0,0,.65);
}

.rank-range { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rank-range-k { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.rank-range-v { font-size: 17px; font-weight: 700; color: var(--text); }

.rank-wl { display: flex; gap: 10px; width: 100%; margin-top: 2px; }
.rank-wl-item {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 8px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--hairline);
}
.rank-wl-k { color: var(--text-mute); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; font-weight: 700; }
.rank-wl-v { font-size: 14.5px; font-weight: 800; }
.rank-win  .rank-wl-v { color: var(--safe); }
.rank-loss .rank-wl-v { color: var(--danger); }

/* zoned-out neighbours read as clean previews (icon + name only) */
.rank-card:not(.is-active) .rank-range,
.rank-card:not(.is-active) .rank-wl { opacity: 0; transition: opacity .3s var(--e-out); }

/* ---------- nav arrows (centred on the stage) ---------- */
.ranks-nav {
  position: absolute; top: 170px; transform: translateY(-50%);
  z-index: 40;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(12,16,24,.62); border: 1px solid var(--hairline-strong);
  color: var(--text); cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background var(--t), border-color var(--t), transform var(--t) var(--e-spring);
}
.ranks-nav:hover { background: var(--surface-3); border-color: color-mix(in srgb, var(--accent) 60%, var(--hairline-strong)); }
.ranks-nav:active { transform: translateY(-50%) scale(.9); }
.ranks-nav svg { width: 22px; height: 22px; }
.ranks-prev { left: 0; }
.ranks-next { right: 0; }
@media (min-width: 920px) { .ranks-prev { left: -16px; } .ranks-next { right: -16px; } }

/* ---------- dots ---------- */
.ranks-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 24px; }
.ranks-dot {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: var(--hairline-strong); cursor: pointer;
  transition: transform var(--t) var(--e-spring), background var(--t), width var(--t);
}
.ranks-dot:hover { background: var(--text-mute); transform: scale(1.3); }
.ranks-dot.is-active {
  width: 24px; border-radius: var(--r-pill);
  background: var(--rc, var(--accent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 70%, transparent);
}

/* ---------- responsive ---------- */
@media (max-width: 560px) {
  .ranks-stage { height: 330px; }
  .ranks-nav { top: 165px; width: 40px; height: 40px; }
  .ranks-nav svg { width: 20px; height: 20px; }
  .rank-name { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .rank-card { transition: opacity .2s linear; }
}