/* Researcher page — day-band activity tags and the study-timeline scenes.
   Brand line-art language; the shared .ln/.fy vocabulary lives in
   website.css. Strict CSP: all styling and keyframes live here.
   Sections carrying [data-animate] are paused off-viewport by website.js. */

/* =========================================================
   Day band: the travelling marker draws the day's activities
   as labeled span-lines on two lanes (lane 1: where you are,
   lane 2: what you're doing). Each line's keyframes map its
   start/end hour onto the ping's 24s linear timeline
   (left(h) = 2 + 94h/23 %, K% = 96h/23); everything fades at
   day's end and redraws. Each label stays hidden until the
   marker reaches its segment's start, then fades in and lives
   with its line. Colors are per activity entity — the bright
   round-4 set, validated with the dataviz palette checker
   (labels are the sanctioned relief for the contrast warns):
   home #708FF9, work #12A5BF, on the move (commutes + walk)
   #E89B23, sleep #8A46CE, calling #E0559F. "Waking up" and
   "Winding down" were dropped in round 4 (not detectable).
   ========================================================= */
.bhp-dayseg {
  position: absolute;
  height: 1.7rem;
}
.bhp-dayseg.lane1 { top: 1.4rem; }
.bhp-dayseg.lane2 { top: 3.3rem; }
.bhp-dayseg span {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--bhp-ink-soft);
  opacity: 0;
}
.bhp-dayseg i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
}

/* Schedule: home 0-7.5 / commute 7.5-9 / work 9-17 / commute 17-18.5 /
   home 18.5-23; sleep 0-7 / walk 12.5-14 / call 18.5-20 / sleep 22.5-23 */
.sg-homea  { left: 2%;     width: 30.65%; }
.sg-towork { left: 32.65%; width: 6.13%; }
.sg-atwork { left: 38.78%; width: 32.7%; }
.sg-gohome { left: 71.48%; width: 6.13%; }
.sg-homeb  { left: 77.61%; width: 18.39%; }
.sg-sleep  { left: 2%;     width: 28.61%; }
.sg-walk   { left: 53.09%; width: 6.13%; }
.sg-call   { left: 77.61%; width: 6.13%; }
.sg-sleepb { left: 93.96%; width: 2.04%; }
.sg-sleepb span { display: none; }

.sg-homea i, .sg-homeb i   { background: #708FF9; }
.sg-atwork i               { background: #12A5BF; }
.sg-towork i, .sg-gohome i,
.sg-walk i                 { background: #E89B23; }
.sg-sleep i, .sg-sleepb i  { background: #8A46CE; }
.sg-call i                 { background: #E0559F; }

.sg-homea i  { animation: bhp-sg-homea 24s linear infinite; }
.sg-towork i { animation: bhp-sg-towork 24s linear infinite; }
.sg-atwork i { animation: bhp-sg-atwork 24s linear infinite; }
.sg-gohome i { animation: bhp-sg-gohome 24s linear infinite; }
.sg-homeb i  { animation: bhp-sg-homeb 24s linear infinite; }
.sg-sleep i  { animation: bhp-sg-sleep 24s linear infinite; }
.sg-walk i   { animation: bhp-sg-walk 24s linear infinite; }
.sg-call i   { animation: bhp-sg-call 24s linear infinite; }
.sg-sleepb i { animation: bhp-sg-sleepb 24s linear infinite; }

.sg-homea span  { animation: bhp-lb-homea 24s linear infinite; }
.sg-towork span { animation: bhp-lb-towork 24s linear infinite; }
.sg-atwork span { animation: bhp-lb-atwork 24s linear infinite; }
.sg-gohome span { animation: bhp-lb-gohome 24s linear infinite; }
.sg-homeb span  { animation: bhp-lb-homeb 24s linear infinite; }
.sg-sleep span  { animation: bhp-lb-sleep 24s linear infinite; }
.sg-walk span   { animation: bhp-lb-walk 24s linear infinite; }
.sg-call span   { animation: bhp-lb-call 24s linear infinite; }

@keyframes bhp-sg-homea {
  0% { transform: scaleX(0); }
  31.3% { transform: scaleX(1); }
  96.5% { transform: scaleX(1); opacity: 1; }
  99%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes bhp-sg-towork {
  0%, 31.3% { transform: scaleX(0); }
  37.57% { transform: scaleX(1); }
  96.5% { transform: scaleX(1); opacity: 1; }
  99%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes bhp-sg-atwork {
  0%, 37.57% { transform: scaleX(0); }
  70.96% { transform: scaleX(1); }
  96.5% { transform: scaleX(1); opacity: 1; }
  99%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes bhp-sg-gohome {
  0%, 70.96% { transform: scaleX(0); }
  77.22% { transform: scaleX(1); }
  96.5% { transform: scaleX(1); opacity: 1; }
  99%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes bhp-sg-homeb {
  0%, 77.22% { transform: scaleX(0); }
  96% { transform: scaleX(1); opacity: 1; }
  99%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes bhp-sg-sleep {
  0% { transform: scaleX(0); }
  29.22% { transform: scaleX(1); }
  96.5% { transform: scaleX(1); opacity: 1; }
  99%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes bhp-sg-walk {
  0%, 52.17% { transform: scaleX(0); }
  58.43% { transform: scaleX(1); }
  96.5% { transform: scaleX(1); opacity: 1; }
  99%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes bhp-sg-call {
  0%, 77.22% { transform: scaleX(0); }
  81.74% { transform: scaleX(1); }
  96.5% { transform: scaleX(1); opacity: 1; }
  99%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes bhp-sg-sleepb {
  0%, 93.91% { transform: scaleX(0); }
  96% { transform: scaleX(1); opacity: 1; }
  99%, 100% { transform: scaleX(1); opacity: 0; }
}

@keyframes bhp-lb-homea {
  0% { opacity: 0; }
  1.8% { opacity: 1; }
  96.5% { opacity: 1; }
  99%, 100% { opacity: 0; }
}
@keyframes bhp-lb-towork {
  0%, 31.3% { opacity: 0; }
  33.1% { opacity: 1; }
  96.5% { opacity: 1; }
  99%, 100% { opacity: 0; }
}
@keyframes bhp-lb-atwork {
  0%, 37.57% { opacity: 0; }
  39.37% { opacity: 1; }
  96.5% { opacity: 1; }
  99%, 100% { opacity: 0; }
}
@keyframes bhp-lb-gohome {
  0%, 70.96% { opacity: 0; }
  72.76% { opacity: 1; }
  96.5% { opacity: 1; }
  99%, 100% { opacity: 0; }
}
@keyframes bhp-lb-homeb {
  0%, 77.22% { opacity: 0; }
  79.02% { opacity: 1; }
  96.5% { opacity: 1; }
  99%, 100% { opacity: 0; }
}
@keyframes bhp-lb-sleep {
  0% { opacity: 0; }
  1.8% { opacity: 1; }
  96.5% { opacity: 1; }
  99%, 100% { opacity: 0; }
}
@keyframes bhp-lb-walk {
  0%, 52.17% { opacity: 0; }
  53.97% { opacity: 1; }
  96.5% { opacity: 1; }
  99%, 100% { opacity: 0; }
}
@keyframes bhp-lb-call {
  0%, 77.22% { opacity: 0; }
  79.02% { opacity: 1; }
  96.5% { opacity: 1; }
  99%, 100% { opacity: 0; }
}
@media (max-width: 640px) {
  .sg-towork span, .sg-gohome span,
  .sg-walk span, .sg-call span {
    display: none;
  }
}

/* =========================================================
   How a study runs: each step carries a looping mini-scene
   ========================================================= */
/* Grid keeps each number, text and scene on one aligned row; rows and
   scenes are evenly spaced. Overrides the generic .bhp-steps layout. */
.bhp-runsteps {
  gap: 1.9rem;
}
.bhp-runsteps li {
  display: grid;
  grid-template-columns: 2.2rem 1fr 9.5rem;
  column-gap: 1.5rem;
  align-items: center;
  padding-left: 0;
}
.bhp-runsteps li::before {
  position: static;
}
.bhp-runstep-text {
  grid-column: 2;
}
.bhp-runscene {
  grid-column: 3;
  width: 9.5rem;
  height: auto;
  justify-self: center;
}
@media (max-width: 640px) {
  .bhp-runsteps li {
    grid-template-columns: 2.2rem 1fr;
    row-gap: 0.6rem;
    align-items: start;
  }
  .bhp-runscene {
    grid-column: 2;
    justify-self: start;
  }
}

/* Scene 1 — intake: the conversation goes back and forth */
.talk-a, .talk-b {
  animation: bhp-talk 7s infinite;
}
.talk-b { animation-delay: 3.5s; }
@keyframes bhp-talk {
  0%, 44% { opacity: 1; transform: translateY(-2px); }
  50%, 94% { opacity: 0.35; transform: translateY(0); }
  100% { opacity: 1; }
}

/* Scene 2 — agreements: the signature draws, the check lands */
.sig-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bhp-sig 6s infinite;
}
@keyframes bhp-sig {
  0%, 8% { stroke-dashoffset: 100; }
  45%, 100% { stroke-dashoffset: 0; }
}
.sig-check {
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
  animation: bhp-sigcheck 6s infinite;
}
@keyframes bhp-sigcheck {
  0%, 48% { transform: scale(0); }
  58%, 92% { transform: scale(1); }
  100% { transform: scale(0); }
}

/* Scene 3 — configuration: the sliders find their positions */
.knob { animation: bhp-knob 7s ease-in-out infinite; }
.knob.k1 { --bhp-slide: 55px; }
.knob.k2 { --bhp-slide: 25px; animation-delay: 0.9s; }
.knob.k3 { --bhp-slide: 68px; animation-delay: 1.8s; }
@keyframes bhp-knob {
  0%, 10% { transform: translateX(0); }
  28%, 78% { transform: translateX(var(--bhp-slide)); }
  95%, 100% { transform: translateX(0); }
}

/* Scene 4 — enrollment: the activation code types itself */
.run-digit {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  animation: bhp-rundigit 5.5s infinite;
}
.run-digit:nth-of-type(1) { animation-delay: 0s; }
.run-digit:nth-of-type(2) { animation-delay: 0.25s; }
.run-digit:nth-of-type(3) { animation-delay: 0.5s; }
.run-digit:nth-of-type(4) { animation-delay: 0.75s; }
.run-digit:nth-of-type(5) { animation-delay: 1s; }
.run-digit:nth-of-type(6) { animation-delay: 1.25s; }
@keyframes bhp-rundigit {
  0% { opacity: 0; }
  6%, 84% { opacity: 1; }
  93%, 100% { opacity: 0; }
}
.enroll-check {
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
  animation: bhp-enrollcheck 5.5s infinite;
}
@keyframes bhp-enrollcheck {
  0%, 32% { transform: scale(0); }
  40%, 88% { transform: scale(1); }
  95%, 100% { transform: scale(0); }
}

/* Scene 5 — monitoring: site bars fill, the live dot breathes */
.bar {
  transform: scaleY(0);
  transform-origin: bottom;
  transform-box: fill-box;
  animation: bhp-bar 6s infinite;
}
.bar.b2 { animation-delay: 0.4s; }
.bar.b3 { animation-delay: 0.8s; }
.bar.b4 { animation-delay: 1.2s; }
@keyframes bhp-bar {
  0%, 6% { transform: scaleY(0); }
  26%, 86% { transform: scaleY(1); }
  96%, 100% { transform: scaleY(0); }
}
.pulse-dot { animation: bhp-dotbreathe 2.4s ease-in-out infinite; }

/* Scene 6 — delivery: exports drop into the crate */
.deliver-sheet {
  opacity: 0;
  animation: bhp-deliver 4.5s ease-in infinite;
}
.deliver-sheet.d2 { animation-delay: 2.25s; }
@keyframes bhp-deliver {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  38% { transform: translateY(44px); opacity: 1; }
  88% { transform: translateY(44px); opacity: 1; }
  97%, 100% { transform: translateY(44px); opacity: 0; }
}

/* Notable projects meta line */
.bhp-project-meta {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bhp-blue-deep);
}

/* =========================================================
   Reduced motion: every scene rests in a settled state
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .bhp-dayseg i, .bhp-dayseg span, .talk-a, .talk-b, .sig-line, .sig-check,
  .knob, .run-digit, .enroll-check, .bar, .pulse-dot, .deliver-sheet {
    animation: none;
  }
  /* The full day rests fully drawn, all labels shown */
  .bhp-dayseg i { transform: scaleX(1); }
  .bhp-dayseg span { opacity: 1; }
  .sig-line { stroke-dashoffset: 0; }
  .sig-check, .enroll-check { transform: scale(1); }
  .knob { transform: translateX(var(--bhp-slide)); }
  .run-digit { opacity: 1; }
  .bar { transform: scaleY(1); }
  .deliver-sheet { transform: translateY(44px); opacity: 1; }
  .deliver-sheet.d2 { opacity: 0; }
}