/* Kombyno landing , Act 2: own / owe / forgot (pinned scroll triptych).
   Mobile-first: three stacked full panels, no pinning, everything statically
   visible. At md+ with motion allowed, the section becomes a 300vh pinned
   stage driven by act2.js via KB.progress (see --a2-* custom properties). */

.a2-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.a2-story { position: relative; }

.a2-stage { position: relative; }

.a2-panels { position: relative; }

.a2-panel {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--kb-space-6);
  padding: var(--kb-space-16) clamp(1.25rem, 6vw, 5rem);
  border-top: 1px solid var(--kb-border);
}
.a2-panel:first-child { border-top: none; }

.a2-kicker {
  margin: 0; font-size: var(--kb-text-sm); letter-spacing: .28em;
  color: var(--kb-text-muted); font-variant-numeric: tabular-nums;
}

.a2-word {
  margin: 0; font-weight: var(--kb-fw-semibold); letter-spacing: -0.04em;
  line-height: .95; text-transform: lowercase;
  font-size: clamp(4rem, 14vw, 11rem);
  color: var(--kb-cream);
}
.a2-word-dot { color: var(--kb-accent); }

.a2-list {
  list-style: none; margin: 0; padding: 0; max-width: 28rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.a2-list li {
  position: relative; padding-left: 1.7rem;
  font-size: var(--kb-text-lg); line-height: var(--kb-lh-body);
  color: var(--kb-text-secondary);
}
.a2-list li::before { position: absolute; left: 0; font-weight: var(--kb-fw-semibold); }

.a2-list--tick li::before { content: '\2713'; color: var(--kb-teal-300); }
.a2-list--dash li::before { content: '\2013'; color: var(--kb-accent); }
.a2-list--ghost li::before { content: '\00B7'; color: var(--kb-text-muted); }

.a2-figure { margin: 0; align-self: flex-end; text-align: right; }
.a2-figure-value {
  font-weight: var(--kb-fw-semibold);
  font-size: clamp(1.75rem, 5vw, 3rem);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.a2-figure--own .a2-figure-value { color: var(--kb-teal-300); }
/* rgba() of --kb-coral-500 (#f0724c) at .85, per the brief's exact spec */
.a2-figure--owe .a2-figure-value { color: rgba(240, 114, 76, .85); }

.a2-lead {
  margin: 0; max-width: 30rem;
  font-size: var(--kb-text-lg); line-height: var(--kb-lh-body);
  color: var(--kb-text-secondary);
}

.a2-equation {
  padding: var(--kb-space-16) clamp(1.25rem, 6vw, 5rem);
  text-align: center;
}
.a2-equation-line {
  margin: 0 0 .6rem; font-weight: var(--kb-fw-semibold); letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 4vw, 2.5rem); color: var(--kb-text);
}
.a2-equation-figure { color: var(--kb-teal-300); }
.a2-equation-label {
  margin: 0; font-size: var(--kb-text-xs); letter-spacing: .3em;
  text-transform: lowercase; font-variant-caps: small-caps;
  color: var(--kb-text-muted);
}

/* ---- Pinned triptych: md+ and motion allowed only ---- */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .a2-story { height: 300vh; }

  .a2-stage {
    position: sticky; top: 0; height: 100vh; overflow: hidden;
  }

  .a2-panels { height: 100%; }

  .a2-panel {
    position: absolute; inset: 0; min-height: 0; border-top: none;
    opacity: 0; pointer-events: none;
  }
  .a2-panel.is-active { opacity: 1; pointer-events: auto; }

  /* Hard cut: the incoming word slides up over the first ~8% of its panel's
     local scroll span (--a2-pN-enter, set every frame by act2.js). */
  .a2-word--own {
    opacity: var(--a2-p1-enter, 0);
    transform: translateY(calc((1 - var(--a2-p1-enter, 0)) * 3rem));
  }
  .a2-word--owe {
    opacity: var(--a2-p2-enter, 0);
    transform: translateY(calc((1 - var(--a2-p2-enter, 0)) * 3rem));
  }
  /* "forgot." sharpens across its ENTIRE panel span, not just the entry cut ,
     it literally remembers itself the longer you stay on it. */
  .a2-word--forgot {
    opacity: var(--a2-forgot-opacity, .12);
    transform: translateY(calc((1 - var(--a2-p3-enter, 0)) * 3rem));
  }

  .a2-panel .a2-list li,
  .a2-panel .a2-figure,
  .a2-panel .a2-lead {
    opacity: 0; translate: 0 16px;
    transition: opacity .5s var(--kb-ease), translate .5s var(--kb-ease);
  }
  .a2-panel.is-active .a2-list li,
  .a2-panel.is-active .a2-figure,
  .a2-panel.is-active .a2-lead {
    opacity: 1; translate: 0 0;
  }
  .a2-list li:nth-child(1) { transition-delay: .08s; }
  .a2-list li:nth-child(2) { transition-delay: .17s; }
  .a2-list li:nth-child(3) { transition-delay: .26s; }
  .a2-list li:nth-child(4) { transition-delay: .35s; }
  .a2-list li:nth-child(5) { transition-delay: .44s; }
  .a2-figure { transition-delay: .5s; }
  .a2-lead { transition-delay: .38s; }

  .a2-equation {
    position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 6vh, 4rem);
    padding: 0 clamp(1.25rem, 6vw, 5rem);
    opacity: var(--a2-eq, 0);
    transform: translateY(calc((1 - var(--a2-eq, 0)) * 1rem));
    pointer-events: none;
  }
}