/* Ambient life (js/ambient.js). Proposals, see notes/ambient.md. No copper here: steam colour and water tints only.
   CSS animation on transform and opacity only. Motion runs on the live level; the overview shows a still, fainter frame. */

.am { pointer-events: none; }

/* steam */
.am-steam { opacity: calc(.6 * var(--tod-steam, 1)); transition: opacity .6s ease; }
.level.is-live .am-steam { opacity: var(--tod-steam, 1); }
.am-v {
  transform-box: fill-box; transform-origin: 50% 80%;
  opacity: 0;
  animation: am-rise 16s linear infinite paused;
}
.level.is-live .am-v { animation-play-state: running; }
@keyframes am-rise {
  0%   { opacity: 0;  transform: translate(0, 0) scale(.55); }
  25%  { opacity: 1; }
  70%  { opacity: .55; }
  100% { opacity: 0;  transform: translate(var(--am-dx, 0), var(--am-rise, -60px)) scale(1.5); }
}

/* water: faint sheen and a few glints, raised to the real water surface in a dive */
.am-water { transition: transform .6s ease .3s; }
.m-dive .am-water { transform: translateY(calc(-1 * var(--am-lift, 0px))); }
.am-sheen { fill: #4a6a85; opacity: .05; animation: am-sheen 9s ease-in-out infinite paused; }
.am-glint {
  stroke: #7f9bb2; stroke-width: .8; stroke-linecap: round; opacity: 0;
  animation: am-glint 7s ease-in-out infinite paused;
}
.level.is-live .am-sheen, .level.is-live .am-glint { animation-play-state: running; }
.m-burst .am-glint { opacity: 0; animation: none; }
@keyframes am-sheen { 0%, 100% { opacity: .03; } 50% { opacity: .1; } }
@keyframes am-glint {
  0%, 100% { opacity: 0;  transform: translateX(-2px); }
  50%      { opacity: .5; transform: translateX(2px); }
}

/* noren: a slow, slight sway from the top edge, only on the live level (the group holds the 3 faces) */
.level.is-live .w-noren {
  transform-box: fill-box; transform-origin: 50% 0;
  animation: am-sway 8s ease-in-out infinite;
}
.level.is-live .w-noren ~ .w-noren { animation-delay: -3.2s; animation-duration: 9.5s; }
@keyframes am-sway {
  0%, 100% { transform: rotate(-2.5deg) skewX(-3deg); }
  50%      { transform: rotate(2.5deg) skewX(3deg); }
}

/* reduced motion: nothing moves; the steam stays as a very faint still, the water and noren are plain */
@media (prefers-reduced-motion: reduce) {
  .am-v, .am-sheen, .am-glint, .level.is-live .w-noren { animation: none; }
  .am-glint, .am-sheen { opacity: 0; }
  .am-v { opacity: .5; }
  .am-water { transition: none; }
}