/* P1 Hero kicker · rotating line (client pick 9 Oct, from Design/variations/2026-10-09-hero-kicker/ #5).
   Type only: three dots + one phrase rolling at a time. Without JS or with calm motion, the full sentence shows static.
   Class is .hkicker (not .kicker) on purpose: entrances.js targets '.kicker' in the P1 hero, so it leaves this one alone.
   The roll slot is one grid cell holding all three phrases, so its width is fixed to the widest: no layout shift. */
.hkicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--s4); font: 600 15px/1.3 var(--text); color: var(--ink); white-space: nowrap; }
.hkicker .kr__dots { display: none; gap: 4px; }
.hkicker .kr__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); transition: background-color 600ms var(--ease-out); }
.hkicker .kr__dots i.on { background: var(--green); }
.hkicker .kr__roll { display: none; height: 1.3em; overflow: hidden; }
.hkicker .kr__roll > span { grid-area: 1 / 1; justify-self: start; text-align: left; transform: translateY(105%); opacity: 0;
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1), opacity 450ms cubic-bezier(.22, 1, .36, 1); }
.hkicker .kr__roll > span.on { transform: none; opacity: 1; }
.hkicker .kr__roll > span.out { transform: translateY(-105%); opacity: 0; }
/* armed by kicker.js; --kr-x recentres the line on the current phrase (transform only, so no layout shift) */
.hkicker.is-rolling { transform: translateX(var(--kr-x, 0px)); transition: transform 600ms cubic-bezier(.22, 1, .36, 1); }
.hkicker.is-rolling .kr__dots { display: inline-flex; }
.hkicker.is-rolling .kr__roll { display: inline-grid; }
.hkicker.is-rolling .kr__static { display: none; }
@media (max-width: 760px) { .hkicker { font-size: 14px; margin-bottom: var(--s3); } }
@media (prefers-reduced-motion: reduce) {
  .hkicker.is-rolling .kr__dots, .hkicker.is-rolling .kr__roll { display: none; }
  .hkicker.is-rolling .kr__static { display: inline; }
}