/*
 * cloud-parallax.css — ambient background cloud drift (Sec 4.2 "Ambient"
 * tier: 6-12s loop, linear/ease-in-out, amplitude <=6px... here used for
 * the slow depth-cue drift behind Step 5's departures-board scene and any
 * other idle sky-postcard background).
 *
 * Cheap-to-build two-layer depth cue: a SINGLE element's `background-image`
 * holds two repeating cloud layers; one `animation` moves both
 * `background-position` values at once (comma-separated), at two
 * different distances, so the far layer visibly drifts slower than the
 * near layer with zero extra DOM nodes or extra animations.
 *
 * Markup:
 *   <div class="cloud-parallax" style="background-image:
 *     url(clouds-near.svg), url(clouds-far.svg)"></div>
 * (background-image stays out of inline <style>-as-CSS concerns — it's a
 * plain presentation attribute value, not a stylesheet rule; if preferred,
 * set both urls from an external class instead.)
 */
.cloud-parallax {
  background-repeat: repeat-x, repeat-x;
  background-position: 0 0, 0 0;
  animation: cloudDrift var(--dur-ambient, 9s) linear infinite;
}

@keyframes cloudDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: -160px 0, -90px 0; } /* near layer moves ~1.8x the far layer */
}

/* Idle Merlot-guide "breathing" loop (very low amplitude, shared ambient tier) */
.breathing-loop {
  animation: breathe var(--dur-ambient, 9s) ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-parallax,
  .breathing-loop {
    animation: none;
  }
}