/*
 * One-shot motion and the water glint (src/ui/motion/one-shot.js,
 * ambient.js; Stephan 2026-10-07, "Lebendigkeit"). Only transform and
 * opacity move, every animation runs once; nothing here loops. The one
 * exception, the weather glyph's continuous motion (Stephan 2026-10-09),
 * lives in weather.css.
 */
@layer tokens {
  :root,
  :root[data-theme="night"] {
    --flow-glint: rgba(214, 236, 255, 0.85);
  }

  :root[data-theme="day"] {
    --flow-glint: rgba(255, 255, 255, 0.9);
  }
}

@layer components {
  /* A number that rolls: the old digits leave upward, the new ones arrive from below. */
  .roll {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
  }

  .roll > .roll-old {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
  }

  .roll > .roll-new {
    display: inline-block;
  }

  /* Water flows: a glint travels once along the filled part of the track. */
  .progress {
    position: relative;
  }

  .zone-tile-progress {
    overflow: hidden;
    transform-origin: 50% 100%;
  }

  .flow-glint {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 44px;
    background: linear-gradient(90deg, transparent, var(--flow-glint), transparent);
    opacity: 0;
    pointer-events: none;
  }

  /* A zone tile's line changes: the icon grows from its centre. */
  .zone-tile-line .meaning-icon {
    transform-origin: 50% 50%;
  }

  @media (prefers-reduced-motion: reduce) {
    .flow-glint {
      display: none;
    }
  }
}