/* Chrome shared by the landing page and the quiz page.
 *
 * Only components that are genuinely identical on both pages live here — right
 * now that is the About button and the leaderboard's masking note. Page layout
 * does NOT: the landing page is a centred hero with an absolutely-positioned
 * side panel, while the quiz page is a content column plus a side rail in a
 * grid. Forcing those into one ruleset would mean overrides on both sides,
 * which is worse than two honest layouts.
 *
 * Loaded after the page's own stylesheet and before depth.css, so page rules can
 * still win on colour and depth.css keeps ownership of transforms.
 *
 * No inline styles anywhere: the CSP is `style-src 'self'`.
 */

:root {
  /* Warm accent for the About button — the one non-cyan control on either page. */
  --orange: #f2712c;
  --orange-deep: #dd5a17;
}

/* --- About ------------------------------------------------------------- */

/* Pinned top-left on both pages, opposite the leaderboard's top-right.
   Orange rather than the brand cyan on purpose: it is a secondary destination,
   and a second blue button would compete with the primary action for the eye.

   Points at /readme, which requires a session — an anonymous visitor is sent to
   OAuth and returned to the document afterwards, via the ?next= resumption in
   auth.js. */
#about-button {
  position: absolute;
  top: 1.75rem;
  left: 1.75rem;
  z-index: 3;
  display: inline-block;
  /* Contains the sheen sweep below to the pill. */
  overflow: hidden;
  isolation: isolate;
  padding: 0.45rem 1.35rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--orange), var(--orange-deep));
  border: 1px solid var(--orange-deep);
  color: #1a0d04;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(242, 113, 44, 0.32);
  /* transform is intentionally absent: depth.css owns this control's transform
     and its spring easing, and an ID selector here would out-specify it and
     replace the spring with a linear ease. */
  transition: box-shadow 0.15s ease;
}

#about-button:hover {
  box-shadow: 0 0 30px rgba(242, 113, 44, 0.55);
}

/* Diagonal sheen sweep, matching the Start Quiz button on /readme.
   Two differences from that blue button, both because this one is orange:
     * the band is warm white, not pure white — pure white over orange reads as
       a grey smear rather than a highlight;
     * slightly lower alpha, since the orange gradient is lighter to begin with
       and takes less light to look lit. */
#about-button > span {
  position: relative;
  z-index: 2;
}

#about-button::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -40%;
  width: 14%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 245, 235, 0) 0%,
    rgba(255, 245, 235, 0.5) 50%,
    rgba(255, 245, 235, 0) 100%
  );
  transform: skewX(-22deg);
  /* Negative delay starts the cycle a third of the way in, so this button's
     glint never fires in lockstep with another sheened control on the page —
     synchronised glints read as a rendering artefact, not an effect. */
  animation: about-sheen 5s ease-in-out -1.7s infinite;
}

@keyframes about-sheen {
  0% { left: -40%; }
  18% { left: 120%; }
  100% { left: 120%; }
}

/* --- leaderboard masking note ----------------------------------------- */

/* Sits beside the board heading and explains why the names look the way they
   do. Without it, a masked board reads as broken data rather than as a
   deliberate privacy choice — the question "why is my name spelled Ma**al"
   should not need asking. */
.board-note {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #8ea0b5;
}

.board-note.is-identified {
  color: #64c8a8;
}

@media (prefers-reduced-motion: reduce) {
  /* A repeating sweep is precisely the motion this preference exists to
     suppress. Hidden outright rather than slowed: the highlight carries no
     information, so the button is fully legible without it. */
  #about-button::after {
    animation: none;
    opacity: 0;
  }

  #about-button {
    transition: none;
  }
}