/* Participant page — bespoke animations in the brand illustration
   language: black line art, yellow accent fills, white ground.
   Strict CSP: all styling and keyframes live here; no inline styles.
   Sections carrying [data-animate] are paused off-viewport by website.js
   (adds .bhp-anim-paused). The shared .ln/.fy vocabulary lives in
   website.css. */

/* =========================================================
   Block 2 — How it works: four steps, highlighted in turn
   (16s cycle, 4s per step) with continuously looping scenes
   ========================================================= */
.bhp-step {
  position: relative;
  animation: bhp-stepglow 16s infinite;
}
.bhp-step .scene {
  width: 100%;
  height: auto;
  margin-bottom: 0.9rem;
}
.bhp-step-1 { animation-delay: 0s; }
.bhp-step-2 { animation-delay: 4s; }
.bhp-step-3 { animation-delay: 8s; }
.bhp-step-4 { animation-delay: 12s; }
@keyframes bhp-stepglow {
  0%, 22% {
    border-color: var(--bhp-yellow);
    box-shadow: 0 6px 18px rgba(255, 205, 60, 0.25);
    transform: translateY(-3px);
  }
  25%, 100% {
    border-color: var(--bhp-line);
    box-shadow: none;
    transform: translateY(0);
  }
}

/* Scene 1 — informed consent: the tick draws itself on the form */
.consent-tick {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bhp-consent 5s infinite;
}
@keyframes bhp-consent {
  0%, 14% { stroke-dashoffset: 100; }
  40%, 90% { stroke-dashoffset: 0; }
  98%, 100% { stroke-dashoffset: 100; }
}

/* Scene 2 — setup with the study manager: a friendly gesture toward the
   phone while the activation code types itself */
.manager-arm {
  animation: bhp-managerarm 3.6s ease-in-out infinite;
  transform-origin: 68px 74px;
  transform-box: view-box;
}
@keyframes bhp-managerarm {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-9deg); }
}
.code-digit {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  opacity: 0;
  animation: bhp-digit 5.2s infinite;
}
.code-digit:nth-of-type(1) { animation-delay: 0s; }
.code-digit:nth-of-type(2) { animation-delay: 0.28s; }
.code-digit:nth-of-type(3) { animation-delay: 0.56s; }
.code-digit:nth-of-type(4) { animation-delay: 0.84s; }
.code-digit:nth-of-type(5) { animation-delay: 1.12s; }
.code-digit:nth-of-type(6) { animation-delay: 1.4s; }
.code-digit:nth-of-type(7) { animation-delay: 1.68s; }
.code-digit:nth-of-type(8) { animation-delay: 1.96s; }
@keyframes bhp-digit {
  0% { opacity: 0; }
  6%, 84% { opacity: 1; }
  93%, 100% { opacity: 0; }
}

/* Scene 3 — the phone rides along in the back pocket, measuring quietly.
   The signal dots start hidden behind the phone (drawn beneath it) and
   emerge above its top edge as they rise. */
.pocket-phone {
  animation: bhp-pocketbob 4.4s ease-in-out infinite;
}
@keyframes bhp-pocketbob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
.signal-dot {
  animation: bhp-signal 3.2s ease-out infinite;
  opacity: 0;
}
.signal-dot.s2 { animation-delay: 1.05s; }
.signal-dot.s3 { animation-delay: 2.1s; }
@keyframes bhp-signal {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 0.6; }
  100% { transform: translateY(-22px); opacity: 0; }
}

/* Scene 4 — measurements become science: dots into the flask */
.flask-drop {
  animation: bhp-flaskdrop 2.6s ease-in infinite;
  opacity: 0;
}
.flask-drop.d2 { animation-delay: 1.3s; }
@keyframes bhp-flaskdrop {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  58% { transform: translateY(52px); opacity: 1; }
  66%, 100% { transform: translateY(52px); opacity: 0; }
}
.flask-bubble {
  animation: bhp-bubble 2.8s ease-in-out infinite;
  opacity: 0;
}
.flask-bubble.b2 { animation-delay: 1.4s; }
@keyframes bhp-bubble {
  0% { transform: translateY(0); opacity: 0; }
  25% { opacity: 0.9; }
  100% { transform: translateY(-16px); opacity: 0; }
}

/* =========================================================
   Block 3 — What the app measures: the probe
   (rings pulse, chips light in turn, the content bubble is
   crossed out in red and dropped away; 13.5s narrative cycle)
   ========================================================= */
.bhp-probe {
  position: relative;
  height: 24rem;
  max-width: 44rem;
  margin: 0 auto;
}
.bhp-probe-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6rem;
  height: 6rem;
  margin: -3rem 0 0 -3rem;
  border: 2px dashed var(--bhp-blue);
  border-radius: 50%;
  opacity: 0;
  animation: bhp-ringgrow 4.5s linear infinite;
}
.bhp-probe-ring.r2 { animation-delay: 1.5s; }
.bhp-probe-ring.r3 { animation-delay: 3s; }
@keyframes bhp-ringgrow {
  0% { transform: scale(0.4); opacity: 0.5; }
  100% { transform: scale(4.4); opacity: 0; }
}
.bhp-probe-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5.6rem;
}
.bhp-probe-phone .mark-screen {
  animation: bhp-spin 30s linear infinite;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
/* Chips are placed by their centre, mirrored around the phone, so the
   phone sits exactly between them regardless of label width. The
   `translate` property carries the centering; `transform` stays free
   for the glow keyframes. */
.bhp-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: calc(-50% + var(--dx, 0rem)) calc(-50% + var(--dy, 0rem));
  background: #fff;
  border: 2px solid #000;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  animation: bhp-chipglow 13.5s infinite;
}
.bhp-chip svg { width: 1rem; height: 1rem; flex: none; }
.bhp-chip.c1 { --dx: -8rem;    --dy: -8.5rem; animation-delay: 0s; }
.bhp-chip.c2 { --dx: 8rem;     --dy: -8.5rem; animation-delay: 1.5s; }
.bhp-chip.c3 { --dx: 13.5rem;  --dy: -0.5rem; animation-delay: 3s; }
.bhp-chip.c4 { --dx: 6.5rem;   --dy: 8.6rem;  animation-delay: 4.5s; }
.bhp-chip.c5 { --dx: -6.5rem;  --dy: 8.6rem;  animation-delay: 6s; }
.bhp-chip.c6 { --dx: -13.5rem; --dy: -0.5rem; animation-delay: 7.5s; }
@keyframes bhp-chipglow {
  0%, 8.5% { background: #fff; transform: translateY(0); }
  3.5% { background: var(--bhp-yellow); transform: translateY(-4px); }
  9%, 100% { background: #fff; }
}
.bhp-bubble {
  position: absolute;
  right: 1%;
  bottom: 0;
  width: 12.5rem;
  background: #fff;
  border: 2px solid #000;
  border-radius: 0.9rem 0.9rem 0.9rem 0.2rem;
  padding: 0.9rem 1rem 0.8rem;
  opacity: 0;
  animation: bhp-bubblelife 13.5s infinite;
}
.bhp-bubble .line {
  height: 6px;
  border-radius: 3px;
  background: var(--bhp-blue-pale);
  margin-bottom: 6px;
}
.bhp-bubble .line.short { width: 70%; }
.bhp-bubble .cap {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bhp-ink-soft);
  margin-top: 0.5rem;
}
@keyframes bhp-bubblelife {
  0%, 60% { opacity: 0; transform: translateX(2.2rem); }
  65%, 90% { opacity: 1; transform: translateX(0); }
  97%, 100% { opacity: 0; transform: translateY(3rem); }
}
/* The refusal: a red cross strikes through the whole bubble */
.bhp-bubble::before,
.bhp-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.3rem;
  width: 4.4rem;
  height: 4px;
  border-radius: 2px;
  background: #c0504d;
  opacity: 0;
  animation: bhp-bubblecross 13.5s infinite;
}
.bhp-bubble::before { transform: translateX(-50%) rotate(40deg); }
.bhp-bubble::after { transform: translateX(-50%) rotate(-40deg); }
@keyframes bhp-bubblecross {
  0%, 72% { opacity: 0; }
  76%, 100% { opacity: 1; }
}
@media (max-width: 640px) {
  .bhp-probe { height: 28rem; }
  .bhp-chip.c1 { --dx: -4.6rem;  --dy: -10rem; }
  .bhp-chip.c2 { --dx: 4.6rem;   --dy: -10rem; }
  .bhp-chip.c3 { --dx: 6.4rem;   --dy: -3.4rem; }
  .bhp-chip.c4 { --dx: 4.2rem;   --dy: 10rem; }
  .bhp-chip.c5 { --dx: -4.2rem;  --dy: 10rem; }
  .bhp-chip.c6 { --dx: -6.4rem;  --dy: -3.4rem; }
}

/* =========================================================
   Block 4 — Your privacy: the envelope's journey
   One stage, four scenes (6s each, 24s cycle); the four
   promise cards below highlight in sync.
   ========================================================= */
.bhp-stage {
  display: block;
  width: 100%;
  max-width: 52rem;
  height: auto;
  margin: 0 auto 1.25rem;
}
.bhp-stage .scene-a, .bhp-stage .scene-b, .bhp-stage .scene-c, .bhp-stage .scene-d {
  opacity: 0;
  animation: bhp-scene 24s infinite;
}
.bhp-stage .scene-a { animation-delay: 0s; }
.bhp-stage .scene-b { animation-delay: 6s; }
.bhp-stage .scene-c { animation-delay: 12s; }
.bhp-stage .scene-d { animation-delay: 18s; }
@keyframes bhp-scene {
  0%, 1.5% { opacity: 0; }
  4%, 21.5% { opacity: 1; }
  25%, 100% { opacity: 0; }
}
/* Promise cards highlight like the how-it-works steps (Raj: align the
   two sections' animation styles) */
.bhp-promise {
  animation: bhp-promiseglow 24s infinite;
}
.bhp-promise.p1 { animation-delay: 0s; }
.bhp-promise.p2 { animation-delay: 6s; }
.bhp-promise.p3 { animation-delay: 12s; }
.bhp-promise.p4 { animation-delay: 18s; }
@keyframes bhp-promiseglow {
  0%, 21% {
    border-color: var(--bhp-yellow);
    box-shadow: 0 6px 18px rgba(255, 205, 60, 0.25);
    transform: translateY(-3px);
  }
  25%, 100% {
    border-color: var(--bhp-line);
    box-shadow: none;
    transform: translateY(0);
  }
}

/* Scene A: a measurement drops in, the flap closes, the seal lands */
.env-dot { animation: bhp-envdot 24s infinite; }
@keyframes bhp-envdot {
  0% { transform: translateY(-95px); opacity: 0; }
  1.5% { opacity: 1; }
  5% { transform: translateY(0); opacity: 1; }
  7%, 100% { transform: translateY(0); opacity: 0; }
}
.env-flap-open { animation: bhp-flapopen 24s infinite; }
.env-flap-closed { opacity: 0; animation: bhp-flapclosed 24s infinite; }
@keyframes bhp-flapopen {
  0%, 7% { opacity: 1; }
  8%, 100% { opacity: 0; }
}
@keyframes bhp-flapclosed {
  0%, 7% { opacity: 0; }
  8%, 100% { opacity: 1; }
}
.env-seal { transform: scale(0); transform-origin: center; transform-box: fill-box; animation: bhp-envseal 24s infinite; }
@keyframes bhp-envseal {
  0%, 10% { transform: scale(0); }
  12.5%, 100% { transform: scale(1); }
}

/* Scene B: the envelope is used only as the consent form says — the
   tick draws while the data dots travel to the signed form */
.consent-flow {
  animation: bhp-consentflow 1.1s linear infinite;
}
@keyframes bhp-consentflow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -16; }
}
.bhp-stage .consent-tick {
  animation: bhp-stageconsent 24s infinite;
}
@keyframes bhp-stageconsent {
  0%, 28% { stroke-dashoffset: 100; }
  36%, 100% { stroke-dashoffset: 0; }
}

/* Scene C: money bounces off — clearly money, clearly refused */
.coin { animation: bhp-coin 24s infinite; }
@keyframes bhp-coin {
  0%, 52% { transform: translate(150px, -60px); opacity: 0; }
  54% { opacity: 1; }
  59% { transform: translate(0, 0); opacity: 1; }
  65% { transform: translate(-60px, 46px) rotate(-24deg); opacity: 1; }
  70%, 100% { transform: translate(-110px, 130px) rotate(-42deg); opacity: 0; }
}
.coin-eur {
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  fill: #000;
}
.coin-cross {
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
  animation: bhp-coincross 24s infinite;
}
@keyframes bhp-coincross {
  0%, 58% { transform: scale(0); }
  61%, 100% { transform: scale(1); }
}
.env-nudge { animation: bhp-envnudge 24s infinite; }
@keyframes bhp-envnudge {
  0%, 58% { transform: translateX(0); }
  60% { transform: translateX(6px) rotate(1.5deg); }
  63%, 100% { transform: translateX(0); }
}

/* Scene D: your data, your call — the envelope bounces gently up and
   down between your hands, held by no one else. Purely vertical (Raj,
   round 5); alternate + ease-in-out keeps both ends of the travel smooth. */
.env-hover {
  animation: bhp-envhover 1.6s ease-in-out infinite alternate;
}
@keyframes bhp-envhover {
  from { transform: translateY(-5px); }
  to { transform: translateY(5px); }
}

/* =========================================================
   Reduced motion: every scene rests in a meaningful state
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .bhp-step, .consent-tick, .manager-arm, .code-digit, .pocket-phone,
  .signal-dot, .flask-drop, .flask-bubble,
  .bhp-probe-ring, .bhp-probe-phone .mark-screen, .bhp-chip, .bhp-bubble,
  .bhp-bubble::before, .bhp-bubble::after,
  .bhp-stage .scene-a, .bhp-stage .scene-b, .bhp-stage .scene-c, .bhp-stage .scene-d,
  .bhp-promise, .env-dot, .env-flap-open, .env-flap-closed, .env-seal,
  .consent-flow, .bhp-stage .consent-tick, .coin, .coin-cross, .env-nudge,
  .env-hover {
    animation: none;
  }
  .consent-tick, .bhp-stage .consent-tick { stroke-dashoffset: 0; }
  .code-digit { opacity: 1; }
  .signal-dot, .flask-drop, .flask-bubble { opacity: 0.8; }
  .bhp-probe-ring { opacity: 0.3; transform: scale(2.4); }
  .bhp-chip { background: var(--bhp-yellow); }
  .bhp-bubble { opacity: 1; transform: none; }
  .bhp-bubble::before, .bhp-bubble::after { opacity: 1; }
  .bhp-stage .scene-a { opacity: 1; }
  .env-dot { opacity: 0; }
  .env-flap-open { opacity: 0; }
  .env-flap-closed { opacity: 1; }
  .env-seal { transform: scale(1); }
}