/* The photograph and soil use the same square coordinate space. Calibrate only
   these unitless landmark coordinates if the source cutout changes. */
.digging-scene {
  --homi-pivot-x: .686;
  --homi-pivot-y: .421;
  --homi-tip-x: .160;
  --homi-tip-y: .944;
  --homi-scale: .72;
  --soil-x: .30;
  --soil-y: .73;
  --homi-base-x: calc(var(--soil-x) - var(--homi-pivot-x) - (var(--homi-tip-x) - var(--homi-pivot-x)) * var(--homi-scale));
  --homi-base-y: calc(var(--soil-y) - var(--homi-pivot-y) - (var(--homi-tip-y) - var(--homi-pivot-y)) * var(--homi-scale));
  position: relative;
  width: min(120%, 88.8vh, 720px);
  transform: translate(-5.5%, 64px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  isolation: isolate;
  pointer-events: none;
}
.digging-scene .story-homi {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: calc(var(--homi-pivot-x) * 100%) calc(var(--homi-pivot-y) * 100%);
  transform: translate(calc(var(--homi-base-x) * 100%), calc(var(--homi-base-y) * 100%)) scale(var(--homi-scale));
  transition: none;
  filter: drop-shadow(3px 7px 7px #25282013);
  z-index: 1;
}
.soil-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  /* The shallow earth lip naturally occludes the point during penetration. */
  z-index: 2;
}
.soil-particle, .soil-ridge, .soil-contact { opacity: 0; }
.soil-particle { transform-origin: 0 0; }
/* Reserve a caption strip below the enlarged photograph. */
.tool-stage .stage-coordinate, .tool-stage .stage-fraction { bottom: 4%; }
.digging-scene.is-motion-off .soil-particle,
.digging-scene.is-motion-off .soil-ridge,
.digging-scene.is-motion-off .soil-contact { visibility: hidden; }
/* A short, native sticky interval keeps one complete mobile stroke on screen.
   The wrapper is the track; never measure the pinned stage for scroll progress.
   Small viewport units keep browser chrome from covering the soil/captions. */
@media (max-width: 700px), (max-width: 1000px) and (max-height: 500px) {
  .tool-sticky {
    --scene-pin-top: max(12px, env(safe-area-inset-top, 0px));
    --scene-bottom-gap: max(16px, env(safe-area-inset-bottom, 0px));
    --scene-stage-height: min(420px, calc(100svh - var(--scene-pin-top) - var(--scene-bottom-gap)));
    --scene-scroll-distance: clamp(180px, 38svh, 320px);
    height: var(--scene-stage-height);
  }
  .tool-sticky.has-scroll-track {
    height: calc(var(--scene-stage-height) + var(--scene-scroll-distance));
  }
  .tool-stage {
    position: relative;
    top: 0;
    height: var(--scene-stage-height);
    min-height: 0;
    max-height: none;
  }
  .tool-sticky.has-scroll-track > .tool-stage {
    position: sticky;
    top: var(--scene-pin-top);
  }
  .digging-scene {
    /* Keep the 20% enlargement unless the safe viewport needs a smaller fit.
       The fit cap leaves room for the 44px control above the raised wrist. */
    width: min(110.4%, 384px, calc((var(--scene-stage-height) - 48px) / .96));
    transform: translate(-5.5%, 26px);
  }
  .tool-stage .stage-label { top: 3%; left: 0; font-size: 7px; }
  .tool-stage .motion-toggle { top: 0; right: 0; min-height: 44px; padding: 7px 9px; font-size: 7px; }
  .tool-stage .stage-coordinate, .tool-stage .stage-fraction { bottom: 2%; }
}
/* Phones turned sideways also get a finite single scene, not a 580px-tall
   desktop stage or a long empty grid column beside the reading chapters. */
@media (min-width: 701px) and (max-width: 1000px) and (max-height: 500px) {
  .scroll-story { display: block; padding: 0 6%; }
  .story-steps { padding: 15px 0 35px; display: grid; grid-template-columns: 1fr; }
  .story-step { min-height: 0; padding: 33px 0; border-top: 1px solid var(--line); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-sticky { --scene-scroll-distance: 0px; }
  .tool-sticky.has-scroll-track > .tool-stage { position: relative; top: 0; }
  .digging-scene .story-homi {
    transform: translate(calc(var(--homi-base-x) * 100%), calc(var(--homi-base-y) * 100%)) scale(var(--homi-scale)) !important;
  }
  .digging-scene .soil-particle,
  .digging-scene .soil-ridge,
  .digging-scene .soil-contact { visibility: hidden; }
}