/* Animate masked pixels of the original artwork, not the whole canvas. */
#story .amb-cloud-drift { animation-name: living-cloud; animation-duration: 20s; animation-delay: -5s; }
#story .amb-cloud-drift--japan { animation-duration: 24s; animation-delay: -13s; }
@keyframes living-cloud {
  0%,100% { opacity: .92; transform: translate(-9px,3px); }
  50% { opacity: 1; transform: translate(14px,-5px); }
}
#story .amb-water { animation-name: living-water; animation-duration: 9s; animation-delay: -2s; }
@keyframes living-water {
  0%,100% { opacity: .94; transform: translate(1px,-1px); }
  40% { opacity: 1; transform: translate(-3px,2.5px); }
  72% { opacity: .97; transform: translate(-1px,4px); }
}
#story .amb-grass-sway { animation-name: living-grass; animation-duration: 7s; animation-delay: -2s; }
@keyframes living-grass {
  0%,100% { opacity: .88; transform: skewX(-.45deg) translateX(-2px); }
  48% { opacity: 1; transform: skewX(.65deg) translateX(3px); }
}
#story .amb-window-picture { animation: living-window 13s ease-in-out -4s infinite; }
@keyframes living-window {
  0%,100% { opacity: .85; filter: brightness(1.02) saturate(1); }
  50% { opacity: 1; filter: brightness(1.18) saturate(1.04); }
}
#story .amb-fabric-picture { animation: living-fabric 14s ease-in-out -5s infinite; }
@keyframes living-fabric {
  0%,100% { opacity: .8; filter: brightness(1.015); }
  50% { opacity: 1; filter: brightness(1.12); }
}
/* New pixel layers share the existing visibility, motion and reading gates. */
#story .story-ambient .ambient-motion { animation-play-state: paused; }
#story[data-motion="on"][data-atmosphere-visible="true"][data-page-active="true"] .story-frame.is-active .ambient-motion { animation-play-state: running; }
@media (max-width: 600px) {
  #story .amb-water { filter: none; }
  #story .amb-cloud-drift { animation-duration: 24s; }
}
@media (prefers-reduced-motion: reduce) {
  #story .story-ambient .ambient-motion { animation: none; }
}

/* No separately drawn rows of foam; move only the original water pixels. */
#story .amb-breaker, #story .amb-glint { display: none; }
#story .amb-water { animation-duration: 16s; }
@keyframes living-water {
  0%,100% { opacity: .9; transform: translate(0,0); }
  50% { opacity: 1; transform: translate(-1px,1px); }
}