/* Angler — 20 · knowledge pile. Everything animates off --p (set on .kn by the script).
   Cards are paper with an ink hairline; the finished slide's bars are lake. Tokens only. */

.kn { height: 260vh; padding: 0; background: var(--paper); }
.kn__stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; padding: calc(var(--nav-h) + 24px) var(--gutter) 0;
}

/* The title translates down by --dy as --p rises. Same size throughout; never enters
   the slide. z-index keeps it above cards passing behind it. */
.kn__title {
  position: relative; z-index: 2; margin: 0 auto; max-width: 900px; text-align: center;
  --dy: 0px; transform: translateY(calc(var(--dy) * var(--p))); will-change: transform;
}
.kn__h {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em;
  color: var(--ink); text-wrap: balance;
}

.kn__area { position: relative; flex: 1; min-height: 0; }
.kn__docs { display: contents; }

/* A card: 150×110, positioned from centre by --x/--y (vw/vh), tilted by --r. All three
   scale by (1 - --p) so at --p:1 every card sits centred, straight, 65% size, and gone. */
.kn__doc {
  position: absolute; left: 50%; top: 50%; width: 150px; height: 110px; margin: -55px 0 0 -75px;
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--r-card);
  padding: 26px 10px 10px; box-shadow: 0 2px 0 var(--ink);
  transform: translate(calc(var(--x) * (1 - var(--p))), calc(var(--y) * .78 * (1 - var(--p))))
             rotate(calc(var(--r) * (1 - var(--p)))) scale(calc(1 - .35 * var(--p)));
  opacity: calc(1 - max(0, (var(--p) - .7) / .25));
  will-change: transform, opacity;
}
.kn__doc span {
  position: absolute; top: 7px; left: 10px; right: 10px;
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kn__doc i { display: block; background: var(--line); border-radius: 2px; }
.kn__doc .ln { height: 5px; margin: 6px 0; }
.kn__doc .ln.s { width: 60%; }
.kn__doc .hd { height: 9px; width: 70%; background: var(--ink); margin-bottom: 8px; }
.kn__doc .sp { height: 5px; width: 28%; background: var(--ink); margin: 8px 0 3px; }
.kn__doc--deck .ttl { height: 9px; width: 55%; background: var(--ink); margin-bottom: 10px; }
.kn__doc--deck .b { display: inline-block; width: 16px; margin-right: 6px; vertical-align: bottom; background: var(--lake); }
.kn__doc--deck .b1 { height: 18px; } .kn__doc--deck .b2 { height: 34px; }
.kn__doc--deck .b3 { height: 24px; } .kn__doc--deck .b4 { height: 42px; }
.kn__doc--sheet .grid {
  height: 100%; border: 1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 14px);
}
.kn__doc--pdf { height: 130px; margin-top: -65px; }
.kn__doc--note { width: 120px; height: 80px; margin: -40px 0 0 -60px; border-style: dashed; }

/* The finished slide: centred, 16:9, fades in from --p .72, grows .85→1. */
.kn__final {
  position: absolute; left: 50%; top: 50%; width: min(560px, 86vw); aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%) scale(calc(.85 + .15 * var(--p)));
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-panel);
  padding: 22px 28px 28px; box-shadow: 0 6px 0 var(--ink);
  display: flex; flex-direction: column; gap: 16px;
  opacity: calc(max(0, (var(--p) - .72) / .28));
}
/* Title block: real text, so the slide reads as a slide. Fictional demo fixture, not a claim. */
.kn__slide-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-bottom: 8px; border-bottom: 1.5px solid var(--ink);
}
.kn__slide-title {
  font-family: var(--serif); font-weight: 600; font-size: clamp(11px, 1.3vw, 15px);
  line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kn__slide-meta { flex: none; font-family: var(--mono); font-size: 9px; color: var(--muted); }
.kn__final-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 6%; flex: 1; min-height: 0; }
.kn__chart { display: flex; align-items: flex-end; gap: 6%; border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }
.kn__chart i {
  flex: 1; height: var(--h); background: var(--lake); border-radius: 3px 3px 0 0;
  transform-origin: bottom; transform: scaleY(var(--p));
}
.kn__bul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9%; justify-content: center; }
.kn__bul li { position: relative; height: 7px; background: var(--line); border-radius: 3px; margin-left: 14px; }
.kn__bul li.s { width: 70%; }
.kn__bul li::before { content: ""; position: absolute; left: -14px; top: 0; width: 7px; height: 7px; background: var(--ink); border-radius: 50%; }
/* Sources sit under the slide, outside its frame, and fade with it. */
.kn__cite {
  position: absolute; left: 0; right: 0; top: calc(100% + 14px); text-align: center;
  font-family: var(--mono); font-size: 10px; line-height: 1.4; color: var(--muted);
}

/* Caption sits under the slide: half the slide's height plus 28px below centre. */
.kn__cap {
  position: absolute; left: 50%; top: 50%; width: min(720px, 90vw); margin: 0;
  transform: translate(-50%, calc(min(280px, 43vw) * 9 / 16 + 56px));
  text-align: center; font-size: clamp(1.05rem, 1.4vw, 1.35rem); line-height: 1.4; color: var(--ink-soft);
  opacity: calc(max(0, (var(--p) - .85) / .15));
}

.kn__hint {
  text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: var(--muted); padding: 12px 0 18px; opacity: calc(1 - var(--p) * 3);
}

/* Reduced motion (iOS "Reduce Motion" included): the script pins --p at 1, so the sticky
   range would be 160vh of the same frozen end state. Collapse the section to the stage. */
@media (prefers-reduced-motion: reduce) { .kn { height: auto; } }

@media (max-width: 760px) {
  .kn__doc { width: 110px; height: 80px; margin: -40px 0 0 -55px; padding: 22px 8px 8px; }
  .kn__doc--pdf { height: 96px; margin-top: -48px; }
  .kn__final { padding: 12px 14px 14px; gap: 10px; }
  .kn__cite { top: calc(100% + 12px); font-size: 9px; padding-inline: 6px; }
  .kn__cap { transform: translate(-50%, calc(43vw * 9 / 16 + 64px)); }
}