/* Keep the incoming wave visible at its last painted position. */
html[data-estela-continuity] .home-estela {
  animation:none;
}

@media (prefers-reduced-motion:no-preference) {
  html[data-estela-continuity] .home-estela > g {
    transform-box:fill-box;
    transform-origin:center;
    animation:estela-continuous-flow 16s ease-in-out infinite alternate;
    animation-delay:var(--estela-phase,0ms);
  }

  html[data-estela-continuity] .estela-band {
    animation:estela-continuous-breathe 8s ease-in-out infinite alternate;
    animation-delay:var(--estela-phase,0ms);
  }

  html[data-estela-continuity] .estela-band + .estela-band {
    animation-direction:alternate-reverse;
  }

  html[data-estela-continuity] .estela-trails .estela-band {
    animation-delay:calc(var(--estela-phase,0ms) - 6000ms);
  }

  html[data-estela-continuity] [data-home-motion="paused"] :is(.estela-band,.home-estela > g) {
    animation-play-state:paused;
  }
}

@keyframes estela-continuous-breathe {
  from { translate:-34px 28px; }
  to { translate:34px -28px; }
}

@keyframes estela-continuous-flow {
  from { transform:translate(-30px,22px) rotate(-1.2deg); }
  to { transform:translate(30px,-22px) rotate(1.2deg); }
}