/* Ranks & XP page — badge grid, XP table, loyalty tiers.
   Extends redesign-base.css / redesign-atas.css; palette tokens match the
   site's dark gold shell (#0b0805 bg, #c8a878 accents). */

.rank-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 8px;
}
@media (max-width: 900px) { .rank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rank-card {
  background: #18130c;
  border: 1px solid rgba(200, 168, 120, 0.18);
  border-radius: 12px;
  padding: 18px 14px 14px;
  text-align: center;
}
.rank-card img { width: 64px; height: 64px; display: block; margin: 0 auto 10px; }
.rank-card h3 { margin: 0 0 2px; font-size: 15px; letter-spacing: 0.02em; }
.rank-card .rank-card__xp { font-size: 12px; color: #9a8f7d; display: block; }
.rank-card .rank-card__perk { font-size: 12px; color: #c8a878; display: block; margin-top: 6px; }
.rank-card--apexline { border-color: rgba(224, 199, 154, 0.45); }

.xp-table { width: 100%; border-collapse: collapse; margin: 20px 0 6px; font-size: 14px; }
.xp-table th, .xp-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(200, 168, 120, 0.14);
}
.xp-table th { color: #9a8f7d; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.xp-table td:last-child, .xp-table th:last-child { text-align: right; white-space: nowrap; color: #e0c79a; }
.xp-note { font-size: 13px; color: #9a8f7d; margin-top: 8px; }

.tier-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 4px; }
.tier {
  flex: 1 1 150px;
  background: #18130c;
  border: 1px solid rgba(200, 168, 120, 0.18);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
}
.tier strong { display: block; font-size: 16px; color: #e0c79a; margin-bottom: 2px; }

/* ==========================================================================
   MOTION LAYER — "the ladder rises"
   Scroll cascade, hover/focus level-up, one-shot Rookie→Legend demo.

   Contract:
   - CSP style-src 'self': everything lives here, nothing inline. Per-card
     variation is done with [data-rank] custom properties, never a style attr.
   - Progressive enhancement: the hidden-before-reveal state is gated on
     `html.js` (set by the head boot script), so with JS off / failed the page
     renders exactly as it did before this layer existed.
   - Reveal uses `animation ... backwards` (never `forwards`): once it has run,
     the element falls back to its DECLARATIVE state, so the hover transform is
     never pinned down by a lingering animation fill.
   - prefers-reduced-motion: reduce kills every animation and transform; the
     content stays fully visible and legible.
   - No motion exceeds 600ms.
   ========================================================================== */

/* Per-rank metal, sampled from each badge SVG's own gradient so a card's glow
   is the colour of ITS metal — bronze low, silver mid, radiant gold at Legend. */
.rank-card {
  --rk-metal: #7a7165;
  --rk-glow: rgba(122, 113, 101, 0.34);
  --rk-line: rgba(140, 130, 116, 0.42);
}
.rank-card[data-rank="apprentice"] { --rk-metal: #c07d4c; --rk-glow: rgba(213, 148, 96, 0.36); --rk-line: rgba(213, 148, 96, 0.46); }
.rank-card[data-rank="disciplined"] { --rk-metal: #c39a4c; --rk-glow: rgba(220, 179, 113, 0.36); --rk-line: rgba(220, 179, 113, 0.48); }
.rank-card[data-rank="consistent"] { --rk-metal: #c3cad3; --rk-glow: rgba(201, 210, 221, 0.32); --rk-line: rgba(201, 210, 221, 0.44); }
.rank-card[data-rank="sharp"] { --rk-metal: #dde6f0; --rk-glow: rgba(222, 233, 246, 0.36); --rk-line: rgba(222, 233, 246, 0.48); }
.rank-card[data-rank="tactician"] { --rk-metal: #edc87d; --rk-glow: rgba(237, 200, 125, 0.40); --rk-line: rgba(237, 200, 125, 0.52); }
.rank-card[data-rank="strategist"] { --rk-metal: #d4b483; --rk-glow: rgba(212, 180, 131, 0.38); --rk-line: rgba(212, 180, 131, 0.50); }
.rank-card[data-rank="legend"] { --rk-metal: #f4d189; --rk-glow: rgba(244, 209, 137, 0.52); --rk-line: rgba(255, 234, 184, 0.68); }

/* --- card chrome: stacking context for the aureole (::before) and the
       shine sweep (::after), which must sit UNDER and OVER the content. --- */
.rank-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 300ms ease,
              box-shadow 300ms ease,
              background-color 300ms ease;
}
.rank-card > * { position: relative; z-index: 1; }
.rank-card img {
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 320ms ease;
}
.rank-card .rank-card__xp { font-variant-numeric: tabular-nums; }

/* --- level-up: hover, keyboard focus, and the scripted demo pulse --- */
.rank-card:hover,
.rank-card:focus-visible,
.rank-card.is-levelup {
  transform: translateY(-5px);
  background: #1c160e;
  border-color: var(--rk-line);
  box-shadow: 0 14px 30px -16px var(--rk-glow), 0 0 0 1px var(--rk-line) inset;
}
.rank-card:hover img,
.rank-card:focus-visible img,
.rank-card.is-levelup img {
  transform: translateY(-4px) scale(1.07);
  filter: drop-shadow(0 8px 14px var(--rk-glow));
}
.rank-card:focus-visible { outline: 2px solid var(--rk-metal); outline-offset: 3px; }
.rank-card:hover .rank-card__perk,
.rank-card:focus-visible .rank-card__perk,
.rank-card.is-levelup .rank-card__perk { color: var(--rk-metal); }

/* --- shine sweep: a single diagonal pass of light across the plate --- */
.rank-card::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -70%;
  right: -70%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.10) 47%,
    rgba(255, 255, 255, 0.03) 55%,
    rgba(255, 255, 255, 0) 62%);
}
html.js .rank-card:hover::after,
html.js .rank-card:focus-visible::after,
html.js .rank-card.is-levelup::after {
  animation: rk-shine 560ms cubic-bezier(0.35, 0.05, 0.30, 1) 1;
}
@keyframes rk-shine {
  0% { transform: translateX(-46%); opacity: 0; }
  14% { opacity: 1; }
  100% { transform: translateX(46%); opacity: 0; }
}

/* --- Legend: the top of the ladder gets its own light --- */
html.js .rank-card--apexline::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 50%;
  width: 132px;
  height: 132px;
  margin-left: -66px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(244, 209, 137, 0.20) 0%,
    rgba(244, 209, 137, 0.07) 44%,
    rgba(244, 209, 137, 0) 72%);
  animation: rk-aureole 4600ms ease-in-out infinite;
}
@keyframes rk-aureole {
  0%, 100% { opacity: 0.42; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.06); }
}
.rank-card--apexline:hover,
.rank-card--apexline:focus-visible,
.rank-card--apexline.is-levelup {
  box-shadow: 0 18px 40px -18px rgba(244, 209, 137, 0.60), 0 0 0 1px rgba(255, 234, 184, 0.62) inset;
}

/* --- scroll cascade: each element climbs into place -----------------------
   `backwards` (not `forwards`) is deliberate — see the contract note above. */
html.js [data-rk-reveal]:not(.is-in) { opacity: 0; }
html.js [data-rk-reveal].is-in {
  animation: rk-rise 560ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
@keyframes rk-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
/* Table rows travel a shorter distance so the table never "jumps". */
html.js .xp-table tr[data-rk-reveal].is-in {
  animation-name: rk-rise-soft;
  animation-duration: 420ms;
}
@keyframes rk-rise-soft {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* --- loyalty tiers: the window fills as you reach it --- */
.tier { position: relative; overflow: hidden; --rk-fill: 1; }
.tier:nth-child(1) { --rk-fill: 0.26; }
.tier:nth-child(2) { --rk-fill: 0.53; }
.tier:nth-child(3) { --rk-fill: 0.79; }
.tier:nth-child(4) { --rk-fill: 1; }
.tier::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(200, 168, 120, 0.22), #e0c79a);
  transform: scaleX(var(--rk-fill));
  transform-origin: left center;
}
html.js .tier[data-rk-reveal]:not(.is-in)::after { transform: scaleX(0); }
html.js .tier[data-rk-reveal].is-in::after {
  animation: rk-fill 560ms cubic-bezier(0.22, 0.61, 0.36, 1) 160ms both;
}
@keyframes rk-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(var(--rk-fill)); }
}
.tier { transition: border-color 300ms ease, background-color 300ms ease; }
.tier:hover { border-color: rgba(224, 199, 154, 0.42); background: #1c160e; }

/* --- reduced motion: everything visible, nothing moves ------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-rk-reveal]:not(.is-in),
  html.js [data-rk-reveal].is-in { opacity: 1; animation: none; transform: none; }
  html.js .xp-table tr[data-rk-reveal].is-in { animation: none; }
  html.js .tier[data-rk-reveal]:not(.is-in)::after,
  html.js .tier[data-rk-reveal].is-in::after {
    animation: none;
    transform: scaleX(var(--rk-fill));
  }
  html.js .rank-card--apexline::before { animation: none; opacity: 0.55; transform: none; }
  html.js .rank-card:hover::after,
  html.js .rank-card:focus-visible::after,
  html.js .rank-card.is-levelup::after { animation: none; opacity: 0; }
  .rank-card, .rank-card img, .tier { transition: none; }
  .rank-card:hover,
  .rank-card:focus-visible,
  .rank-card.is-levelup { transform: none; }
  .rank-card:hover img,
  .rank-card:focus-visible img,
  .rank-card.is-levelup img { transform: none; }
}

/* Fond unifie - meme raison que redesign-platforms.css : plat, sans bande. */
html, body { background: #0b0805; }