/* Thread: the company page (internal/pages/company.templ). Loaded after
   base.css on that page only.

   One line runs down the page. Headings close on it from the left, text
   opens from it on the right, and it stops in a ring under the page's link
   to the contact page. The grid and the line share --th-spine, the line's
   x from the page's left edge: thread.js reads it, so moving the grid moves
   the line.

   Three states, one design:
   - without the script, the line is two CSS borders: one down every block
     marked data-thread="rule", one under the link marked "end", with the
     ring after it;
   - with the script (html.th-on), an SVG route replaces them. It leaves the
     header under the current navigation link. The whole route is drawn
     faint; the lit copy is revealed down to a reading line as the page
     scrolls, by a scroll-driven animation, and a dot marks its head;
   - without scroll timelines (or under ?fallback=1), thread.js drives the
     same light (html.th-drive): it clips the lit copy and places the dot
     inline, from the same lit extent;
   - with reduced motion, the lit copy is whole and still, and there is no
     dot.
   Every few seconds, scrolled or not, thread.js runs a pulse of light
   (.th-pulse) down the lit copy; it places and fades it, and CSS only
   draws it. Under reduced motion there is none. */

@property --th-spine {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.th-page {
  --th-gap: 12px;
  --th-margin: 0px;
  --th-spine: calc(var(--gutter) + var(--th-margin) + var(--th-gap));
  --th-ember: var(--dn-orange);
  position: relative;
  padding-bottom: clamp(4.5rem, 14vh, 8rem);
}

/* ---------- The grid: margin column, the line, text column ---------- */

.th-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--th-margin) minmax(0, 1fr);
  column-gap: calc(2 * var(--th-gap));
  padding-inline: var(--gutter);
}
.th-row > * { grid-column: 2; }

.th-head { padding-block: clamp(3.25rem, 11vh, 7rem) 0; }
.th-section { padding-top: clamp(3.5rem, 11vh, 6.5rem); }

.th-head .label { margin-bottom: 1.6rem; }
.th-title { font-size: var(--fs-display); max-width: 12.5em; }
.th-lead {
  margin-top: 2rem;
  max-width: 30rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-soft);
}
.th-lead .line { display: block; }
.th-lead .line + .line { margin-top: 0.55em; }
.th-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.1rem; margin-top: 2.6rem; }

.th-section .heading { position: relative; margin-bottom: 1.1rem; }
/* The heading's ring sits on the line, level with its first line. */
.th-section .heading::before {
  position: absolute;
  top: calc(0.52em - 5.5px);
  left: calc(-1 * var(--th-gap) - 5.5px);
  margin: 0;
  background: var(--dn-void);
}

.th-para {
  max-width: var(--measure);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-soft);
  text-wrap: pretty;
}
.th-para + .th-para { margin-top: 1.1em; }
.th-page .line[data-level="1"] { font-style: italic; color: var(--text); }
.th-items { display: grid; gap: 1.4rem; max-width: var(--measure); margin-top: 1.6rem; }
.th-links { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; margin-top: 2.2rem; }

/* ---------- The line without the script ---------- */

.th-row[data-thread="rule"]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--th-spine) - 0.5px);
  border-left: 1px solid var(--th-ember);
}
.th-end { position: relative; border-bottom-color: transparent; }
.th-end::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--th-gap) - 0.5px);
  right: -14px;
  bottom: -1px;
  border-bottom: 1px solid var(--th-ember);
}
/* The ring: the headings' ring, where the line stops. */
.th-end::after,
.th-end:hover::after {
  position: absolute;
  right: -25px;
  bottom: -6.5px;
  width: 11px;
  height: 11px;
  background: var(--dn-void);
  border: 1px solid var(--dn-gold);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(236, 191, 119, 0.55), inset 0 0 4px rgba(255, 241, 208, 0.4);
}
.th-end:hover,
.th-end:focus-visible { border-bottom-color: transparent; color: var(--dn-gold); }

.th-on .th-row::before,
.th-on .th-end::before,
.th-on .th-end::after { visibility: hidden; }

/* ---------- The line with the script ---------- */

.th-route {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.th-on .th-route { display: block; }
.th-route svg { position: absolute; left: 0; top: 0; overflow: visible; }
.th-route path,
.th-route circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.th-ghost path { stroke: var(--th-ember); stroke-opacity: 0.38; stroke-width: 1; }
.th-ghost circle { stroke: var(--dn-gold); stroke-opacity: 0.45; stroke-width: 1; fill: var(--dn-void); }
.th-lit path { stroke: var(--th-ember); stroke-width: 1.5; }
.th-lit .th-glow { stroke: var(--dn-gold); stroke-opacity: 0.2; stroke-width: 6; }
.th-lit circle {
  stroke: var(--dn-gold);
  stroke-width: 1;
  fill: var(--dn-void);
  filter: drop-shadow(0 0 5px rgba(236, 191, 119, 0.7));
}

.th-dot {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 241, 208, 0.95) 0 6%, rgba(236, 191, 119, 0.5) 14%, rgba(202, 120, 69, 0.14) 42%, rgba(202, 120, 69, 0) 100%);
  opacity: 0;
}

/* The pulse: the prototype's pulse, its 64 px dot at 0.7 of its size
   (44.8 px) with the prototype's stops, so it carries the same light. */
.th-pulse {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 44.8px;
  height: 44.8px;
  margin: -22.4px 0 0 -22.4px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 241, 208, 0.95) 0 5%, rgba(236, 191, 119, 0.5) 12%, rgba(202, 120, 69, 0.16) 40%, rgba(202, 120, 69, 0) 100%);
  opacity: 0;
}

/* The light: thread.js sets --th-read0, the reading line at the top of the
   page (64% down the first screen), and --th-end, the route's end. Across
   the scroll the reading line runs linearly from --th-read0 to the page's
   foot, so the whole line is lit at the end; the dot rides it down the
   line until it reaches the end (--th-t1 of the way). thread.ts computes
   the same lit extent (litY) to keep the pulse on the lit copy, and to
   drive the light where scroll timelines are missing (.th-drive): a
   change to th-read or th-head changes it there too. */
@supports (animation-timeline: scroll()) {
  .th-lit {
    animation: th-read linear both;
    animation-timeline: scroll(nearest);
  }
  .th-dot {
    display: block;
    animation: th-head linear none;
    animation-timeline: scroll(nearest);
    animation-range: 0% calc(var(--th-t1, 0) * 100%);
  }
}
/* thread.js drives the light: its inline clip and dot, not the timeline. */
.th-drive .th-lit { animation: none; }
.th-drive .th-dot { display: block; animation: none; }
@keyframes th-read {
  from { clip-path: inset(0 0 calc(100% - var(--th-read0, 0px)) 0); }
  to { clip-path: inset(0); }
}
@keyframes th-head {
  from { opacity: 1; transform: translate(var(--th-x, 0px), var(--th-read0, 0px)); }
  to { opacity: 1; transform: translate(var(--th-x, 0px), var(--th-end, 0px)); }
}

/* ?p=0..1 (thread.js): the page scrolls inside body, which headless
   captures paint. */
.th-p { height: 100%; overflow: hidden; }
.th-p body { height: 100%; min-height: 0; overflow-y: auto; }
.th-p body > * { flex-shrink: 0; }

/* ---------- Wide screens: the margin column ---------- */

@media (min-width: 761px) {
  .th-page {
    --th-gap: clamp(24px, 2.8vw, 40px);
    --th-margin: clamp(180px, 25vw, 360px);
  }
  .th-row > .th-margin {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    text-align: right;
  }
  .th-row > .th-col { grid-row: 1; }
  .th-head .label { padding-top: calc(var(--fs-display) * 0.3 - 0.35em); }
  .th-section .heading::before { left: auto; right: calc(-1 * var(--th-gap) - 5.5px); }
}

/* ---------- Narrow screens: a smaller light, clear of the text ---------- */

@media (max-width: 760px) {
  .th-dot { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
  .th-pulse { width: 22.4px; height: 22.4px; margin: -11.2px 0 0 -11.2px; }
}

/* Under reduced motion there is no pulse; thread.js does not run it either. */
@media (prefers-reduced-motion: reduce) {
  .th-pulse { display: none; }
}