/* Ruled header intro. Measured from Heron AI's Header.animateHeaderOnHome (teardown 10-01), rewritten with our
   names and no GSAP. A header split into cells by hairline rules: on page load every vertical rule grows up out of
   the bar's bottom edge at one steady speed, and while they are still climbing the logo, links and button fade in
   on the spot (no travel). Knobs live on .rhi so one header can be retuned on its own. */
.rhi {
  --rhi-delay: .1s;                              /* whole intro waits this long (timeline delay .1) */
  --rhi-line-dur: 1.2s;                          /* a rule's grow, linear (ScrubReveal: duration 1.2, ease none) */
  --rhi-line-at: 0s;                             /* rules start (all together) */
  --rhi-fade-dur: 1s;                            /* items fade (FadeUpReveal type none: 1s power3.out) */
  --rhi-fade-ease: cubic-bezier(.165, .84, .44, 1);
  --rhi-logo-at: .2s;                            /* logo + menu button */
  --rhi-links-at: .25s;                          /* nav links (all together) */
  --rhi-rule: #b3b3af;
  --rhi-rule-w: 1px;
}
/* a vertical rule: an absolutely placed hairline at a cell's left edge (add data-rhi-line to any element) */
.rhi__rule {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: var(--rhi-rule-w);
  background: var(--rhi-rule);
  pointer-events: none;
}

/* start state only while JS is about to play it (no JS = the finished header) */
.rhi.is-held [data-rhi-line] { transform: scaleY(0); }
.rhi.is-held [data-rhi-fade] { opacity: 0; }

.rhi [data-rhi-line] { transform-origin: 100% 100%; }   /* bottom right, as the source ("bottom" type) */
.rhi.is-in [data-rhi-line] {
  transform: none;
  transition: transform var(--rhi-line-dur) linear calc(var(--rhi-delay) + var(--rhi-line-at));
}
.rhi.is-in [data-rhi-fade] {
  opacity: 1;
  transition: opacity var(--rhi-fade-dur) var(--rhi-fade-ease) calc(var(--rhi-delay) + var(--rhi-at, var(--rhi-logo-at)));
}
.rhi [data-rhi-fade="links"] { --rhi-at: var(--rhi-links-at); }

@media (prefers-reduced-motion: reduce) {
  .rhi.is-in [data-rhi-line], .rhi.is-in [data-rhi-fade] { transition: none; }
}