/* Theme. To restyle, set any --fx-* variable on :root (every feature on the site)
   or on .fx-stack (this feature only). The values here are the defaults. */
.fx-stack {
  --_accent: var(--fx-accent, #d4af37);
  --_text: var(--fx-text, #f5f5f5);
  --_panel: var(--fx-panel, #181818);
  --_line: var(--fx-line, rgba(255,255,255,.15));
  --_space: var(--fx-space, 16px);
  --_radius: var(--fx-radius, 6px);
  --_top: var(--fx-stack-top, var(--fx-stack-top-set, 16px));
  --_peek: var(--fx-stack-peek, var(--fx-stack-peek-set, 14px));
  --_shadow: var(--fx-stack-shadow, 0 -14px 34px rgba(0,0,0,.35));
}

/* A card that fits on screen sticks below the header; each one sits a little lower than the last,
   so the edges of the covered cards stay visible like a deck. */
.fx-stack > .fx-stack-card.is-stuck {
  position: sticky;
  top: calc(var(--fx-header-offset, 0px) + var(--_top) + var(--fx-stack-n, 0) * var(--_peek));
  transform-origin: center top;
}

/* The feature's own card look (SETTINGS.skin). :where() keeps these rules weak, so anything the site
   already sets on its cards wins. A card needs a solid background to cover the one beneath it. */
:where(.fx-stack-skin > .fx-stack-card) {
  padding: calc(var(--_space) * 1.5);
  background: var(--_panel);
  color: var(--_text);
  border: 1px solid var(--_line);
  border-radius: calc(var(--_radius) * 2);
}
:where(.fx-stack-skin > .fx-stack-card + .fx-stack-card) { margin-top: var(--_space); }
.fx-stack-skin > .fx-stack-card.is-stuck { box-shadow: var(--_shadow); }
.fx-stack-skin > .fx-stack-card :focus-visible { outline: 3px solid var(--_accent); outline-offset: 2px; }

/* The script does nothing when reduced motion is on; this is a second safety net */
@media (prefers-reduced-motion: reduce) {
  .fx-stack > .fx-stack-card { position: static !important; scale: none !important; clip-path: none !important; }
}