/* ============================================================
   ASCENT LOGO — the climbing mark
   The lockup with the Market Ascent climb on hover.
   Drop-in: works with or without the V2 tokens (fallbacks inline).
   ============================================================ */

.pl-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;                          /* mark to wordmark, per the V2 nav spec */
  text-decoration: none;
  border-radius: 8px;
  outline-offset: 3px;
}
.pl-logo:focus-visible { outline: 2px solid var(--pl-yellow, #F3CA07); }

.pl-logo__mark     { display: block; height: 17px; width: auto; flex: none; overflow: visible; }
.pl-logo__wordmark { display: block; height: 13px; width: auto; }

/* large lockup, hero and footer */
.pl-logo--lg { gap: 22px; }
.pl-logo--lg .pl-logo__mark     { height: 44px; }
.pl-logo--lg .pl-logo__wordmark { height: 34px; }

/* ---- rest state: white bars, Crusader summit yellow ---- */
.pl-logo__mark polygon  { fill: var(--pl-text, #F7F8F8); }
.pl-logo__mark .pl-l5   { fill: var(--pl-yellow, #F3CA07); }

/* ---- light plates: black bars. Not yet reviewed, see readme ---- */
.pl-logo--on-light .pl-logo__mark polygon { fill: var(--pl-lp-text, #08090A); }
.pl-logo--on-light .pl-logo__mark .pl-l5  { fill: var(--pl-yellow, #F3CA07); }

/* ---- the climb, on hover or keyboard focus ---- */
:is(.pl-logo:hover, .pl-logo:focus-visible) .pl-l1 { animation: pl-l1 6s var(--pl-ease, cubic-bezier(0.16,1,0.3,1)) infinite; }
:is(.pl-logo:hover, .pl-logo:focus-visible) .pl-l2 { animation: pl-l2 6s var(--pl-ease, cubic-bezier(0.16,1,0.3,1)) infinite; }
:is(.pl-logo:hover, .pl-logo:focus-visible) .pl-l3 { animation: pl-l3 6s var(--pl-ease, cubic-bezier(0.16,1,0.3,1)) infinite; }
:is(.pl-logo:hover, .pl-logo:focus-visible) .pl-l4 { animation: pl-l4 6s var(--pl-ease, cubic-bezier(0.16,1,0.3,1)) infinite; }
:is(.pl-logo:hover, .pl-logo:focus-visible) .pl-l5 { animation: pl-l5 6s var(--pl-ease, cubic-bezier(0.16,1,0.3,1)) infinite; }

/* ---- click parks the mark back at rest (see logo-climb.js) ---- */
.pl-logo[data-parked="true"] polygon { animation: none !important; }

/* level 1  Commodity   lights at 0.18s */
@keyframes pl-l1 { 0%{fill:var(--pl-text,#F7F8F8)} 3%{fill:var(--pl-yellow,#F3CA07)} 72%{fill:var(--pl-yellow,#F3CA07)} 76%{fill:var(--pl-text,#F7F8F8)} 100%{fill:var(--pl-text,#F7F8F8)} }
/* level 2  Contender   lights at 0.72s */
@keyframes pl-l2 { 0%,9%{fill:var(--pl-text,#F7F8F8)} 12%{fill:var(--pl-yellow,#F3CA07)} 72%{fill:var(--pl-yellow,#F3CA07)} 76%{fill:var(--pl-text,#F7F8F8)} 100%{fill:var(--pl-text,#F7F8F8)} }
/* level 3  Cusp        lights at 1.26s */
@keyframes pl-l3 { 0%,18%{fill:var(--pl-text,#F7F8F8)} 21%{fill:var(--pl-yellow,#F3CA07)} 72%{fill:var(--pl-yellow,#F3CA07)} 76%{fill:var(--pl-text,#F7F8F8)} 100%{fill:var(--pl-text,#F7F8F8)} }
/* level 4  Chosen      lights at 1.80s */
@keyframes pl-l4 { 0%,27%{fill:var(--pl-text,#F7F8F8)} 30%{fill:var(--pl-yellow,#F3CA07)} 72%{fill:var(--pl-yellow,#F3CA07)} 76%{fill:var(--pl-text,#F7F8F8)} 100%{fill:var(--pl-text,#F7F8F8)} }
/* level 5  Crusader    lights at 2.34s, with the arrival glow */
@keyframes pl-l5 {
  0%,36% { fill: var(--pl-text, #F7F8F8); filter: none; }
  39%    { fill: var(--pl-yellow, #F3CA07); filter: drop-shadow(0 0 18px rgba(243,202,7,0.9)); }
  72%    { fill: var(--pl-yellow, #F3CA07); filter: drop-shadow(0 0 18px rgba(243,202,7,0.9)); }
  76%    { fill: var(--pl-text, #F7F8F8); filter: none; }
  100%   { fill: var(--pl-text, #F7F8F8); filter: none; }
}

/* ---- accessibility: no motion, canonical mark ---- */
@media (prefers-reduced-motion: reduce) {
  :is(.pl-logo:hover, .pl-logo:focus-visible) polygon { animation: none !important; }
}