/* ============================================================================
   SPORT-FIT PHYSIO CARE — 3D anatomy layer for the Pain & Movement Check

   ADDITIVE ONLY. Nothing in pain-assessment.css, pain-assessment-modal.css or
   core.css is redefined here except the one thing that has to change: the flat
   anatomy figure fades out once the 3D body has taken its place. That <img>
   stays in the DOM and keeps its layout box, because:
     - assets/js/pain-anatomy-3d.js measures it to place the 3D canvas on the
       exact same rectangle, at every breakpoint, with no duplicated media
       queries; and
     - the step-7 report / PDF still draws the flat figure (#reportMiniImage).

   Both bodies (male-body.glb / female-body.glb) use the same rules. If WebGL
   is missing or the selected body's model fails to load, .body-3d-ready is
   never set and every rule below is inert — the flat artwork shows instead.
   ========================================================================== */

/* The canvas sits above the flat figure (z-index 1) and below the radiation
   drawing layer (z-index 3), so draw mode keeps capturing pointers first and
   the body can only be rotated when the visitor is not drawing on it. */
#pain-check .anatomy-model{
  position:absolute;
  z-index:2;
  background:transparent;
  --poster-color:transparent;
  --progress-bar-color:var(--cyan,#14c8df);
  --progress-mask:transparent;
  opacity:0;
  transition:opacity .5s ease;
  outline:none;
  /* Inert until the layer is actually on, so a hidden canvas can never take a
     tap meant for the flat figure (female model, or a model that failed). */
  pointer-events:none;
}
#pain-check .anatomy-stage.body-3d-ready .anatomy-model{opacity:1;pointer-events:auto}

/* The flat figure is hidden from the moment the 3D layer commits to
   loading, not just once it arrives, so the old artwork is never shown. It
   keeps its layout box (syncLayout measures it) and comes back only if the
   layer bows out: no WebGL, or a model that failed to load. */
#pain-check #anatomyImage{opacity:0!important}

/* Loader shown in that gap. Three dots in the brand cyan, nothing heavier. */
#pain-check .anatomy-3d-loader{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:none;gap:7px;
}
#pain-check .anatomy-stage:not(.body-3d-ready) .anatomy-3d-loader{display:flex}
#pain-check .anatomy-stage:not(.body-3d-ready){pointer-events:none}
#pain-check .anatomy-3d-loader span{
  width:9px;height:9px;border-radius:50%;background:var(--cyan,#14c8df);opacity:.35;
  animation:sfBody3dDot 1.1s ease-in-out infinite;
}
#pain-check .anatomy-3d-loader span:nth-child(2){animation-delay:.15s}
#pain-check .anatomy-3d-loader span:nth-child(3){animation-delay:.3s}
@keyframes sfBody3dDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-5px)}}
#pain-check .anatomy-model:focus-visible{
  outline:2px solid var(--cyan,#14c8df);
  outline-offset:3px;
  border-radius:16px;
}

/* #hotspotOverlay sits at z-index 5, above the 3D canvas, and would swallow
   every tap meant for the body. In 3D mode the overlay is empty — the hotspots
   have moved inside <model-viewer> — so it is made click-through. Its children
   keep pointer events, which preserves the fallback path in paintAnatomy() for
   any region that did not find a 3D anchor. */
#pain-check .anatomy-stage.body-3d-ready .overlay{pointer-events:none}
#pain-check .anatomy-stage.body-3d-ready .overlay .hotspot{pointer-events:auto}

/* Hotspots are the SAME buttons paintAnatomy() has always built — same class,
   same markup, same click handler. model-viewer owns their position now, so
   only the offset is neutralised; .hotspot's own translate(-50%,-50%) still
   centres the dot on the projected point. */
#pain-check .anatomy-model .hotspot{left:0;top:0;z-index:6}
#pain-check .anatomy-model .hotspot:not([data-visible]){
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

/* Rotation affordance. Mirrors .orientation-note so it reads as part of the
   existing stage furniture rather than a new component. */
#pain-check .rotate-note{
  position:absolute;right:12px;top:12px;z-index:7;
  display:none;align-items:center;gap:5px;
  background:rgba(255,255,255,.92);border:1px solid #dce8f1;border-radius:999px;
  padding:6px 9px;color:#527086;font-size:10px;font-weight:850;
  pointer-events:none;box-shadow:0 5px 14px rgba(17,65,96,.06);
}
#pain-check .anatomy-stage.body-3d-ready .rotate-note{display:flex}
#pain-check .anatomy-stage.drawing-active .rotate-note{opacity:.35}
#pain-check .rotate-note svg{width:12px;height:12px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9}

/* "This is 3D" badge: same slot as the rotation note, made unmistakable. */
#pain-check .rotate-note{gap:7px;padding:4px 11px 4px 4px;background:linear-gradient(135deg,#0e2f5a,#1a64b8);border:1px solid rgba(63,240,255,.55);color:#fff;font-size:11px;letter-spacing:.01em;box-shadow:0 8px 20px rgba(11,55,110,.28),0 0 0 3px rgba(20,200,223,.14);animation:sfBadgeGlow 2.6s ease-in-out infinite}
#pain-check .rotate-note-3d{display:inline-flex;align-items:center;gap:3px;padding:3px 8px 3px 6px;border-radius:999px;background:linear-gradient(135deg,#8ef7ff,#14c8df);color:#0a2d55;font-size:11px;font-weight:900;letter-spacing:.04em}
#pain-check .rotate-note-3d svg{width:12px;height:12px;stroke:#0a2d55;stroke-width:2.2;stroke-linejoin:round}
#pain-check .rotate-note-text{white-space:nowrap}
@keyframes sfBadgeGlow{0%,100%{box-shadow:0 8px 20px rgba(11,55,110,.28),0 0 0 3px rgba(20,200,223,.14)}50%{box-shadow:0 8px 20px rgba(11,55,110,.28),0 0 0 6px rgba(20,200,223,.22)}}
#pain-check .anatomy-stage.body-3d-nudging .rotate-reset.show{display:none!important}


/* Reset button — returns to the exact front/back preset, which is also the
   only camera position the radiation drawing step accepts. */
#pain-check .rotate-reset{
  position:absolute;right:12px;bottom:12px;z-index:7;
  display:none;align-items:center;gap:5px;
  background:#fff;border:1px solid #cfe0ec;border-radius:999px;
  padding:7px 11px;color:#31546e;font-size:11px;font-weight:850;cursor:pointer;
  box-shadow:0 5px 14px rgba(17,65,96,.08);
}
#pain-check .anatomy-stage.body-3d-ready .rotate-reset.show{display:flex}
#pain-check .rotate-reset:hover{background:#eafaff;border-color:#54c9df;color:#066b93}
#pain-check .rotate-reset:focus-visible{outline:2px solid var(--cyan,#14c8df);outline-offset:2px}

/* Draw mode needs the locked preset view, so say so plainly instead of
   letting a rotated body silently refuse the drag. */
#pain-check .anatomy-stage.drawing-active.body-3d-rotated .anatomy-model{filter:saturate(.55) opacity(.75)}
#pain-check .rotate-locked{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;
  display:none;text-align:center;max-width:78%;
  background:rgba(13,60,92,.93);color:#fff;border-radius:14px;padding:12px 14px;
  font-size:12px;font-weight:800;line-height:1.45;
  box-shadow:0 14px 34px rgba(11,55,86,.28);
}
#pain-check .anatomy-stage.drawing-active.body-3d-rotated .rotate-locked{display:block}

/* Switching Male <-> Female: the outgoing body stays in place, dimmed and
   untappable, under the same three-dot loader, until the new body has loaded.
   The canvas box, framing and every overlay stay exactly where they are, so
   nothing on the page shifts at any breakpoint. */
#pain-check .anatomy-stage.body-3d-swapping .anatomy-model{opacity:.28;pointer-events:none;filter:saturate(.4)}
#pain-check .anatomy-stage.body-3d-swapping .anatomy-3d-loader{display:flex;z-index:8}
#pain-check .anatomy-stage.body-3d-swapping .rotate-reset.show{display:none!important}
#pain-check .anatomy-stage.body-3d-swapping .anatomy-model .pain-pin{visibility:hidden}

@media(max-width:820px){
  #pain-check .rotate-note{right:8px;top:8px}
  #pain-check .rotate-reset{right:8px;bottom:8px;padding:6px 10px}
  /* Tablets and phones: start the figure box 26px lower so the head clears
     the badge row. The 3D canvas, pain pin, drawing layer and foot ring are
     all measured from this box, so everything moves together. */
  #pain-check .anatomy-stage>img{top:26px!important;height:calc(100% - 26px)!important}
}

/* The "L / R refer to your body" note is removed from the stage; the side is
   still shown on every pick ("Left Knee" etc.), and the "3D Drag to rotate"
   badge is the one instruction kept on the body. */
#pain-check .anatomy-stage .orientation-note{display:none!important}

/* Phones: compact "3D Drag to rotate" badge (the full sentence always
   shows), and the "How to start" card tucked into the empty bottom-left
   corner beside the legs, clear of the hands and hips. */
@media(max-width:560px){
  #pain-check .rotate-note{top:8px;right:8px;gap:5px;padding:3px 10px 3px 3px;font-size:10.5px}
  #pain-check .rotate-note-3d{gap:2px;padding:2px 6px 2px 5px;font-size:10px}
  #pain-check .rotate-note-3d svg{width:10px;height:10px}
  /* Width follows the stage (86-104px) and the inner padding is roomy, so
     "HOW TO START" and the hint text never touch the card's border, while
     the right edge stays clear of the legs on the narrowest stages. */
  #pain-check .tap-howto{left:8px;bottom:10px;width:clamp(86px,31%,104px);padding:8px 7px 9px;gap:5px;border-radius:15px}
  #pain-check .tap-howto-head{font-size:7.5px;letter-spacing:.03em;gap:3px}
  #pain-check .tap-howto-head svg{width:9px;height:9px}
  #pain-check .tap-howto-foot{font-size:8.5px;line-height:1.3;padding:0 2px}
}
@media(max-width:340px){
  #pain-check .tap-howto{left:6px}
  #pain-check .tap-howto-head{font-size:7px;letter-spacing:.02em}
}
/* "How to start" / "How to draw" cards: the same realistic body as the stage.
   Layers inside each square card, bottom to top:
     .howto-3d-bg     the card's pale disc (and foot shadow). It stays in flow,
                      so its viewBox gives the card the same square box as before
     .howto-model     live 3D body (pain-anatomy-3d.js), hidden until loaded
     .howto-3d-fx     the demo itself - finger, swipe, ring, pin, trail, pencil -
                      plus .howto-3d-poster, a pre-rendered still of the same
                      body, shown until (or, without WebGL, instead of) the live one
   Card size, position and every keyframe are unchanged. */
#pain-check .tap-howto-art,#pain-check .draw-howto-art{position:relative;overflow:hidden}
#pain-check .howto-3d-bg{display:block;width:100%;height:auto}
#pain-check .howto-3d-fx,#pain-check .howto-model{position:absolute;left:0;top:0;width:100%;height:100%}
#pain-check .howto-model{background:transparent;--poster-color:transparent;opacity:0;transition:opacity .5s ease;pointer-events:none}
#pain-check .howto-model>*{pointer-events:none}
#pain-check .howto-3d-poster{transition:opacity .5s ease}
#pain-check .howto-3d-ready .howto-model{opacity:1}
#pain-check .howto-3d-ready .howto-3d-poster{opacity:0}
#pain-check .howto-3d-ready .tap-howto-body{animation:none}
/* Default demo tap: the right knee of the realistic body. Condition pages set
   their own area inline, which wins. */
#pain-check .tap-howto{--tap-x:45.2px;--tap-y:68.3px}

@media(prefers-reduced-motion:reduce){
  #pain-check .anatomy-model{transition:none}
  #pain-check .howto-model,#pain-check .howto-3d-poster{transition:none}
  #pain-check .anatomy-3d-loader span{animation:none;opacity:.5}
  #pain-check .rotate-note{animation:none}
}