/* ==========================================================================
   CHAPTERS: reusable scroll and tab utilities (pair with js/chapters.js)

   Usage
     <div data-reveal>…</div>                 fades and slides up once, when 20% is visible
     <ul data-stagger>…</ul>                  its children reveal one after another, 80ms apart
     <svg data-draw>…<path/>…</svg>           strokes draw in once visible (path, line, polyline, circle, rect, ellipse)
     <span data-count>200+</span>             counts up to the number already in the HTML (prefix/suffix kept)
     <div data-autotabs data-interval="6000"> tab group that auto-advances (see js/chapters.js for markup)
     <div class="ch-lift">…</div>             optional card lift on hover (mouse/trackpad only)

   Motion only runs inside (prefers-reduced-motion: no-preference) and only once js/chapters.js has
   added .js-chapters to <html>. Without JS, or with reduced motion, everything shows in its final state.
   Brand tokens only (css/style.css :root).
   ========================================================================== */

/* ---------- Reveal and stagger ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js-chapters [data-reveal],
  .js-chapters [data-stagger] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--ch-delay, 0ms);
  }

  .js-chapters [data-reveal].is-in,
  .js-chapters [data-stagger].is-in > * {
    opacity: 1;
    transform: none;
  }

  /* ---------- Draw (stroke lengths are set by js/chapters.js) ---------- */
  .js-chapters [data-draw] .ch-draw {
    transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--ch-delay, 0ms);
  }

  .js-chapters [data-draw].is-in .ch-draw {
    stroke-dashoffset: 0 !important;
  }
}

/* ---------- Auto-advancing tabs ---------- */
[data-autotabs] [role="tablist"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--grey-200);
}

[data-autotabs] [role="tab"] {
  position: relative;
  padding: 0.85rem 1.1rem;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

[data-autotabs] [role="tab"]:hover {
  color: var(--brand-charcoal);
}

[data-autotabs] [role="tab"][aria-selected="true"] {
  color: var(--brand-orange-ink);
}

[data-autotabs] [role="tab"]:focus-visible {
  outline: 2px solid var(--brand-orange-ink);
  outline-offset: 2px;
}

/* Underline of the selected tab; doubles as the progress bar while auto-advancing. */
[data-autotabs] .ch-tab-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--grey-200);
  overflow: hidden;
  opacity: 0;
}

[data-autotabs] [role="tab"][aria-selected="true"] .ch-tab-bar {
  opacity: 1;
}

[data-autotabs] .ch-tab-bar span {
  display: block;
  height: 100%;
  background: var(--brand-orange);
  transform: scaleX(1);
  transform-origin: 0 50%;
}

[data-autotabs] [role="tabpanel"] {
  padding: 1.25rem 0 0;
}

[data-autotabs] [role="tabpanel"][hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  [data-autotabs] [role="tabpanel"]:not([hidden]) {
    animation: chPanelIn 0.45s ease both;
  }
}

@keyframes chPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Optional lift (pointer devices only) ---------- */
.ch-lift {
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ch-lift {
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .ch-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px color-mix(in srgb, var(--brand-charcoal) 12%, transparent);
  }
}