/**
 * Service page journey (template-parts/service/journey.php): layout, the step line and every
 * scene's animation. Each scene's resting state is its finished picture; .is-playing on the
 * step animates it into that state. Scene markup lives in template-parts/service/scenes/.
 */
/* ---- Layout: phones and tablets = vertical timeline, 1024px+ = one row -------------- */
.bcj-steps { --bcj-gap: 1.25rem; display: grid; gap: var(--bcj-gap); list-style: none; margin: 0; padding: 0; }
.bcj-step { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 1rem; }
.bcj-node { position: relative; z-index: 1; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: #fff; border: 2px solid #E2E8F0; color: #555555; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: background .4s, border-color .4s, color .4s; }
.is-active > .bcj-node, .is-done > .bcj-node { background: linear-gradient(135deg, #2CA9A6, #1F7E7B); border-color: transparent; color: #fff; }
.is-active > .bcj-node::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(44, 169, 166, .4); animation: bcj-ping 1.6s ease-out infinite; }
.bcj-label { margin-top: .75rem; font-size: 15px; font-weight: 700; color: #333333; line-height: 1.3; }
.bcj-chip { display: inline-block; margin-top: .4rem; padding: .15rem .55rem; border-radius: 9999px; background: #EAF7F6; color: #1F7E7B; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
/* Link to the next step: vertical on phones, from this number down to the next. */
.bcj-link { position: absolute; left: calc(1.25rem - 1px); top: 2.5rem; bottom: calc(-1 * var(--bcj-gap)); width: 2px; background: #E2E8F0; overflow: hidden; }
.bcj-link-fill { position: absolute; inset: 0; background: #2CA9A6; transform: scaleY(0); transform-origin: top; transition: transform .7s ease; }
.is-done > .bcj-link .bcj-link-fill { transform: none; }
/* Small laptops: five columns are narrow, so the pictures are drawn a little smaller. */
@media (min-width: 1024px) and (max-width: 1279px) { .bcj-scene > * { transform: scale(.86); } }
@media (min-width: 1024px) {
  .bcj-steps { --bcj-gap: 1.5rem; grid-template-columns: repeat(var(--bcj-count), minmax(0, 1fr)); }
  .bcj-step { display: flex; flex-direction: column; align-items: center; row-gap: 1rem; text-align: center; }
  .bcj-body { width: 100%; }
  /* Horizontal: from this number's edge to the next number's edge (next column = 100% + gap along). */
  .bcj-link { left: calc(50% + 1.25rem + 6px); right: calc(-50% - var(--bcj-gap) + 1.25rem + 6px); top: calc(1.25rem - 1px); bottom: auto; width: auto; height: 2px; }
  .bcj-link-fill { transform: scaleX(0); transform-origin: left; }
}

/* ---- Scene box ---------------------------------------------------------------------- */
.bcj-scene { position: relative; height: 9.5rem; border-radius: 1.5rem; background: #F7F8F8; border: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: border-color .4s, box-shadow .4s, transform .4s, background-color .4s; }
.is-active .bcj-scene { border-color: #2CA9A6; background: #F2FAF9; box-shadow: 0 14px 30px -14px rgba(31, 126, 123, .45); transform: translateY(-4px); }
.bcj-scene .material-symbols-outlined { line-height: 1; }

/* 1. Contact: a phone, messages pop in, a reply is typed, then a tick. */
.bcj-phone { position: relative; width: 5.5rem; height: 8rem; border: 3px solid #333333; border-radius: 1.1rem; background: #fff; padding: .75rem .45rem .5rem; display: flex; flex-direction: column; gap: .35rem; }
.bcj-phone::before { content: ""; position: absolute; top: .3rem; left: 50%; width: 1.4rem; height: .2rem; margin-left: -.7rem; border-radius: 9999px; background: #333333; }
.bcj-bubble { display: inline-flex; align-items: center; justify-content: center; height: 1.4rem; border-radius: .7rem; }
.bcj-bubble .material-symbols-outlined { font-size: 15px; }
.bcj-b1 { align-self: flex-start; width: 2.6rem; background: #EAF7F6; color: #1F7E7B; border-bottom-left-radius: .2rem; }
.bcj-b2 { align-self: flex-start; width: 3.4rem; background: #25D366; color: #fff; border-bottom-left-radius: .2rem; }
.bcj-reply { position: relative; align-self: flex-end; width: 2.6rem; height: 1.4rem; }
.bcj-reply > * { position: absolute; inset: 0; border-bottom-right-radius: .2rem; }
.bcj-typing { background: #E9EDEF; gap: .2rem; opacity: 0; }
.bcj-typing i { width: .3rem; height: .3rem; border-radius: 9999px; background: #555555; }
.bcj-tick { background: #2CA9A6; color: #fff; }
.is-playing .bcj-b1 { animation: bcj-pop .4s .1s both; }
.is-playing .bcj-b2 { animation: bcj-pop .4s .4s both; }
.is-playing .bcj-typing { animation: bcj-typing-life 1.1s .7s both; }
.is-playing .bcj-typing i { animation: bcj-dot .9s infinite; }
.is-playing .bcj-typing i:nth-child(2) { animation-delay: .15s; }
.is-playing .bcj-typing i:nth-child(3) { animation-delay: .3s; }
.is-playing .bcj-tick { animation: bcj-pop .4s 1.7s both; }

/* 2. Profiles: three nurse cards fan out, the middle one is picked. */
.bcj-cards { position: relative; width: 11rem; height: 7rem; }
.bcj-pcard { position: absolute; left: 50%; top: 50%; width: 4rem; height: 5.25rem; margin: -2.625rem 0 0 -2rem; background: #fff; border: 1.5px solid #E2E8F0; border-radius: .75rem; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .2); display: flex; flex-direction: column; align-items: center; gap: .3rem; padding-top: .5rem; }
.bcj-av { width: 1.7rem; height: 1.7rem; border-radius: 9999px; background: #EAF7F6; color: #2CA9A6; display: flex; align-items: center; justify-content: center; }
.bcj-av .material-symbols-outlined { font-size: 20px; }
.bcj-line { display: block; width: 2.4rem; height: .25rem; border-radius: 9999px; background: #E2E8F0; }
.bcj-line.is-short { width: 1.6rem; }
.bcj-stars { display: flex; color: #F59E0B; }
.bcj-stars .material-symbols-outlined { font-size: 10px; }
.bcj-pc1 { transform: translateX(-3.2rem) rotate(-9deg); }
.bcj-pc3 { transform: translateX(3.2rem) rotate(9deg); }
.bcj-pc2 { z-index: 1; transform: translateY(-.25rem) scale(1.12); border-color: #2CA9A6; }
.bcj-pick { position: absolute; top: -.5rem; right: -.5rem; width: 1.3rem; height: 1.3rem; border-radius: 9999px; background: #1F7E7B; color: #fff; display: flex; align-items: center; justify-content: center; }
.bcj-pick .material-symbols-outlined { font-size: 14px; }
.is-playing .bcj-pc1 { animation: bcj-fan-left .55s .15s both; }
.is-playing .bcj-pc3 { animation: bcj-fan-right .55s .15s both; }
.is-playing .bcj-pc2 { animation: bcj-pick-card 1.2s .15s both; }
.is-playing .bcj-pick { animation: bcj-pop .4s 1.3s both; }

/* 3. Interview: a video call with the family and the nurse, voices moving. */
.bcj-call { position: relative; width: 11rem; height: 7rem; border-radius: .9rem; background: #1F2937; padding: .45rem; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: .4rem; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .45); }
.bcj-tile { border-radius: .55rem; display: flex; align-items: center; justify-content: center; }
.bcj-tile .material-symbols-outlined { font-size: 30px; }
.bcj-t1 { background: #374151; color: #E5E7EB; }
.bcj-t2 { background: #2CA9A6; color: #fff; }
.bcj-live { position: absolute; top: .7rem; left: .7rem; width: .45rem; height: .45rem; border-radius: 9999px; background: #EF4444; z-index: 1; }
.bcj-wave { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: .2rem; height: .9rem; }
.bcj-wave i { width: .2rem; height: .8rem; border-radius: 9999px; background: #E5E7EB; transform: scaleY(.45); }
.is-playing .bcj-t1 { animation: bcj-in-left .4s .1s both; }
.is-playing .bcj-t2 { animation: bcj-in-right .4s .25s both; }
.is-playing .bcj-live { animation: bcj-blink 1s infinite; }
.is-playing .bcj-wave i { animation: bcj-talk .8s ease-in-out infinite alternate; }
.is-playing .bcj-wave i:nth-child(2) { animation-delay: .15s; }
.is-playing .bcj-wave i:nth-child(3) { animation-delay: .3s; }
.is-playing .bcj-wave i:nth-child(4) { animation-delay: .1s; }
.is-playing .bcj-wave i:nth-child(5) { animation-delay: .25s; }

/* 4. Trial: a 2-hour ring fills around the home, a tick, then the FREE tag. */
.bcj-trial { position: relative; width: 6.5rem; height: 6.5rem; }
.bcj-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.bcj-ring circle { fill: none; stroke-width: 7; }
.bcj-ring-bg { stroke: #E2E8F0; }
.bcj-ring-fill { stroke: #2CA9A6; stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 0; }
.bcj-home { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #1F7E7B; }
.bcj-home .material-symbols-outlined { font-size: 30px; }
.bcj-home b { font-size: 12px; font-weight: 800; color: #333333; margin-top: .1rem; }
.bcj-done { position: absolute; top: .1rem; right: .1rem; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: #1F7E7B; color: #fff; display: flex; align-items: center; justify-content: center; }
.bcj-done .material-symbols-outlined { font-size: 16px; }
.bcj-free { position: absolute; bottom: -.1rem; right: -2rem; padding: .15rem .45rem; border-radius: .4rem; background: #F59E0B; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; transform: rotate(-8deg); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .35); }
.is-playing .bcj-ring-fill { animation: bcj-draw 1.2s .15s ease-in-out both; }
.is-playing .bcj-done { animation: bcj-pop .4s 1.35s both; }
.is-playing .bcj-free { animation: bcj-drop .5s 1.65s both; }

/* 5. Care begins: a calendar, the start day is stamped, a heart pops up. */
.bcj-cal { position: relative; width: 7rem; height: 6.5rem; background: #fff; border: 1.5px solid #E2E8F0; border-radius: .9rem; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .2); }
.bcj-cal-top { display: block; height: 1.4rem; border-radius: .8rem .8rem 0 0; background: linear-gradient(135deg, #2CA9A6, #1F7E7B); }
.bcj-cal-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; padding: .55rem .6rem; }
.bcj-cal-days i { height: .55rem; border-radius: .15rem; background: #E2E8F0; }
.bcj-cal-stamp { position: absolute; left: 50%; bottom: .75rem; width: 2rem; height: 2rem; margin-left: -1rem; border-radius: 9999px; background: #1F7E7B; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #fff; }
.bcj-cal-stamp .material-symbols-outlined { font-size: 20px; }
.bcj-heart { position: absolute; top: -.7rem; right: -.8rem; color: #F43F5E; }
.bcj-heart .material-symbols-outlined { font-size: 24px; }
.is-playing .bcj-cal { animation: bcj-in-up .4s .1s both; }
.is-playing .bcj-cal-stamp { animation: bcj-pop .4s .6s both; }
.is-playing .bcj-heart { animation: bcj-float .9s 1.05s both; }

/* assess: a clipboard; three checklist boxes tick one by one. */
.bcj-clip { position: relative; width: 6rem; height: 7rem; background: #fff; border: 1.5px solid #E2E8F0; border-radius: .8rem; padding: 1.35rem .65rem .5rem; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .2); display: flex; flex-direction: column; gap: .6rem; }
.bcj-clip::before { content: ""; position: absolute; top: -.45rem; left: 50%; width: 2.2rem; height: .9rem; margin-left: -1.1rem; border-radius: .35rem; background: linear-gradient(135deg, #2CA9A6, #1F7E7B); }
.bcj-row { display: flex; align-items: center; gap: .4rem; }
.bcj-box { width: .95rem; height: .95rem; border-radius: .25rem; background: #2CA9A6; border: 1.5px solid #2CA9A6; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bcj-box .material-symbols-outlined { font-size: 12px; font-weight: 700; }
.bcj-row .bcj-line { flex: 1; width: auto; }
.bcj-row:nth-child(2) .bcj-line { margin-right: .6rem; }
.is-playing .bcj-box { animation: bcj-tickbox .35s both; }
.is-playing .bcj-box .material-symbols-outlined { animation: bcj-pop .35s both; }
.is-playing .bcj-row:nth-child(1) .bcj-box, .is-playing .bcj-row:nth-child(1) .bcj-box .material-symbols-outlined { animation-delay: .35s; }
.is-playing .bcj-row:nth-child(2) .bcj-box, .is-playing .bcj-row:nth-child(2) .bcj-box .material-symbols-outlined { animation-delay: .8s; }
.is-playing .bcj-row:nth-child(3) .bcj-box, .is-playing .bcj-row:nth-child(3) .bcj-box .material-symbols-outlined { animation-delay: 1.25s; }

/* results: a phone; a report card slides in and its lines tick green. */
.bcj-report { margin-top: .15rem; padding: .45rem .4rem; border-radius: .55rem; background: #EAF7F6; border: 1px solid rgba(44, 169, 166, .25); display: flex; flex-direction: column; gap: .35rem; }
.bcj-report-top { display: block; height: .3rem; width: 55%; border-radius: 9999px; background: #1F7E7B; }
.bcj-rline { display: flex; align-items: center; gap: .25rem; }
.bcj-rline .bcj-line { flex: 1; width: auto; background: #CFE9E7; }
.bcj-rtick { width: .7rem; height: .7rem; border-radius: 9999px; background: #2CA9A6; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bcj-rtick .material-symbols-outlined { font-size: 9px; font-weight: 700; }
.is-playing .bcj-report { animation: bcj-in-up .45s .15s both; }
.is-playing .bcj-rline:nth-child(2) .bcj-rtick { animation: bcj-pop .35s .7s both; }
.is-playing .bcj-rline:nth-child(3) .bcj-rtick { animation: bcj-pop .35s 1s both; }
.is-playing .bcj-rline:nth-child(4) .bcj-rtick { animation: bcj-pop .35s 1.3s both; }

/* places: home and school joined by a path; a dot travels from one to the other, both get a tick. */
.bcj-places { position: relative; display: flex; align-items: center; gap: 2.4rem; }
.bcj-place { position: relative; width: 3.8rem; height: 3.8rem; border-radius: .9rem; background: #F2FAF9; border: 1.5px solid #2CA9A6; color: #1F7E7B; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .25); }
.bcj-place .material-symbols-outlined { font-size: 30px; }
.bcj-place .bcj-pick { top: -.45rem; right: -.45rem; }
.bcj-path { position: absolute; left: 3.8rem; right: 3.8rem; top: 50%; border-top: 2px dashed rgba(44, 169, 166, .45); }
.bcj-path i { position: absolute; top: -.3rem; left: 0; width: .55rem; height: .55rem; border-radius: 9999px; background: #2CA9A6; opacity: 0; }
.is-playing .bcj-place:first-child { animation: bcj-place-on .45s .15s both; }
.is-playing .bcj-place:first-child .bcj-pick { animation: bcj-pop .35s .55s both; }
.is-playing .bcj-path i { animation: bcj-travel .8s .75s ease-in-out both; }
.is-playing .bcj-place:last-child { animation: bcj-place-on .45s 1.45s both; }
.is-playing .bcj-place:last-child .bcj-pick { animation: bcj-pop .35s 1.8s both; }

/* progress: a chart line draws upward and a star pops on the top point. */
.bcj-chart { position: relative; width: 7.5rem; height: 5.75rem; background: #fff; border: 1.5px solid #E2E8F0; border-radius: .8rem; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .2); }
.bcj-chart svg { position: absolute; inset: .55rem; width: calc(100% - 1.1rem); height: calc(100% - 1.1rem); overflow: visible; }
.bcj-grid { stroke: #EEF2F4; stroke-width: 1.5; }
.bcj-trend { fill: none; stroke: #2CA9A6; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.bcj-dotp { fill: #fff; stroke: #1F7E7B; stroke-width: 2.5; }
.bcj-star { position: absolute; top: -.75rem; right: -.6rem; color: #F59E0B; }
.bcj-star .material-symbols-outlined { font-size: 26px; }
.is-playing .bcj-trend { animation: bcj-draw-line 1.1s .15s ease-in-out both; }
.is-playing .bcj-dotp { animation: bcj-pop .3s both; }
.is-playing .bcj-dotp:nth-of-type(1) { animation-delay: .2s; }
.is-playing .bcj-dotp:nth-of-type(2) { animation-delay: .5s; }
.is-playing .bcj-dotp:nth-of-type(3) { animation-delay: .8s; }
.is-playing .bcj-dotp:nth-of-type(4) { animation-delay: 1.1s; }
.is-playing .bcj-star { animation: bcj-float .7s 1.3s both; }

/* visit: a nurse arrives at the home (home, hotel or office), then a tick. */
.bcj-visit { position: relative; display: flex; align-items: flex-end; gap: .7rem; }
.bcj-nurse { position: relative; width: 2.9rem; height: 2.9rem; border-radius: 9999px; background: linear-gradient(135deg, #2CA9A6, #1F7E7B); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 16px -8px rgba(31, 126, 123, .6); }
.bcj-nurse .material-symbols-outlined { font-size: 24px; }
.bcj-nurse b { position: absolute; bottom: -.2rem; right: -.25rem; width: 1.15rem; height: 1.15rem; border-radius: 9999px; background: #fff; color: #EF4444; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; font-weight: 800; box-shadow: 0 2px 4px rgba(0, 0, 0, .15); }
.bcj-door { position: relative; width: 4.4rem; height: 4.4rem; border-radius: .9rem; background: #F2FAF9; border: 1.5px solid #2CA9A6; color: #1F7E7B; display: flex; align-items: center; justify-content: center; }
.bcj-door .material-symbols-outlined { font-size: 36px; }
.bcj-door .bcj-pick { top: -.45rem; right: -.45rem; }
.is-playing .bcj-door { animation: bcj-in-up .4s .1s both; }
.is-playing .bcj-nurse { animation: bcj-arrive .9s .35s cubic-bezier(.2, .8, .3, 1) both; }
.is-playing .bcj-door .bcj-pick { animation: bcj-pop .35s 1.35s both; }

/* sample: a tube fills, its cap pops on, then a tick. */
.bcj-rack { position: relative; display: flex; align-items: flex-end; gap: .5rem; padding: 0 .6rem .35rem; border-bottom: 4px solid #CBD5E1; border-radius: 0 0 .3rem .3rem; }
.bcj-tube { position: relative; display: block; width: 1.3rem; height: 5rem; border: 2px solid #94A3B8; border-top: 0; border-radius: 0 0 .65rem .65rem; background: #fff; overflow: hidden; }
.bcj-tube i { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: #E11D48; opacity: .85; }
.bcj-tube.is-empty i { height: 0; }
.bcj-cap { position: absolute; top: -.7rem; left: -.28rem; width: 1.6rem; height: .75rem; border-radius: .2rem; background: #2CA9A6; }
.bcj-tube-wrap { position: relative; padding-top: .7rem; }
.bcj-tube-wrap:not(.is-main) { opacity: .45; }
.bcj-rack .bcj-pick { top: -.4rem; right: -.9rem; }
.is-playing .bcj-tube-wrap.is-main .bcj-tube i { animation: bcj-fill 1.1s .2s ease-out both; }
.is-playing .bcj-tube-wrap.is-main .bcj-cap { animation: bcj-cap-on .4s 1.3s both; }
.is-playing .bcj-rack .bcj-pick { animation: bcj-pop .35s 1.7s both; }

/* lab: a flask with bubbles rising, then a tick. */
.bcj-lab { position: relative; width: 5.6rem; height: 5.6rem; border-radius: 9999px; background: #F2FAF9; border: 1.5px solid rgba(44, 169, 166, .35); color: #1F7E7B; display: flex; align-items: center; justify-content: center; }
.bcj-lab > .material-symbols-outlined { font-size: 48px; }
.bcj-bubbles { position: absolute; top: .9rem; left: 50%; width: 2rem; height: 1.6rem; margin-left: -1rem; }
.bcj-bubbles i { position: absolute; bottom: 0; width: .45rem; height: .45rem; border-radius: 9999px; background: #2CA9A6; opacity: 0; }
.bcj-bubbles i:nth-child(1) { left: .2rem; }
.bcj-bubbles i:nth-child(2) { left: .85rem; width: .35rem; height: .35rem; }
.bcj-bubbles i:nth-child(3) { left: 1.4rem; }
.bcj-lab .bcj-pick { top: .1rem; right: .1rem; }
.is-playing .bcj-lab { animation: bcj-in-up .4s .1s both; }
.is-playing .bcj-bubbles i { animation: bcj-bubble 1s ease-out 2; }
.is-playing .bcj-bubbles i:nth-child(1) { animation-delay: .3s; }
.is-playing .bcj-bubbles i:nth-child(2) { animation-delay: .55s; }
.is-playing .bcj-bubbles i:nth-child(3) { animation-delay: .8s; }
.is-playing .bcj-lab .bcj-pick { animation: bcj-pop .35s 1.8s both; }

/* drip: an IV bag, drops falling down the line, and a small timer ring filling. */
.bcj-drip { position: relative; display: flex; align-items: center; gap: 1.1rem; }
.bcj-iv { position: relative; display: flex; flex-direction: column; align-items: center; }
.bcj-bag { position: relative; width: 3rem; height: 3.8rem; border: 2px solid #2CA9A6; border-radius: .6rem .6rem .9rem .9rem; background: #fff; overflow: hidden; }
.bcj-bag::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: #CFE9E7; }
.bcj-iv .bcj-feed { position: relative; width: 2px; height: 2.4rem; background: #94A3B8; }
.bcj-iv .bcj-feed i { position: absolute; left: -2px; top: 0; width: 6px; height: 8px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #2CA9A6; opacity: 0; }
.bcj-timer { position: relative; width: 3.6rem; height: 3.6rem; }
.bcj-timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.bcj-timer circle { fill: none; stroke-width: 8; }
.bcj-timer .bcj-ring-bg { stroke: #E2E8F0; }
.bcj-timer .bcj-ring-fill { stroke: #2CA9A6; stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 0; }
.bcj-timer > .material-symbols-outlined { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #1F7E7B; }
.is-playing .bcj-iv .bcj-feed i { animation: bcj-drop-fall .7s linear 3; }
.is-playing .bcj-iv .bcj-feed i:nth-child(2) { animation-delay: .35s; }
.is-playing .bcj-timer .bcj-ring-fill { animation: bcj-draw 1.8s .2s linear both; }

/* ---- Promise: two nurses swap places --------------------------------------------------- */
.bcj-swap { position: relative; width: 7.5rem; height: 2.75rem; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; }
.bcj-sw { width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; }
.bcj-sw .material-symbols-outlined { font-size: 24px; }
.bcj-sw-a { background: #E2E8F0; color: #555555; }
.bcj-sw-b { background: #2CA9A6; color: #fff; }
.bcj-sw-icon { color: #1F7E7B; font-size: 22px; }
.is-playing .bcj-sw-a { animation: bcj-swap-a 1.1s .15s ease-in-out both; }
.is-playing .bcj-sw-b { animation: bcj-swap-b 1.1s .15s ease-in-out both; }
.is-playing .bcj-sw-icon { animation: bcj-spin 1.1s .15s ease-in-out both; }

/* ---- Keyframes -------------------------------------------------------------------------- */
@keyframes bcj-pop { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes bcj-arrive { 0% { opacity: 0; transform: translateX(-3.5rem); } 100% { opacity: 1; transform: none; } }
@keyframes bcj-fill { 0% { height: 0; } 100% { height: 62%; } }
@keyframes bcj-cap-on { 0% { opacity: 0; transform: translateY(-.9rem); } 70% { opacity: 1; transform: translateY(.1rem); } 100% { opacity: 1; transform: none; } }
@keyframes bcj-bubble { 0% { opacity: 0; transform: translateY(0) scale(.6); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-1.4rem) scale(1); } }
@keyframes bcj-drop-fall { 0% { opacity: 0; top: 0; } 15% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; top: calc(100% - 8px); } }
@keyframes bcj-place-on { 0% { background: #fff; border-color: #E2E8F0; color: #94A3B8; } 100% { background: #F2FAF9; border-color: #2CA9A6; color: #1F7E7B; } }
@keyframes bcj-travel { 0% { opacity: 1; left: 0; } 90% { opacity: 1; left: calc(100% - .55rem); } 100% { opacity: 0; left: calc(100% - .55rem); } }
@keyframes bcj-draw-line { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } }
@keyframes bcj-tickbox { 0% { background: #fff; border-color: #CBD5E1; } 100% { background: #2CA9A6; border-color: #2CA9A6; } }
@keyframes bcj-ping { 0% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes bcj-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-3px); opacity: 1; } }
@keyframes bcj-typing-life { 0% { opacity: 0; transform: scale(.6); } 15%, 85% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes bcj-fan-left { 0% { opacity: 0; transform: none; } 100% { opacity: 1; transform: translateX(-3.2rem) rotate(-9deg); } }
@keyframes bcj-fan-right { 0% { opacity: 0; transform: none; } 100% { opacity: 1; transform: translateX(3.2rem) rotate(9deg); } }
@keyframes bcj-pick-card { 0% { opacity: 0; transform: scale(.9); border-color: #E2E8F0; } 35%, 70% { opacity: 1; transform: scale(1); border-color: #E2E8F0; } 100% { opacity: 1; transform: translateY(-.25rem) scale(1.12); border-color: #2CA9A6; } }
@keyframes bcj-in-left { 0% { opacity: 0; transform: translateX(-10px); } 100% { opacity: 1; transform: none; } }
@keyframes bcj-in-right { 0% { opacity: 0; transform: translateX(10px); } 100% { opacity: 1; transform: none; } }
@keyframes bcj-in-up { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
@keyframes bcj-float { 0% { opacity: 0; transform: translateY(.6rem) scale(.5); } 50% { opacity: 1; transform: translateY(-.15rem) scale(1.15); } 100% { opacity: 1; transform: none; } }
@keyframes bcj-blink { 50% { opacity: .25; } }
@keyframes bcj-talk { 0% { transform: scaleY(.3); } 100% { transform: scaleY(1); } }
@keyframes bcj-draw { 0% { stroke-dashoffset: 264; } 100% { stroke-dashoffset: 0; } }
@keyframes bcj-drop { 0% { opacity: 0; transform: translateY(-1.5rem) rotate(-8deg); } 60% { opacity: 1; transform: translateY(.15rem) rotate(-8deg); } 100% { opacity: 1; transform: rotate(-8deg); } }
@keyframes bcj-swap-a { 0% { transform: none; } 50% { transform: translate(2.4rem, -.6rem) scale(.85); } 100% { transform: translateX(4.75rem); } }
@keyframes bcj-swap-b { 0% { transform: none; } 50% { transform: translate(-2.4rem, .6rem) scale(.85); } 100% { transform: translateX(-4.75rem); } }
@keyframes bcj-spin { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
  [data-journey] *, [data-journey] *::after { animation: none !important; transition: none !important; }
}