/* Original conceptual anatomy. Animation is an opt-in enhancement of readable text. */
.orthopedic-journey {
  --oj-ink: #16324a;
  --oj-teal: #096b72;
  --oj-green: #e4f1ed;
  --oj-blue: #e6eff7;
  --oj-line: #bfd5dc;
  padding-block: clamp(3rem, 5vw, 4rem);
  background: #fff;
  color: var(--oj-ink);
  overflow: clip;
  scroll-margin-top: 120px;
}
.orthopedic-journey .oj-container { position: relative; }
.orthopedic-journey .oj-heading { max-width: 820px; margin-bottom: 1.4rem; }
.orthopedic-journey .oj-heading h2 { max-width: 25ch; margin-bottom: .7rem; }
.orthopedic-journey .oj-intro { max-width: 72ch; color: #476071; font-size: 1.08rem; line-height: 1.75; }
.orthopedic-journey .oj-stage-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); }
.orthopedic-journey .oj-visual { position: relative; min-width: 0; margin: 0; padding: .8rem 0; border: 1px solid #d5e5e9; border-radius: 40% 40% 18px 18px / 15% 15% 18px 18px; background: linear-gradient(145deg, #f4f9fb, var(--oj-green)); overflow: hidden; }
.orthopedic-journey .oj-visual-label { position: absolute; z-index: 1; top: 2rem; left: 50%; width: max-content; max-width: 90%; transform: translateX(-50%); color: #476b77; font-size: .65rem; letter-spacing: .12em; text-align: center; }
.orthopedic-journey .oj-anatomy { width: 100%; height: auto; max-height: 420px; overflow: visible; }
.orthopedic-journey .oj-visual figcaption { padding: 0 1.5rem .7rem; color: #476071; text-align: center; font-size: .76rem; line-height: 1.5; }
.orthopedic-journey .oj-narrative { min-width: 0; padding-block: 1rem; }
.orthopedic-journey .oj-panels { min-height: 225px; }
.orthopedic-journey .oj-panel[hidden] { display: none; }
.orthopedic-journey .oj-panel-position { margin: 0 0 1.2rem; color: var(--oj-teal); font-size: .75rem; letter-spacing: .07em; font-variant-numeric: tabular-nums; }
.orthopedic-journey .oj-panel h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.22; }
.orthopedic-journey .oj-panel > p:last-child { max-width: 48ch; color: #476071; font-size: 1rem; line-height: 1.8; }
.orthopedic-journey .oj-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-top: 1.25rem; }
.orthopedic-journey button { font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.orthopedic-journey button:focus-visible { outline: 3px solid #a74d00; outline-offset: 4px; }
.orthopedic-journey .oj-play { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .7rem 1rem; border: 1px solid var(--oj-teal); border-radius: 4px; background: var(--oj-teal); color: #fff; font-size: .86rem; font-weight: 600; line-height: 1.4; }
.orthopedic-journey .oj-play:hover:not(:disabled) { background: #07545a; }
.orthopedic-journey .oj-play-symbol { width: 17px; height: 17px; flex: 0 0 auto; fill: currentColor; }
.orthopedic-journey .oj-pause-shape { display: none; }
.orthopedic-journey[data-playing="true"] .oj-play-shape { display: none; }
.orthopedic-journey[data-playing="true"] .oj-pause-shape { display: block; }
.orthopedic-journey .oj-direction { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: .5rem; border: 1px solid #adc8d0; border-radius: 4px; background: #fff; color: var(--oj-ink); font-size: 1.3rem; }
.orthopedic-journey .oj-direction:hover:not(:disabled) { background: var(--oj-blue); border-color: var(--oj-teal); }
.orthopedic-journey .oj-direction:disabled, .orthopedic-journey .oj-play:disabled { cursor: default; opacity: .55; }
.orthopedic-journey .oj-disclaimer { max-width: 50ch; margin-top: 1.15rem; color: #526b78; font-size: .78rem; line-height: 1.65; }
.orthopedic-journey .oj-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-top: 2rem; border-block: 1px solid var(--oj-line); }
.orthopedic-journey .oj-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .6rem; min-width: 0; min-height: 106px; padding: 1.15rem 1rem; border: 0; border-top: 3px solid transparent; border-radius: 0; background: transparent; color: #476071; text-align: left; line-height: 1.45; transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease; }
.orthopedic-journey .oj-step + .oj-step { border-inline-start: 1px solid var(--oj-line); }
.orthopedic-journey .oj-step[aria-current="step"] { border-top-color: var(--oj-teal); background: #f0f7f5; color: var(--oj-teal); }
.orthopedic-journey .oj-step:hover:not(:disabled) { background: #f2f7fa; }
.orthopedic-journey .oj-step:disabled { cursor: default; opacity: 1; }
.orthopedic-journey .oj-step-number { color: var(--oj-teal); font-size: .72rem; font-variant-numeric: tabular-nums; }
.orthopedic-journey .oj-step-name { max-width: 19ch; font-size: .85rem; font-weight: 600; }
.orthopedic-journey .oj-fallback { margin-top: 1.2rem; border-bottom: 1px solid var(--oj-line); color: #476071; font-size: .9rem; }
.orthopedic-journey .oj-fallback summary { min-height: 44px; padding: .65rem 0; color: var(--oj-teal); cursor: pointer; }
.orthopedic-journey .oj-fallback summary:focus-visible { outline: 3px solid #a74d00; outline-offset: 4px; }
.orthopedic-journey .oj-fallback ol { max-width: 85ch; margin-block: .5rem 1.5rem; }
.orthopedic-journey .oj-fallback li + li { margin-top: 1rem; }

/* All stages share one bone. Layer changes remain visible when playback is paused. */
.orthopedic-journey .oj-bone { transform-origin: 330px 260px; transition: transform 650ms ease; }
.orthopedic-journey .oj-fragment-upper { transform-origin: 330px 250px; transition: transform 550ms ease; }
.orthopedic-journey .oj-fragment-lower { transform-origin: 330px 260px; transform: translate(27px, 7px) rotate(11deg); transition: transform 650ms ease; }
.orthopedic-journey .oj-cortex { stroke: #b1cdd5; stroke-width: 1.3; }
.orthopedic-journey .oj-coordinate-lines { opacity: .45; }
.orthopedic-journey .oj-diagnostic-grid,
.orthopedic-journey .oj-diagnostic-frame,
.orthopedic-journey .oj-model-depth,
.orthopedic-journey .oj-mesh,
.orthopedic-journey .oj-fracture-focus,
.orthopedic-journey .oj-reconstruction,
.orthopedic-journey .oj-plan,
.orthopedic-journey .oj-surgery,
.orthopedic-journey .oj-outcome,
.orthopedic-journey .oj-union { opacity: 0; transition: opacity 450ms ease, transform 550ms ease; }
.orthopedic-journey .oj-model-depth { transform: translate(15px, -7px) rotate(-5deg); transform-origin: 330px 260px; }
.orthopedic-journey .oj-impact { opacity: 1; transition: opacity 350ms ease, transform 450ms ease; }
.orthopedic-journey .oj-surgery { transform: translateX(7px); }
.orthopedic-journey .oj-outcome { transform: translateY(5px); }
.orthopedic-journey .oj-scan { opacity: 0; pointer-events: none; }
.orthopedic-journey .oj-scan path { fill: none; stroke: #096b72; stroke-opacity: .45; stroke-width: 1; }
.orthopedic-journey[data-stage="1"] .oj-impact,
.orthopedic-journey[data-stage="2"] .oj-impact,
.orthopedic-journey[data-stage="3"] .oj-impact,
.orthopedic-journey[data-stage="4"] .oj-impact,
.orthopedic-journey[data-stage="5"] .oj-impact { opacity: 0; transform: translateX(-10px); }
.orthopedic-journey[data-stage="1"] .oj-diagnostic-grid { opacity: .8; }
.orthopedic-journey[data-stage="1"] .oj-diagnostic-frame,
.orthopedic-journey[data-stage="1"] .oj-fracture-focus { opacity: 1; }
.orthopedic-journey[data-stage="2"] .oj-bone { transform: rotate(-7deg); }
.orthopedic-journey[data-stage="2"] .oj-fragment-lower { transform: translate(17px, 2px) rotate(7deg); }
.orthopedic-journey[data-stage="2"] .oj-mesh { opacity: .67; }
.orthopedic-journey[data-stage="2"] .oj-model-depth { opacity: .5; }
.orthopedic-journey[data-stage="2"] .oj-reconstruction { opacity: .8; }
.orthopedic-journey[data-stage="3"] .oj-fragment-lower { transform: translate(17px, 2px) rotate(7deg); }
.orthopedic-journey[data-stage="3"] .oj-mesh { opacity: .2; }
.orthopedic-journey[data-stage="3"] .oj-plan { opacity: 1; }
.orthopedic-journey[data-stage="4"] .oj-fragment-lower,
.orthopedic-journey[data-stage="5"] .oj-fragment-lower { transform: translate(0, -10px); }
.orthopedic-journey[data-stage="4"] .oj-surgery,
.orthopedic-journey[data-stage="5"] .oj-surgery { opacity: 1; transform: translateX(0); }
.orthopedic-journey[data-stage="5"] .oj-instrument,
.orthopedic-journey[data-stage="5"] .oj-surgery-markers { opacity: 0; }
.orthopedic-journey[data-stage="5"] .oj-union { opacity: 1; }
.orthopedic-journey[data-stage="5"] .oj-outcome { opacity: 1; transform: translateY(0); }

/* One quiet, two-second sweep per active stage; no idle or infinite animation. */
.orthopedic-journey[data-playing="true"][data-stage="0"] .oj-scan-0,
.orthopedic-journey[data-playing="true"][data-stage="1"] .oj-scan-1,
.orthopedic-journey[data-playing="true"][data-stage="2"] .oj-scan-2,
.orthopedic-journey[data-playing="true"][data-stage="3"] .oj-scan-3,
.orthopedic-journey[data-playing="true"][data-stage="4"] .oj-scan-4,
.orthopedic-journey[data-playing="true"][data-stage="5"] .oj-scan-5 { animation: oj-scan-sweep 2s ease-in-out 1 both; }
@keyframes oj-scan-sweep {
  0% { opacity: 0; transform: translateY(0); }
  16% { opacity: .65; }
  78% { opacity: .65; }
  100% { opacity: 0; transform: translateY(340px); }
}

@media (max-width: 1000px) {
  .orthopedic-journey .oj-stage-layout { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 2rem; }
  .orthopedic-journey .oj-step { padding-inline: .7rem; }
  .orthopedic-journey .oj-step-name { font-size: .78rem; }
  .orthopedic-journey .oj-play { font-size: .8rem; padding-inline: .7rem; }
}
@media (max-width: 760px) {
  .orthopedic-journey { scroll-margin-top: 165px; }
  .orthopedic-journey .oj-heading { margin-bottom: 1.7rem; }
  .orthopedic-journey .oj-intro { font-size: 1rem; }
  .orthopedic-journey .oj-stage-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .orthopedic-journey .oj-visual { width: 100%; max-width: 520px; margin-inline: auto; }
  .orthopedic-journey .oj-anatomy { max-height: 370px; }
  .orthopedic-journey .oj-visual-label { top: 1.6rem; font-size: .58rem; }
  .orthopedic-journey .oj-narrative { padding-block: 0; }
  .orthopedic-journey .oj-panels { min-height: 175px; }
  .orthopedic-journey .oj-panel-position { margin-bottom: .7rem; }
  .orthopedic-journey .oj-panel > p:last-child { max-width: 64ch; }
  .orthopedic-journey .oj-controls { margin-top: .8rem; }
  .orthopedic-journey .oj-play { min-height: 46px; padding: .7rem 1rem; font-size: .86rem; }
  .orthopedic-journey .oj-disclaimer { max-width: 64ch; }
  .orthopedic-journey .oj-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.5rem; }
  .orthopedic-journey .oj-step { min-height: 97px; padding: .8rem .75rem; gap: .45rem; }
  .orthopedic-journey .oj-step:nth-child(4) { border-inline-start: 0; }
  .orthopedic-journey .oj-step:nth-child(n+4) { border-bottom: 1px solid transparent; box-shadow: 0 -1px 0 var(--oj-line); }
  .orthopedic-journey .oj-step-name { font-size: .8rem; }
}
@media (max-width: 420px) {
  .orthopedic-journey .oj-visual-label { top: 1.25rem; }
  .orthopedic-journey .oj-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orthopedic-journey .oj-step { min-height: 83px; }
  .orthopedic-journey .oj-step:nth-child(odd) { border-inline-start: 0; }
  .orthopedic-journey .oj-step:nth-child(even) { border-inline-start: 1px solid var(--oj-line); }
  .orthopedic-journey .oj-step:nth-child(n+3) { box-shadow: 0 -1px 0 var(--oj-line); }
  .orthopedic-journey .oj-panels { min-height: 205px; }
}
@media (prefers-reduced-motion: reduce) {
  .orthopedic-journey *, .orthopedic-journey *::before, .orthopedic-journey *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .orthopedic-journey .oj-scan { display: none; }
}
@media print {
  .orthopedic-journey { padding-block: 1rem; break-inside: avoid; }
  .orthopedic-journey .oj-controls, .orthopedic-journey .oj-steps, .orthopedic-journey .oj-scan { display: none !important; }
  .orthopedic-journey .oj-panel[hidden] { display: block; }
  .orthopedic-journey .oj-panel { margin-bottom: 1rem; }
  .orthopedic-journey .oj-stage-layout { display: block; }
  .orthopedic-journey .oj-visual { max-width: 320px; margin-inline: auto; }
}