/* =========================================================
   Component — Trace  ·  «الأثر»
   ---------------------------------------------------------
   The signature of the system, and the only place the full logo
   gradient is spent.

   A hairline rail down the reading edge (the right, in RTL). A
   single head travels it as you scroll; everything it has passed
   is gradient, everything ahead is a faint line. It is the brand
   name rendered as behaviour: a mark left behind by movement.

   Gold stops mark the section boundaries and light as you reach
   them, so the rail also answers "where am I on this page".
   ========================================================= */
/* The rail is pinned to the reading edge of the viewport — the right
   in RTL, the left in LTR — outside the content column, so it never
   competes with the text for width. */
.trace-rail {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 40;
  width: var(--rail-width);
  pointer-events: none;
}

.trace {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
}

.trace__track {
  position: relative;
  width: 2px;
  margin-block: var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-line-strong);
}

.trace__fill {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 100%;
  background: var(--gradient-trace);
  transform: scaleY(var(--trace-progress, 0));
  transform-origin: top;
  transition: transform 120ms linear;
}

.trace__head {
  position: absolute;
  inset-inline-start: 50%;
  top: calc(var(--trace-progress, 0) * 100%);
  translate: -50% -50%;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-growth);
  box-shadow:
    0 0 0 5px var(--color-growth-soft),
    0 0 18px 2px var(--color-growth-soft);
  transition: top 120ms linear;
}

.trace__stop {
  position: absolute;
  inset-inline-start: 50%;
  translate: -50% -50%;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-line-strong);
  transition:
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.trace__stop.is-lit {
  background: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-soft);
}

/* Below the rail breakpoint the trace becomes a progress bar at
   the top of the viewport — same idea, same gradient, no column. */
.trace-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 60;
  height: 3px;
  display: none;
  background: var(--gradient-trace);
  transform: scaleX(var(--trace-progress, 0));
  transform-origin: right;
}
:root[dir="ltr"] .trace-bar { transform-origin: left; }

/* Below the point where the rail would crowd the content column it
   is dropped entirely and the bar takes over. */
@media (max-width: 1180px) {
  .trace-rail { display: none; }
  .trace-bar { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .trace__fill,
  .trace__head { transition: none; }
}