/* Gautam's refined line icons (13 Oct), folded into the promises row.
   Source: reign-wala-refined-line-icons/ (96 by 96 viewBox, ink via currentColor, each SVG carries its own gentle 5.5s motion
   and respects prefers-reduced-motion). Each drawing is measured (ink bounds) and placed so the ink is centred over the words
   and every icon's ink ends the same distance above its label. */

.promises li { flex-direction: column; align-items: center; text-align: center; gap: 18px; cursor: default; justify-content: start; }
.promises .vi-svg { display: block; flex: none; width: 60px; height: 60px; overflow: visible; color: var(--ink); }
.promises .vi-label { font-family: var(--serif); font-size: var(--t-body); line-height: 1.4; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ink); max-width: 13em; min-height: 2.8em; margin: 0 auto; text-wrap: balance; align-self: center; display: block; width: 100%; }
.promises .vi-label .label { display: block; margin-bottom: 6px; }
/* per-icon placement, filled in from the measured ink bounds */
.promises li:nth-child(1) .vi-svg { transform: translate(0, 8.1px); }
.promises li:nth-child(2) .vi-svg { transform: translate(-4.4px, 8.5px); }
.promises li:nth-child(3) .vi-svg { transform: translate(3.1px, 0.6px); }
.promises li:nth-child(4) .vi-svg { transform: translate(-1.2px, 4.4px); }

/* Interaction: the icons are still at rest. Under the hand (or the keyboard) each floats up 5px and plays its
   own little motion once; on a touch screen it plays once as its row arrives. The float uses `translate`, so the
   measured placement above (transform) is left alone. --kf names the icon's own keyframes (declared in its SVG). */
.promises li:nth-child(1) { --kf: rw-refined-0; }
.promises li:nth-child(2) { --kf: rw-refined-1; }
.promises li:nth-child(3) { --kf: rw-refined-2; }
.promises li:nth-child(4) { --kf: rw-refined-3; }
/* The shared hook: a promises item, or anything marked .icon-host (the three notes on the bag pages' Good to know),
   carries its icon's keyframe name in --kf. js/motion.js adds .is-play so a motion finishes once begun. */
:is(.promises, .icon-host) .vi-svg .motion { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  :is(.promises li, .icon-host) .vi-svg { transition: translate 320ms var(--ease); }
  :is(.promises li, .icon-host):focus-visible .vi-svg, :is(.promises li, .icon-host):focus-within .vi-svg { translate: 0 -5px; }
  :is(.promises li, .icon-host):focus-visible .vi-svg .motion, :is(.promises li, .icon-host):focus-within .vi-svg .motion, :is(.promises li, .icon-host).is-play .vi-svg .motion { animation: var(--kf) 2.4s ease-in-out 1; }
  @media (hover: hover) {
    :is(.promises li, .icon-host):hover .vi-svg { translate: 0 -5px; }
    :is(.promises li, .icon-host):hover .vi-svg .motion { animation: var(--kf) 2.4s ease-in-out 1; }
  }
  /* no hover (a phone, a tablet): each plays once when its row arrives */
  @media (hover: none) {
    :is(.promises li, .icon-host).is-in .vi-svg .motion { animation: var(--kf) 2.4s ease-in-out calc(var(--d, 0ms) + 500ms) 1; }
  }
}