/*
 * Kate Angelo — /about/ pinned scroll-story (LOST → FOUND → WRITTEN → SPEAKING)
 * ===========================================================================
 * Companion stylesheet for assets/about-scroll-story.js. Ported from the
 * approved rough layout in about-preview.html (SECTION 3: SCROLLYTELLING),
 * restyled onto this file's own `.ka-story-*` classes and this project's
 * established failsafe convention (see below).
 *
 * ── SAFETY / FAILSAFE DESIGN (mirrors kate-book-manager's `.kbm-anim` /
 *    blog-scroll-reveal's `.kbm-blog-js` pattern) ──────────────────────────
 * Every rule in this file that HIDES or absolutely-positions a beat/word is
 * scoped under the `.ka-story-pinned` class. That class is added to the
 * `.ka-about-story` root by about-scroll-story.js ONLY after it has verified,
 * at runtime:
 *   1. `prefers-reduced-motion: reduce` is NOT set, AND
 *   2. GSAP + ScrollTrigger are both actually loaded, AND
 *   3. the viewport is wider than the 768px mobile breakpoint (see file
 *      header of the JS for the mobile/touch decision writeup).
 * If the script never runs at all (blocked, CDN outage, JS disabled), or any
 * of the three checks fails, `.ka-story-pinned` is never added — and because
 * every hide/absolute-position rule below REQUIRES that class as an ancestor,
 * nothing is ever hidden. The base (no-class) state, defined first in this
 * file, is a plain, fully visible, normal-document-flow two-column reading
 * layout. A `prefers-reduced-motion` media query is also included as pure
 * belt-and-suspenders in case a future JS edit ever regresses that check.
 *
 * ── v1.1.0 (sitewide type-unification round) ────────────────────────────
 * `--story-fbig` (the LOST/FOUND/WRITTEN/SPEAKING chapter words, a true
 * display heading) swapped 'Fjalla One' -> 'Oswald' (Impact fallback
 * kept). A NEW `--story-fcg` token ('Cormorant Garamond', Georgia, serif)
 * was added and `.ka-story-beat__pull` (the italic pull-quote beside each
 * chapter) now uses it instead of `--story-fbig` — this pull-quote is the
 * same kind of moment as about-preview.html's original `.story-content__
 * pull` (which used Cormorant Garamond, not the display face) and as the
 * "She once sold a lion to a circus" reference line, so it belongs with
 * the site's serif-accent family, not the heading face. Colors on both
 * are untouched (--story-text / --story-pink / --story-gold, all already
 * solid and already verified safe on this section's navy background).
 */

.ka-about-story {
  --story-navy:      #0d3170;
  --story-navy-deep: #08204d;
  --story-pink:      #DF6176;
  --story-gold:      #F5D000;
  --story-text:      #EEF2F8;
  --story-muted:     rgba(238, 242, 248, .72);
  --story-border:    rgba(238, 242, 248, .16);
  --story-fbig:      'Oswald', Impact, sans-serif;
  --story-fcg:       'Cormorant Garamond', Georgia, serif;
  --story-fbody:     'Poppins', sans-serif;

  position: relative;
  box-sizing: border-box;
}
.ka-about-story * { box-sizing: border-box; }

/* ── OUTER WRAPPER ──
   Base height is auto. about-scroll-story.js ONLY overrides this with an
   explicit pixel height (viewport + scroll budget) when it has committed to
   pinned mode — the height override is what creates the scroll "runway" the
   pin needs. Without JS, this is just a normal block with normal height. */
.ka-story-outer {
  position: relative;
  height: auto;
}

/* ── SCENE — base state: plain two-column (≥769px) / one-column (≤768px)
   reading layout, fully visible, no positioning tricks. ── */
.ka-story-scene {
  position: relative;
  width: 100%;
  background: var(--story-navy);
  border-radius: 4px;
  overflow: hidden;
}

@media (min-width: 769px) {
  .ka-story-scene {
    display: grid;
    grid-template-columns: 55fr 45fr;
    min-height: 480px;
  }
}

/* Progress dots — decorative, desktop-pinned-mode only. Hidden by default so
   it never appears as an orphaned, non-functional UI element when there is
   no pin to track progress through. */
.ka-story-progress {
  display: none;
  position: absolute;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  flex-direction: column;
  gap: .7rem;
}
.ka-story-pinned .ka-story-progress { display: flex; }
.ka-story-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--story-border);
  transition: background .3s ease, transform .3s ease;
}
.ka-story-dot.is-active {
  background: var(--story-gold);
  transform: scale(1.7);
}

/* ── LEFT COLUMN — chapter words ── */
.ka-story-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .6rem;
  padding: 2.75rem 2.25rem;
  border-bottom: 1px solid var(--story-border);
}
@media (min-width: 769px) {
  .ka-story-left {
    border-bottom: none;
    border-right: 1px solid var(--story-border);
    padding: 3rem;
  }
}

.ka-story-word {
  position: static;
  opacity: 1;
  transform: none;
  font-family: var(--story-fbig);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.05;
}
.ka-story-word--pink { color: var(--story-pink); }
.ka-story-word--gold { color: var(--story-gold); }

/* ── RIGHT COLUMN — beat content, stacked normally by default ── */
.ka-story-right {
  position: relative;
  padding: 2.5rem 2.25rem 3rem;
}
@media (min-width: 769px) {
  .ka-story-right { padding: 3rem 3.25rem; }
}

.ka-story-beat {
  position: static;
  opacity: 1;
  transform: none;
}
.ka-story-beat + .ka-story-beat {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--story-border);
}

.ka-story-beat__pull {
  font-family: var(--story-fcg);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--story-text);
  line-height: 1.35;
  margin: 0 0 1rem;
}
.ka-story-beat__body {
  font-family: var(--story-fbody);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--story-muted);
}
.ka-story-beat__body p + p { margin-top: 1rem; }

.ka-story-beat__photo {
  width: 180px;
  max-width: 45%;
  border-radius: 3px;
  float: right;
  margin: 0 0 1rem 1.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}

.ka-story-beat__btn {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--story-fbody);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--story-navy-deep);
  background: var(--story-gold);
  padding: .75rem 1.5rem;
  border-radius: 3px;
  transition: background .2s ease, transform .15s ease;
}
.ka-story-beat__btn:hover {
  background: #ffe033;
  transform: translateY(-2px);
}

/* ────────────────────────────────────────────────────────────────────────
   PINNED MODE — every rule below only ever applies once JS has added
   `.ka-story-pinned`, per the safety design documented at the top of this
   file. This is where the "stay fixed in viewport while content transitions
   through four beats" behavior actually lives.
──────────────────────────────────────────────────────────────────────── */
.ka-story-pinned .ka-story-scene {
  height: 100vh;
  border-radius: 0;
}

.ka-story-pinned .ka-story-left,
.ka-story-pinned .ka-story-right {
  position: relative;
  height: 100%;
  border-bottom: none;
}

.ka-story-pinned .ka-story-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(24px);
  font-size: clamp(3.2rem, 7vw, 6rem);
  padding: 0 3rem;
  pointer-events: none;
}

.ka-story-pinned .ka-story-beat {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(24px);
  padding: 3rem 3.25rem;
  margin: 0;
  border-top: none;
}

.ka-story-pinned .ka-story-beat.is-active,
.ka-story-pinned .ka-story-word.is-active {
  /* Actual opacity/transform values are driven by GSAP inline styles at
     runtime (about-scroll-story.js) — this class is used for the progress
     dots + as a readable state hook, not as the animation mechanism itself. */
}

/* Belt-and-suspenders: guarantee full visibility from CSS alone even if a
   future JS edit ever adds `.ka-story-pinned` without properly respecting
   prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .ka-story-pinned .ka-story-scene {
    height: auto !important;
  }
  .ka-story-pinned .ka-story-word,
  .ka-story-pinned .ka-story-beat {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .ka-story-pinned .ka-story-progress {
    display: none !important;
  }
}