/* Drama Studio web overrides — most styling now lives in tailwind.input.css.
 * This file is kept for cross-cutting tweaks that are easier to express
 * outside the Tailwind component layer (e.g. a future theme override file
 * or progressive enhancement hooks). */

/* ---- Boosted navigation progress bar -------------------------------------
 * Sidebar section switching swaps <main> over htmx instead of reloading the
 * page. Without a full page load the browser shows no loading state at all,
 * so this bar is the only signal that a click registered. htmx toggles
 * `.htmx-request` on it via hx-indicator.
 */
#nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
  opacity: 0;
  pointer-events: none;
}

#nav-progress.htmx-request {
  opacity: 1;
  /* Creeps toward — never reaches — the end: the swap is what completes it. */
  animation: nav-progress-creep 8s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}

@keyframes nav-progress-creep {
  0% { transform: scaleX(0.05); }
  40% { transform: scaleX(0.6); }
  100% { transform: scaleX(0.92); }
}

/* The destination row highlights on click, before the response lands, so the
 * click feels acknowledged even when the section is slow to render. */
[data-section-link].is-navigating {
  background-color: var(--accent-soft);
  color: var(--accent-strong);
}

@media (prefers-reduced-motion: reduce) {
  #nav-progress.htmx-request {
    animation: none;
    transform: scaleX(0.5);
  }
}