/* The orange line's segments (line.js), on every page. Each segment's box sits in its
   section (the host), from the top of its part of the line to just past its end
   (--tline-top, --tline-h). Inside: the orange line, drawn once in full, and over it a cover
   the colour of the section (--tline-cover) that slides down off it as you scroll, with the
   faint line inside the cover moved the opposite way so it stays still. Only transforms
   move, so scrolling never lays out or repaints the line. The section's content sits
   above the box (each page sets that), the box under it. */
.tline {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--tline-top, 0px);
  height: var(--tline-h, 0px);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.tline__svg {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--tline-top, 0px));
  overflow: visible;
}

.tline__track,
.tline__cover {
  position: absolute;
  inset: 0;
}

.tline__cover {
  background: var(--tline-cover, var(--paper));
  will-change: transform;
}

/* The faint line drawn over the cover, used on phones (see below). */
.tline__svg--over {
  display: none;
}

.tline__svg--ghost {
  will-change: transform;
}

.tline__svg path {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}

.tline__svg--live path {
  stroke: var(--accent);
}

.tline__svg--live circle {
  fill: var(--accent);
}

.tline__svg--ghost path {
  stroke: var(--tline-ghost, rgba(20, 33, 61, 0.08));
}

.tline__svg--ghost circle {
  fill: var(--tline-ghost, rgba(20, 33, 61, 0.08));
}

/* Wide screens without Lenis (.tl-timeline): the browser moves the cover itself, in step
   with the scroll: from the scroll position where the tip reaches the top of the box to
   where it passes the end. With Lenis the script moves it in Lenis's own frame. */
@supports (animation-timeline: scroll()) {
@media (min-width: 760px) {
  .tl-timeline .tline__cover {
    animation: tline-cover linear both;
    animation-timeline: scroll(root block);
    animation-range: var(--tline-from, 0px) var(--tline-to, 1px);
  }

  .tl-timeline .tline__svg--ghost {
    animation: tline-ghost linear both;
    animation-timeline: scroll(root block);
    animation-range: var(--tline-from, 0px) var(--tline-to, 1px);
  }
}
}

/* Phones: a cover only as tall as the screen, held at the tip by position: sticky, 62% of
   the way down the small viewport (svh, which a toolbar coming or going does not change).
   Phone browsers place sticky elements on the scrolling thread itself, so it stays on the
   tip through momentum scrolling, and no page-tall layer has to move. The box clips
   without becoming a scroll container (overflow: clip), so the cover sticks to the window.
   Its track is one screen taller than the box, so at the end the cover can leave the line
   entirely. The faint line is drawn over the cover and blended so that it only darkens: on
   a light section it shows as before, on the orange line (and on navy) it all but vanishes. */
@supports (overflow: clip) {
  @media (max-width: 759px) {
    .tline {
      overflow: clip;
    }

    .tline__track {
      bottom: auto;
      height: calc(var(--tline-h, 0px) + 100lvh);
    }

    .tline__cover {
      position: sticky;
      inset: auto;
      top: 62svh;
      height: 100lvh;
      will-change: auto;
      transform: none !important;
    }

    .tline__svg--ghost {
      display: none;
    }

    .tline__svg--over {
      display: block;
      mix-blend-mode: darken;
    }

    .tline__svg--over path {
      stroke: #E5E5E4;
    }

    .tline__svg--over circle {
      fill: #E5E5E4;
    }

    /* More than a screen from the window (line.js): no sticky cover. Below the window the
       line is all to come, so a plain cover hides it; above, it is all drawn. */
    .tline--far-below .tline__track {
      height: auto;
      bottom: 0;
    }

    .tline--far-below .tline__cover {
      position: absolute;
      inset: 0;
      height: auto;
    }

    .tline--far-above .tline__track {
      display: none;
    }
  }
}

@keyframes tline-cover {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, var(--tline-h, 0px), 0); }
}

@keyframes tline-ghost {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, calc(-1 * var(--tline-h, 0px)), 0); }
}

@media (prefers-reduced-motion: reduce) {
  /* The whole line, drawn and still. */
  .tline__cover,
  .tline__svg--over {
    display: none;
  }
}