/* The repaired boat crosses the bay to the lighthouse island. */
.mission-dialog[data-scene=path] .mission-dialog__media>img{height:auto;aspect-ratio:3/1;object-fit:cover}
.mission-sailing-boat{position:absolute;z-index:1;left:60%;bottom:23%;width:14%;aspect-ratio:768/702;pointer-events:none;background:url('/assets/lighthouse/sailing-boat-cutout-v1.png') center/contain no-repeat;filter:drop-shadow(0 3px 2px #123e4d80);animation:lighthouse-sail-to-island 8s ease-in-out both}
@keyframes lighthouse-sail-to-island{0%{left:27%;transform:translateY(0) rotate(-2deg)}20%{transform:translateY(-3%) rotate(1deg)}40%{transform:translateY(0) rotate(-1deg)}60%{transform:translateY(-2%) rotate(1deg)}80%{transform:translateY(0) rotate(-1deg)}100%{left:60%;transform:translateY(0) rotate(0)}}
@media(prefers-reduced-motion:reduce){.mission-sailing-boat{animation:none;left:60%}}

/* The crab arrives before she has collected any shells. */
.mission-dialog[data-scene=beach] .mission-dialog__media{background:#eacb90 url('/assets/lighthouse/mission-beach-empty-v1.jpg') center center/cover no-repeat}
.mission-dialog[data-scene=beach] .mission-dialog__media>img{animation:mission-crab-arrive 2.4s cubic-bezier(.18,.7,.22,1) both,mission-crab-breathe 4.4s ease-in-out 2.4s infinite;transform-origin:50% 90%;will-change:transform}
@keyframes mission-crab-arrive{
  0%{transform:translateX(-110%) rotate(-5deg)}
  20%{transform:translateX(-75%) translateY(-4%) rotate(4deg)}
  40%{transform:translateX(-48%) rotate(-4deg)}
  60%{transform:translateX(-23%) translateY(-4%) rotate(3deg)}
  80%{transform:translateX(-5%) rotate(-2deg)}
  100%{transform:translateX(0) rotate(0)}
}
/* After arriving, a gentle breath and small, irregular shifts suggest anticipation. */
@keyframes mission-crab-breathe{
  0%,100%{transform:translateY(0) rotate(0) scale(1)}
  23%{transform:translateY(-1.2%) rotate(-.6deg) scale(1.012,1.025)}
  46%{transform:translateY(0) rotate(.4deg) scale(1)}
  53%{transform:translateX(1%) rotate(1.1deg) scale(1.005,1.01)}
  61%{transform:translateX(-.7%) rotate(-.8deg) scale(1)}
  75%{transform:translateY(-.8%) rotate(.3deg) scale(1.008,1.018)}
}
@media(prefers-reduced-motion:reduce){.mission-dialog[data-scene=beach] .mission-dialog__media>img{animation:none;will-change:auto}}