/* The examples, as a deck you can turn.
 *
 * This was a scroll-driven stack, and the scroll was the problem: the section
 * owned five viewports of scrolling and the wheel stopped doing what the wheel
 * does. Now the section is one screen tall and the deck turns on its own time,
 * or when somebody clicks a page, a mark, an arrow, or swipes.
 *
 * `data-depth` says how far back a page stands (0 in front); the controller
 * moves the attribute and the rules below do the rest. One explicit rule per
 * depth rather than arithmetic over a custom property: a layout you can see
 * written down is easier to read, and the same choice the sign-in deck made.
 *
 * Everything here reads the semantic layer (ADR 016), so the section follows
 * the three dark-mode states with no rule of its own. */

.lp-stack {
  max-width: 62rem;
  margin: 0 auto;
  padding: 5rem 1.5rem 7rem;
}

.lp-stack-intro { max-width: 40rem; margin: 0 0 3rem; }

.lp-kicker {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nt-color-accent, #007acc);
}

.lp-title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--nt-color-foreground, #24292f);
  text-wrap: balance;
}

.lp-lead {
  margin: 0;
  max-width: 34rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--nt-color-muted-foreground, #586069);
}

/* The cards share one grid cell, so they are literally a stack of paper. The
 * padding is the room the ones behind need to show. */
.lp-deck { position: relative; }

/* The padding is the room the fan needs at its widest — the hover spread, not
 * the resting one — on all four sides. The cards give up that much width so
 * the fan has somewhere to go.
 *
 * It cannot be borrowed from the section's own margins: `.lp-stack` measures
 * 1200px here, not the 62rem this file asks for, because the home stylesheet
 * widens its sections. At a 1200px window that leaves 24px either side, and
 * the fan was measured hanging 28px off the left edge. Sideways room has to be
 * taken from the card, not assumed from the page.
 *
 * The sideways figure is the widest hover offset (2.7rem) plus what the
 * rotation adds to the box: a 3.2deg turn on a card this tall grows it by
 * about 14px per side. */
.lp-deck-cards {
  display: grid;
  padding: 1.2rem 3.6rem 6.4rem;
}

.lp-card {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  height: min(34rem, 62vh);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  background: var(--lp-card-bg, #ffffff);
  color: var(--lp-card-text, #1f2328);
  border: 1px solid var(--lp-card-line, rgba(16, 18, 40, 0.08));
  box-shadow: 0 26px 60px -24px rgba(16, 18, 40, 0.45);
  transform-origin: center center;
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 520ms ease,
              box-shadow 520ms ease;
}

/* The page you are looking at: square to the page, nothing done to it. The
 * ones behind fan out from under it — alternating sides, each a little lower
 * and turned a little further. Same size, not shrunk: they are the same cards
 * seen from behind, not smaller versions of them.
 *
 * The shape is the CodeFronts "glassmorphic floating testimonial stack", with
 * two changes for this content. The offsets are in rem rather than a
 * percentage of the card, because this card is 1150px wide instead of 360 and
 * a percentage would throw the fan off the screen. And the angles are about
 * 40% of the original: a degree of rotation moves a wide card's corner three
 * times as far as it moves a narrow one's, so 4deg reads as a gentle fan there
 * and as a landslide here. */
.lp-card[data-depth="0"] { transform: none; opacity: 1; z-index: 10; }
.lp-card[data-depth="1"] { transform: translate(1.5rem, 1.1rem) rotate(1.3deg); opacity: 0.97; z-index: 9; }
.lp-card[data-depth="2"] { transform: translate(-1.4rem, 2.1rem) rotate(-1.7deg); opacity: 0.93; z-index: 8; }
.lp-card[data-depth="3"] { transform: translate(1.2rem, 3.1rem) rotate(2.1deg); opacity: 0.88; z-index: 7; }

/* Hovering anywhere in the pile opens it out a little: the page on top lifts,
 * the ones behind step further aside. Combined with the controller lifting the
 * card actually under the pointer to the top, that is the whole gesture — the
 * one you are pointing at is the one you see, and you can tell there are more.
 *
 * How far they step is bounded by the narrowest desktop this has to survive.
 * At 1024px the section leaves 40px of margin either side, and rotation eats
 * some of that too, so a spread that looks generous at 1440 is a card cut off
 * at 1024 — measured, the earlier numbers put the left edge at -55px.
 *
 * `:focus-within` does the same, so arriving by keyboard is not a worse view
 * of the same thing. */
.lp-deck-cards:hover .lp-card[data-depth="0"],
.lp-deck-cards:focus-within .lp-card[data-depth="0"] {
  transform: translateY(-0.7rem);
  box-shadow: 0 38px 74px -26px rgba(16, 18, 40, 0.6);
}

.lp-deck-cards:hover .lp-card[data-depth="1"],
.lp-deck-cards:focus-within .lp-card[data-depth="1"] { transform: translate(2.7rem, 1.9rem) rotate(2.1deg); }

.lp-deck-cards:hover .lp-card[data-depth="2"],
.lp-deck-cards:focus-within .lp-card[data-depth="2"] { transform: translate(-2.5rem, 3.2rem) rotate(-2.6deg); }

.lp-deck-cards:hover .lp-card[data-depth="3"],
.lp-deck-cards:focus-within .lp-card[data-depth="3"] { transform: translate(2.2rem, 4.4rem) rotate(3.2deg); }

/* A page behind is decoration: it takes a hover or a click to come forward,
 * and nothing inside it should take one on its own. */
.lp-card:not([data-depth="0"]) .lp-preview { pointer-events: none; }

.lp-card:focus-visible {
  outline: 3px solid var(--nt-color-accent, #007acc);
  outline-offset: 4px;
}

.lp-card-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--lp-card-bar, #f4f5f8);
  border-bottom: 1px solid var(--lp-card-line, #e3e5ec);
}

.lp-dot { width: 10px; height: 10px; border-radius: 50%; background: #d4d7e0; }
.lp-dot:first-child { background: #f2a5a0; }
.lp-dot:nth-child(2) { background: #f4d08a; }
.lp-dot:nth-child(3) { background: #a8d6a4; }

.lp-url {
  margin-left: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--lp-card-url, #7b8194);
}

/* The window onto the page. It is clipped, not summarised: what shows is the
 * top of the real document at a smaller scale, the way a browser tab preview
 * shows a page rather than a description of one. */
.lp-preview {
  position: relative;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* The theme's own background paints this, so the card's fallback colour is
 * only ever seen for the fraction of a second before it applies. */
.lp-preview-page {
  width: 154%;
  height: 154%;
  padding: 1.6rem 1.9rem 0;
  transform: scale(0.65);
  transform-origin: top left;
  overflow: hidden;

  /* A card is a picture of a page, not a page. Nothing inside it should take
   * a click or a caret — the whole card is one link. */
  pointer-events: none;
  user-select: none;
}

/* The preview fades out at the foot instead of ending on a cut line, which is
 * what says "there is more of this page" without a word of copy. */
.lp-preview::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 5.5rem;
  background: linear-gradient(to bottom, transparent, var(--lp-card-bg, #ffffff));
  pointer-events: none;
}

.lp-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem 1.15rem;
  border-top: 1px solid var(--lp-card-line, #e3e5ec);
  background: var(--lp-card-bg, #ffffff);
}

.lp-card-kicker {
  margin: 0 0 0.15rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-card-kicker, #b4531a);
}

.lp-card-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--lp-card-text, #1f2328);
}

.lp-card-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--lp-card-text, #1f2328);
}

.lp-card-go-icon {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: 0.75;
}

.lp-card[data-depth="0"]:hover .lp-card-go-icon { opacity: 1; }

.lp-card:hover .lp-card-go { color: var(--lp-card-kicker, #b4531a); }

/* The card's chrome takes its colours from the example page's own theme, the
 * same values the page inside it is painted with. Not a palette per card: the
 * card and the page it shows are one object, and a fifth example costs no CSS
 * at all.
 *
 * The switch is written out in the three states rather than inherited from
 * `.content.nt-themed`, because that mapping is bound to `.content` and the
 * bar and the foot are siblings of it, not descendants. Same shape as the
 * themed header in themes.css, and the same reason.
 *
 * The light set is assigned here rather than inline for the reason Theme::Css
 * documents: an inline custom property outranks every selector, so a colour
 * emitted straight as `--lp-card-bg` could never switch. */
.lp-card.nt-card-themed {
  --lp-card-bg: var(--nt-light-color-background);
  --lp-card-line: var(--nt-light-color-border);
  --lp-card-text: var(--nt-light-color-foreground);
  --lp-card-kicker: var(--nt-light-color-accent);
  --lp-card-bar: var(--nt-light-color-surface);
  --lp-card-url: var(--nt-light-color-muted-foreground);
}

[data-theme="dark"] .lp-card.nt-card-auto {
  --lp-card-bg: var(--nt-dark-color-background);
  --lp-card-line: var(--nt-dark-color-border);
  --lp-card-text: var(--nt-dark-color-foreground);
  --lp-card-kicker: var(--nt-dark-color-accent);
  --lp-card-bar: var(--nt-dark-color-surface);
  --lp-card-url: var(--nt-dark-color-muted-foreground);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-card.nt-card-auto {
    --lp-card-bg: var(--nt-dark-color-background);
    --lp-card-line: var(--nt-dark-color-border);
    --lp-card-text: var(--nt-dark-color-foreground);
    --lp-card-kicker: var(--nt-dark-color-accent);
    --lp-card-bar: var(--nt-dark-color-surface);
    --lp-card-url: var(--nt-dark-color-muted-foreground);
  }
}

/* A page that pins itself dark carries only the dark set, and it applies in
 * every state — there is no light version of it to switch back to. */
.lp-card.nt-card-pinned-dark {
  --lp-card-bg: var(--nt-dark-color-background, var(--nt-light-color-background));
  --lp-card-line: var(--nt-dark-color-border, var(--nt-light-color-border));
  --lp-card-text: var(--nt-dark-color-foreground, var(--nt-light-color-foreground));
  --lp-card-kicker: var(--nt-dark-color-accent, var(--nt-light-color-accent));
  --lp-card-bar: var(--nt-dark-color-surface, var(--nt-light-color-surface));
  --lp-card-url: var(--nt-dark-color-muted-foreground, var(--nt-light-color-muted-foreground));
}

/* The controls. The marks are the deck's table of contents: one per page,
 * named, in the tab order. The arrows are for the pointer; the swipe is for
 * the finger; clicking a page behind is the shortcut. All four do one thing. */
.lp-deck-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1.8rem;
}

.lp-deck-arrow {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border-radius: 999px;
  cursor: pointer;
  color: var(--nt-color-muted-foreground, #586069);
  background: transparent;
  border: 1px solid var(--nt-color-border, rgba(16, 18, 40, 0.16));
  transition: color 160ms ease, border-color 160ms ease;
}

.lp-deck-arrow:hover {
  color: var(--nt-color-foreground, #24292f);
  border-color: var(--nt-color-foreground, #24292f);
}

.lp-deck-ticks { display: flex; align-items: center; gap: 0.4rem; }

/* The mark is a 44px target with a small bar drawn inside it. Shrinking the
 * button to the size of the bar is how a control like this usually ends up
 * being 8px tall and impossible to hit. */
.lp-deck-tick {
  width: 3rem;
  height: 2.75rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
}

.lp-deck-tick::before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--nt-color-border, rgba(16, 18, 40, 0.2));
  transition: background-color 260ms ease;
}

.lp-deck-tick.is-active::before { background: var(--nt-color-accent, #007acc); }

.lp-deck-tick:hover::before { background: var(--nt-color-muted-foreground, #586069); }

.lp-deck-tick:focus-visible {
  outline: 2px solid var(--nt-color-accent, #007acc);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Visually hidden: the mark is a bar, and the name is what a screen reader
 * reads out and what says which page it turns to. */
.lp-deck-tick-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Phone. Same deck, smaller: the peeks shrink because three visible steps over
 * a 358px card leave the front one looking cropped, and the preview is scaled
 * harder so the same amount of page shows in a third of the width. */
@media (max-width: 700px) {
  .lp-stack { padding: 3.5rem 1.1rem 4rem; }
  .lp-deck-cards { padding: 0.9rem 1.3rem 3.4rem; }

  .lp-card {
    height: min(26rem, 58vh);
    border-radius: 13px;
    box-shadow: 0 18px 40px -18px rgba(16, 18, 40, 0.45);
  }

  /* Bigger angles than the desktop: the card is a third of the width, so the
   * same degree moves the corner a third as far. The offsets shrink instead,
   * because 2rem sideways on a 358px card is most of its margin. */
  .lp-card[data-depth="1"] { transform: translate(0.7rem, 0.8rem) rotate(2.2deg); }
  .lp-card[data-depth="2"] { transform: translate(-0.65rem, 1.55rem) rotate(-2.8deg); }
  .lp-card[data-depth="3"] { transform: translate(0.55rem, 2.3rem) rotate(3.4deg); }

  .lp-card-bar { padding: 9px 12px; }
  .lp-url { font-size: 10.5px; margin-left: 7px; }
  .lp-dot { width: 8px; height: 8px; }
  .lp-preview-page { width: 222%; height: 222%; padding: 1.1rem 1.2rem 0; transform: scale(0.45); }
  .lp-preview::after { height: 4rem; }
  .lp-card-foot { padding: 0.75rem 1rem 0.85rem; gap: 0.6rem; }
  .lp-card-kicker { font-size: 0.58rem; }
  .lp-card-title { font-size: 0.88rem; }
  .lp-card-go { font-size: 0.78rem; }
  .lp-deck-controls { gap: 0.5rem; margin-top: 1.2rem; }
  .lp-deck-tick { width: 2.2rem; }
}

/* The deck still turns — that is the content, and a person still chooses when.
 * What stops is the turn nobody asked for and the animation between pages: the
 * controller does not start its timer, and the change is instant. */
@media (prefers-reduced-motion: reduce) {
  .lp-card { transition: none; }
}