/* Reading bar + hero exit. Rewritten from DUNA's article and inner-page CSS scroll timelines (teardown 09-30).
   Two scroll-linked modes on one small driver (part.js writes the progress 0..1 into --rb-p; everything you see
   is computed from it here, linear, no easing, so it moves exactly with the scroll):

   1. Reading bar   <div class="rb-bar" data-rb="bar"><span class="rb-bar__fill"></span></div>
      A 3px bar fixed to the top of the window fills left to right as you read (scaleX 0 -> 1 over the page's
      scroll, DUNA scroll(root)); data-rb-target="<selector>" measures one article instead of the whole page.

   2. Hero exit     <header class="rb-exit" data-rb="exit"> ... .rb-copy / .rb-frame > .rb-media / .rb-strip ... </header>
      As the hero scrolls off the top (progress 0 when its top meets the window top, 1 when 85% of it has gone,
      DUNA exit-crossing 0% -> 85%) the copy fades to .25 and rises 36px, the picture frame draws in 4% from the
      top and 5% from the sides with its rounded top corners kept, and the loop inside it settles from 1.12 to 1.
      .rb-strip is DUNA's centred-hero variant: a strip inset 7% at the sides that opens to full width over the
      first third of the exit. */
.rb-bar {
  --rb-h: 3px;                 /* bar height */
  --rb-color: #3d7131;         /* fill (DUNA --num on its light article pages) */
  --rb-track: transparent;     /* the unfilled part */
  --rb-z: 80;
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--rb-z);
  height: var(--rb-h);
  background: var(--rb-track);
  pointer-events: none;
}
.rb-bar__fill {
  display: block; height: 100%;
  background: var(--rb-color);
  transform-origin: 0 50%;
  transform: scaleX(var(--rb-p, 0));
}

.rb-exit {
  --rb-range: .85;             /* fraction of the hero's height scrolled past at which the exit is done (read by part.js) */
  --rb-copy-to: .25;           /* copy opacity at the end */
  --rb-copy-y: -36px;          /* copy rise */
  --rb-frame-top: 4%;          /* frame inset from the top at the end */
  --rb-frame-side: 5%;         /* frame inset from each side at the end */
  --rb-radius: 12px;           /* frame's top corners */
  --rb-media-from: 1.12;       /* loop scale at the start (ends at 1) */
  --rb-strip-side: 7%;         /* strip variant: side inset at the start */
  --rb-strip-open: 3;          /* strip variant: opens over 1 / this of the exit (the first third) */
}
.rb-copy {
  opacity: calc(1 - (1 - var(--rb-copy-to)) * var(--rb-p, 0));
  translate: 0 calc(var(--rb-copy-y) * var(--rb-p, 0));
}
.rb-frame {
  overflow: hidden;
  border-radius: var(--rb-radius) var(--rb-radius) 0 0;
  clip-path: inset(calc(var(--rb-frame-top) * var(--rb-p, 0)) calc(var(--rb-frame-side) * var(--rb-p, 0)) 0
    round var(--rb-radius) var(--rb-radius) 0 0);
}
.rb-media {
  transform-origin: 50% 60%;
  scale: calc(var(--rb-media-from) - (var(--rb-media-from) - 1) * var(--rb-p, 0));
}
.rb-strip {
  overflow: hidden;
  clip-path: inset(0 calc(var(--rb-strip-side) * max(0, 1 - var(--rb-p, 0) * var(--rb-strip-open)))
    round var(--rb-radius) var(--rb-radius) 0 0);
}

@media (scripting: none) { .rb-bar { display: none; } }   /* nothing would fill it */