/*
 * ABC Scroll v2 — native scrolling, effects on the compositor.
 * Master: C:/dev/site-tools/abc-scroll/ (copy to each site).
 *
 * v1 smoothed the wheel in JavaScript (Lenis). On pages that also draw
 * canvases every frame, that put scrolling on a busy main thread and it lagged.
 * v2 leaves scrolling to the browser (it runs on the GPU compositor and can't
 * be held up by the page), and drives every scroll effect with CSS
 * scroll-driven animations, which the compositor also runs: no JavaScript per
 * scroll frame at all. Browsers without scroll timelines get plain scrolling
 * and everything simply visible.
 */

/* anchors and "go to section" glide natively, clear of the sticky header */
html { scroll-behavior: smooth; scroll-padding-top: var(--abc-offset, 92px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.abc-scroll-off { scroll-behavior: auto; }

/* ------------------------------------------------------------ progress rail */
.abc-rail { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 9999; pointer-events: none; }
.abc-rail i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #A83236, #F59E0B 45%, #FDE08A); box-shadow: 0 0 10px rgba(245, 158, 11, .8); }

@keyframes abc-rail { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes abc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes abc-rise { from { opacity: 0; translate: 0 44px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes abc-zoom { to { scale: .9; translate: 0 -48px; opacity: .3; } }

@supports (animation-timeline: scroll()) {
  .abc-rail i { animation: abc-rail linear both; animation-timeline: scroll(root block); }
  .abc-rail { animation: abc-fade-in linear both; animation-timeline: scroll(root block); animation-range: 0 120px; }
}

/* -------------------------------------------- reveals and the hero zoom-out
 * Anything marked [data-reveal] rises into place as it enters the screen;
 * each site lists its own elements with the same rule in its stylesheet.
 * `translate` and `scale` are separate from `transform`, so an element's own
 * hover transforms keep working. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] { animation: abc-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
    [data-scroll-zoom] { animation: abc-zoom linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}

/* ------------------------------------------- page to page (multi-page sites) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .2s ease both abc-vt-out; }
::view-transition-new(root) { animation: .32s cubic-bezier(.2, .8, .2, 1) both abc-vt-in; }
@keyframes abc-vt-out { to { opacity: 0; } }
@keyframes abc-vt-in { from { opacity: 0; translate: 0 12px; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* -------------------------------------------------------- chapter navigator */
.abc-chapters { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 4px;
  opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.abc-chapters[data-show] { opacity: 1; pointer-events: auto; }
.abc-chapters button { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 22px;
  background: none; border: 0; padding: 0 2px; cursor: pointer; font: 500 11px/1 var(--abc-mono, "IBM Plex Mono", ui-monospace, monospace);
  letter-spacing: .04em; color: rgba(242, 231, 206, .75); }
/* the dot is a 7x18 lozenge squashed to a circle; the current chapter's
   stretches out (a transform, so changing chapters never re-lays the page) */
.abc-chapters button i { width: 7px; height: 18px; border-radius: 50%; background: rgba(201, 163, 107, .45); transform: scaleY(.39); transition: transform .3s ease, background .3s ease; flex: none; }
.abc-chapters button span { opacity: 0; transform: translateX(6px); transition: opacity .25s ease, transform .25s ease; white-space: nowrap;
  padding: 3px 8px; border-radius: 6px; background: rgba(10, 8, 6, .88); border: 1px solid rgba(201, 163, 107, .3); }
.abc-chapters:hover button span, .abc-chapters button[data-on] span { opacity: 1; transform: none; }
.abc-chapters:not(:hover) button:not([data-on]) span { display: none; }
.abc-chapters button[data-on] i { background: #FBBF24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .22), 0 0 12px rgba(251, 191, 36, .8); transform: none; }
.abc-chapters button[data-on] span { color: #FDE08A; }
.abc-chapters button:hover i { background: #FDE08A; }
.abc-chapters button:focus-visible { outline: 2px solid #FBBF24; outline-offset: 2px; border-radius: 6px; }
@media (max-width: 1100px) { .abc-chapters { display: none; } }

@media print { .abc-rail, .abc-chapters { display: none; } }