/* =========================================================
   VMCC / Comeketo — Motion Kit stylesheet
   All keyframes + animated widget classes.
   Pairs with tokens.css + components.css + deck.css.
   ========================================================= */

/* =========================================================
   KEYFRAMES — the motion vocabulary
   ========================================================= */
@keyframes mk-pulse-ring {
  0%   { box-shadow: 0 0 0 0 var(--cy-halo); opacity: 1; }
  70%  { box-shadow: 0 0 0 14px transparent; opacity: 0.4; }
  100% { box-shadow: 0 0 0 16px transparent; opacity: 1; }
}
@keyframes mk-pulse-fade {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@keyframes mk-pulse-scale {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes mk-ekg-sweep {
  to { stroke-dashoffset: -3000; }
}
@keyframes mk-bar-rise {
  0%   { height: 8%; }
  100% { height: var(--mk-h, 60%); }
}
@keyframes mk-sweep-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(360%); }
}
@keyframes mk-counter-roll {
  0%   { transform: translateY(-90%); }
  100% { transform: translateY(0); }
}
@keyframes mk-log-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes mk-radar-sweep {
  to { transform: rotate(360deg); }
}
@keyframes mk-node-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes mk-edge-trace {
  to { stroke-dashoffset: 0; }
}
@keyframes mk-card-cycle {
  0%, 18%  { transform: translateX(0) rotate(0); opacity: 1; }
  28%      { transform: translateX(360px) rotate(14deg); opacity: 0; }
  29%      { transform: translateX(-360px) rotate(-14deg); opacity: 0; }
  39%      { transform: translateX(0) rotate(0); opacity: 1; }
  68%      { transform: translateX(0) rotate(0); opacity: 1; }
  78%      { transform: translateX(-360px) rotate(-14deg); opacity: 0; }
  79%      { transform: translateX(360px) rotate(14deg); opacity: 0; }
  89%, 100%{ transform: translateX(0) rotate(0); opacity: 1; }
}
@keyframes mk-accept-flash {
  0%, 25%, 35%, 100% { opacity: 0; transform: rotate(14deg) scale(0.94); }
  28%, 32%           { opacity: 1; transform: rotate(14deg) scale(1); }
}
@keyframes mk-reject-flash {
  0%, 75%, 85%, 100% { opacity: 0; transform: rotate(-14deg) scale(0.94); }
  78%, 82%           { opacity: 1; transform: rotate(-14deg) scale(1); }
}
@keyframes mk-tape-slide {
  to { transform: translateX(-50%); }
}
@keyframes mk-tape-attention {
  0%, 75%, 100% { background: transparent; }
  85%, 95%      { background: var(--cy-bg-2); }
}
@keyframes mk-packet-flow {
  0%   { offset-distance: 0%; opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes mk-orbit {
  to { transform: rotate(360deg); }
}
@keyframes mk-orbit-r {
  to { transform: rotate(-360deg); }
}
@keyframes mk-confidence-breathe {
  0%, 100% { transform: scaleX(0.96); }
  50%      { transform: scaleX(1); }
}
@keyframes mk-flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
@keyframes mk-heatmap-pulse {
  0%, 100% { background-color: var(--well); }
  50%      { background-color: var(--mk-c, var(--cy-bg-2)); }
}
@keyframes mk-mind-grow {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes mk-state-marker {
  0%, 10%   { left: 0%; }
  20%, 30%  { left: 25%; }
  40%, 50%  { left: 50%; }
  60%, 70%  { left: 75%; }
  80%, 90%  { left: 100%; }
  95%, 100% { left: 0%; }
}
@keyframes mk-attention-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27,158,146,0); }
  50%      { box-shadow: 0 0 0 6px var(--cy-bg-2); }
}
@keyframes mk-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}

/* =========================================================
   PACKET ON PATH
   Use:
     <svg><path id="path1" d="..." stroke="var(--rule-2)"/></svg>
     <span class="mk-packet" style="offset-path:path('...'); animation-duration:3s;"></span>
   ========================================================= */
.mk-packet {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--cy-bright);
  box-shadow: 0 0 12px var(--cy-halo);
  position: absolute;
  top: 0; left: 0;
  offset-rotate: 0deg;
  animation: mk-packet-flow 3s linear infinite;
}
.mk-packet.ai     { background: var(--ai); box-shadow: 0 0 10px rgba(111,91,176,0.5); }
.mk-packet.warn   { background: var(--attn); box-shadow: 0 0 10px rgba(176,113,46,0.5); }
.mk-packet.ok     { background: var(--ok); box-shadow: 0 0 10px rgba(77,122,71,0.5); }
.mk-packet.danger { background: var(--danger); box-shadow: 0 0 10px rgba(163,63,63,0.5); }
.mk-packet.bg     { background: var(--cy); }

/* =========================================================
   AGENT NODE (pipeline)
   ========================================================= */
.agent-node {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  min-width: 180px;
  box-shadow: var(--shadow-sm);
}
.agent-node .who {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500;
}
.agent-node .who .avi { width: 28px; height: 28px; font-size: 12px; }
.agent-node .role {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--fg-mute); letter-spacing: 0.08em; text-transform: uppercase;
}
.agent-node .status {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--fg-dim);
}
.agent-node.live { border-color: var(--cy-edge); box-shadow: 0 0 0 1px var(--cy-edge), 0 0 32px -10px var(--cy-halo); }

/* =========================================================
   PULSE WAVE (radial expanding ring, decorative)
   ========================================================= */
.pulse-wave {
  position: relative;
  width: 64px; height: 64px;
}
.pulse-wave > i {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--cy);
  animation: mk-pulse-ring-grow 2.6s ease-out infinite;
  opacity: 0;
}
.pulse-wave > i:nth-child(2) { animation-delay: 0.65s; }
.pulse-wave > i:nth-child(3) { animation-delay: 1.3s; }
.pulse-wave > i:nth-child(4) { animation-delay: 1.95s; }
@keyframes mk-pulse-ring-grow {
  0%   { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* =========================================================
   COUNTER (rolling number tape)
   ========================================================= */
.counter {
  font-family: var(--serif); font-weight: 500;
  font-size: 56px; line-height: 1; letter-spacing: -0.025em;
  display: inline-flex;
  overflow: hidden;
  vertical-align: baseline;
}
.counter .roll {
  display: inline-flex; flex-direction: column;
  animation: mk-counter-roll 1.2s cubic-bezier(.2,.7,.1,1) forwards;
}
.counter .roll > span {
  height: 56px; display: block;
}

/* =========================================================
   RADAR (rotating sweep for a circular clock)
   ========================================================= */
.radar {
  position: relative;
  width: 260px; height: 260px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: radial-gradient(circle at center, var(--card) 0%, var(--card-2) 100%);
}
.radar .grid {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 0 30%, var(--rule) 30% 30.4%, transparent 30.4%),
    radial-gradient(circle at center, transparent 0 55%, var(--rule) 55% 55.4%, transparent 55.4%),
    radial-gradient(circle at center, transparent 0 80%, var(--rule) 80% 80.4%, transparent 80.4%);
  opacity: 0.7;
}
.radar .axis {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, transparent calc(50% - 0.5px), var(--rule) calc(50% - 0.5px), var(--rule) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(90deg, transparent calc(50% - 0.5px), var(--rule) calc(50% - 0.5px), var(--rule) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  opacity: 0.6;
}
.radar .sweep {
  position: absolute; inset: 0;
  background: conic-gradient(from 0deg, var(--cy-bg-2) 0deg, transparent 60deg, transparent 360deg);
  border-radius: 50%;
  animation: mk-radar-sweep 5s linear infinite;
}
.radar .center {
  position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cy-bright); box-shadow: 0 0 0 6px var(--cy-bg-2);
}
.radar .blip {
  position: absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cy);
  transform: translate(-50%, -50%);
  animation: mk-flicker 1.6s ease-in-out infinite;
}

/* =========================================================
   SPARK BARS (animated bar chart rising)
   ========================================================= */
.spark-bars {
  display: flex; align-items: flex-end; gap: 6px;
  height: 100px;
}
.spark-bars > i {
  flex: 1;
  background: var(--cy-bg-2);
  border-radius: 4px;
  display: block;
  animation: mk-bar-rise 1.4s cubic-bezier(.2,.8,.2,1) both;
  transform-origin: bottom;
}
.spark-bars > i.on { background: var(--cy); }
.spark-bars > i:nth-child(1) { animation-delay: 0.0s; }
.spark-bars > i:nth-child(2) { animation-delay: 0.08s; }
.spark-bars > i:nth-child(3) { animation-delay: 0.16s; }
.spark-bars > i:nth-child(4) { animation-delay: 0.24s; }
.spark-bars > i:nth-child(5) { animation-delay: 0.32s; }
.spark-bars > i:nth-child(6) { animation-delay: 0.4s; }
.spark-bars > i:nth-child(7) { animation-delay: 0.48s; }
.spark-bars > i:nth-child(8) { animation-delay: 0.56s; }
.spark-bars > i:nth-child(9) { animation-delay: 0.64s; }
.spark-bars > i:nth-child(10){ animation-delay: 0.72s; }

/* =========================================================
   CONTEXT TAPE — sliding token strip
   ========================================================= */
.tape {
  height: 76px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.tape .track {
  display: flex; align-items: center; gap: 10px;
  padding: 16px;
  height: 100%;
  width: max-content;
  animation: mk-tape-slide 60s linear infinite;
}
.tape-token {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--well);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--mono); font-size: 12px;
  color: var(--fg-dim); white-space: nowrap;
}
.tape-token.now { background: var(--cy-bg); color: var(--cy-shade); border-color: var(--cy-edge); animation: mk-attention-glow 2s ease-in-out infinite; }
.tape-token.ai  { background: rgba(111,91,176,0.10); color: var(--ai); border-color: rgba(111,91,176,0.30); }
.tape-token.warn{ background: rgba(176,113,46,0.10); color: var(--attn); border-color: rgba(176,113,46,0.30); }

/* =========================================================
   LOG TAIL — scrolling text up
   ========================================================= */
.logtail {
  height: 280px;
  overflow: hidden;
  position: relative;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 11.5px;
  border-radius: 10px;
  padding: 14px 16px;
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.logtail .track {
  display: flex; flex-direction: column; gap: 8px;
  animation: mk-log-scroll 22s linear infinite;
}
.logtail .line {
  display: flex; gap: 10px;
  white-space: nowrap;
}
.logtail .ts { color: var(--fg-faint); }
.logtail .lvl { font-weight: 500; }
.logtail .lvl.info { color: var(--cy-bright); }
.logtail .lvl.ok   { color: #DDEDD8; }
.logtail .lvl.warn { color: #F0E6B5; }
.logtail .lvl.err  { color: #F4CFCF; }
.logtail .lvl.ai   { color: #DCD3EE; }
.logtail .msg { color: var(--paper); opacity: 0.85; }

/* =========================================================
   HEATMAP — grid of cells with staggered pulses
   ========================================================= */
.heatmap {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(24, 1fr);
}
.heatmap > i {
  aspect-ratio: 1;
  background: var(--well);
  border-radius: 3px;
  animation: mk-heatmap-pulse 3s ease-in-out infinite;
  --mk-c: var(--cy-bg-2);
}

/* =========================================================
   SWIPE PHONE — auto-cycling card on a mobile frame
   ========================================================= */
.phone {
  width: 340px; height: 720px;
  background: var(--ink);
  border-radius: 44px;
  padding: 10px;
  border: 1px solid #444;
  box-shadow: 0 24px 64px rgba(20,20,15,0.18), inset 0 0 0 1px rgba(255,255,255,0.04);
  position: relative;
}
.phone::before {
  content: ""; position: absolute;
  top: 22px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 28px;
  background: var(--ink);
  border-radius: 999px;
  z-index: 5;
}
.phone .screen {
  width: 100%; height: 100%;
  background: var(--paper);
  border-radius: 36px;
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
}
.phone .statusbar {
  padding: 14px 24px 0;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.phone .header {
  padding: 56px 24px 10px;
  display: flex; align-items: center; gap: 10px;
}
.phone .card-stage {
  flex: 1; padding: 14px 24px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.phone .card-stack {
  position: relative; width: 100%; height: 100%;
}
.phone .card-stack > .ghost {
  position: absolute; inset: 0;
  border-radius: 18px; border: 1px solid var(--rule);
  background: var(--card-2);
}
.phone .card-stack > .ghost.g1 { transform: translateY(14px) scale(0.95); opacity: 0.5; }
.phone .card-stack > .ghost.g2 { transform: translateY(7px) scale(0.97); opacity: 0.75; }
.phone .swipe-card {
  position: absolute; inset: 0;
  background: var(--card);
  border: 1px solid var(--rule-2);
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 12px 32px rgba(20,20,15,0.12);
  animation: mk-card-cycle 6s ease-in-out infinite;
  z-index: 2;
  display: flex; flex-direction: column; gap: 12px;
}
.phone .stamp-accept {
  position: absolute; top: 36px; right: 28px;
  padding: 6px 14px;
  border: 2.5px solid var(--ok); color: var(--ok);
  font-family: var(--sans); font-weight: 700;
  font-size: 18px; letter-spacing: 0.06em;
  text-transform: uppercase; border-radius: 8px;
  animation: mk-accept-flash 6s ease-in-out infinite;
  pointer-events: none;
}
.phone .stamp-reject {
  position: absolute; top: 36px; left: 28px;
  padding: 6px 14px;
  border: 2.5px solid var(--danger); color: var(--danger);
  font-family: var(--sans); font-weight: 700;
  font-size: 18px; letter-spacing: 0.06em;
  text-transform: uppercase; border-radius: 8px;
  animation: mk-reject-flash 6s ease-in-out infinite;
  pointer-events: none;
}
.phone .actions {
  padding: 12px 24px 24px;
  display: flex; justify-content: space-around;
}
.phone .actions button {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--fg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(20,20,15,0.08);
  cursor: pointer;
}
.phone .actions button.reject { color: var(--danger); border-color: rgba(163,63,63,0.30); }
.phone .actions button.accept { color: var(--ok); border-color: rgba(77,122,71,0.30); }

/* =========================================================
   DAG MEMORY NODES
   ========================================================= */
.memnode {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  position: absolute;
  white-space: nowrap;
}
.memnode .dot { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; }
.memnode.active { border-color: var(--cy-edge); box-shadow: 0 0 0 1px var(--cy-edge), 0 0 18px var(--cy-halo); }
.memnode.faint  { opacity: 0.5; }

/* =========================================================
   MIND MAP NODES (animate growth with stagger)
   ========================================================= */
.mind-node {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  white-space: nowrap;
  transform-origin: center;
  animation: mk-mind-grow 0.6s cubic-bezier(.2,.8,.2,1) backwards;
}
.mind-node.lvl1 { background: var(--ink); color: var(--paper); border-color: var(--ink); padding: 10px 18px; font-size: 14px; font-weight: 500; }
.mind-node.lvl2 { background: var(--cy-bg); color: var(--cy-shade); border-color: var(--cy-edge); }
.mind-node.tone-peach { background: var(--peach-bg); color: var(--peach-ink); border-color: rgba(176,113,46,0.32); }
.mind-node.tone-mint  { background: var(--mint-bg);  color: var(--mint-ink); border-color: rgba(77,122,71,0.32); }
.mind-node.tone-lav   { background: var(--lav-bg);   color: var(--lav-ink); border-color: rgba(111,91,176,0.32); }
.mind-node.tone-sky   { background: var(--sky-bg);   color: var(--sky-ink); border-color: rgba(63,90,142,0.32); }
.mind-node.tone-rose  { background: var(--rose-bg);  color: var(--rose-ink); border-color: rgba(163,63,63,0.32); }
.mind-node.tone-lemon { background: var(--lemon-bg); color: var(--lemon-ink); border-color: rgba(142,119,36,0.32); }

/* =========================================================
   STATE MACHINE MARKER
   ========================================================= */
.sm-rail {
  position: relative;
  height: 4px;
  background: var(--rule);
  border-radius: 2px;
  margin: 28px 12px 12px;
}
.sm-rail .marker {
  position: absolute; top: 50%;
  width: 16px; height: 16px;
  background: var(--cy-bright);
  border: 2px solid var(--cy-shade);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 var(--cy-halo);
  animation: mk-state-marker 8s steps(5, end) infinite, mk-pulse-ring 1.6s ease-out infinite;
  left: 0%;
}

/* =========================================================
   STATE NODE (pulsing border on hover/active)
   ========================================================= */
.flow-arrow {
  position: relative;
  flex: 1;
  height: 2px;
  background: var(--rule);
}
.flow-arrow .pkt {
  position: absolute; top: -3px; left: 0;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--cy-bright);
  box-shadow: 0 0 10px var(--cy-halo);
}

/* =========================================================
   SVG PATH ANIMATIONS — utility classes
   ========================================================= */
.trace-path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: mk-edge-trace 2.5s ease-out forwards;
}
.trace-path.delay-1 { animation-delay: 0.3s; }
.trace-path.delay-2 { animation-delay: 0.6s; }
.trace-path.delay-3 { animation-delay: 0.9s; }
.trace-path.delay-4 { animation-delay: 1.2s; }
.trace-path.delay-5 { animation-delay: 1.5s; }

/* =========================================================
   ATTENTION SPOTLIGHT (used in context window)
   ========================================================= */
.attn-spotlight {
  position: absolute;
  background: radial-gradient(circle, rgba(27,158,146,0.18) 0%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}

/* =========================================================
   TYPING DOTS
   ========================================================= */
.typing { display: inline-flex; gap: 4px; }
.typing > i {
  width: 5px; height: 5px; background: var(--cy-shade); border-radius: 999px;
  animation: mk-typing 1.4s ease-in-out infinite;
  display: inline-block;
}
.typing > i:nth-child(2) { animation-delay: 0.18s; }
.typing > i:nth-child(3) { animation-delay: 0.36s; }

/* =========================================================
   ORBIT (rotating ring around a center)
   ========================================================= */
.orbit {
  position: relative;
  width: 320px; height: 320px;
}
.orbit .center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.orbit .ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px dashed var(--rule);
  animation: mk-orbit 14s linear infinite;
}
.orbit .ring .satellite {
  position: absolute; left: 50%; top: -14px;
  transform: translateX(-50%);
  animation: mk-orbit-r 14s linear infinite;
}
.orbit .ring-2 { inset: 36px; animation-duration: 22s; }
.orbit .ring-2 .satellite { animation-duration: 22s; }
.orbit .ring-3 { inset: 72px; animation-duration: 8s; animation-direction: reverse; }
.orbit .ring-3 .satellite { animation-duration: 8s; animation-direction: reverse; }

/* =========================================================
   CONFIDENCE BAR (breathing)
   ========================================================= */
.conf-bar {
  height: 8px; border-radius: 4px;
  background: var(--well);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--rule);
}
.conf-bar > i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--cy-shade), var(--cy));
  transform-origin: left center;
  animation: mk-confidence-breathe 3.4s ease-in-out infinite;
}

/* =========================================================
   PROGRESS SHIMMER BAR
   ========================================================= */
.shimmer-bar {
  height: 8px; border-radius: 4px;
  background: var(--well);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--rule);
}
.shimmer-bar > .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cy-shade), var(--cy));
  border-radius: 4px;
}
.shimmer-bar > .glint {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  width: 40%;
  animation: mk-sweep-shimmer 2s linear infinite;
}

/* =========================================================
   PIPELINE PHASE (animated dotted line connecting steps)
   ========================================================= */
.phase-line {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--rule) 0 6px, transparent 6px 12px);
  background-size: 12px 2px;
  flex: 1;
  position: relative;
}
.phase-line.live::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--cy), transparent);
  width: 80px;
  animation: mk-sweep-shimmer 2.2s linear infinite;
}

/* =========================================================
   NUM DIGIT TICKER (CSS roll on a digit column)
   ========================================================= */
.digit {
  display: inline-block;
  width: 0.62em;
  height: 1em;
  overflow: hidden;
  vertical-align: bottom;
  position: relative;
  line-height: 1;
}
.digit .col {
  display: flex; flex-direction: column;
  line-height: 1;
  animation: mk-digit-roll 9s ease-in-out infinite;
}
@keyframes mk-digit-roll {
  0%, 100% { transform: translateY(0); }
  10%, 20% { transform: translateY(-10%); }
  30%, 40% { transform: translateY(-20%); }
  50%, 60% { transform: translateY(-30%); }
  70%, 80% { transform: translateY(-40%); }
  85%, 95% { transform: translateY(-50%); }
}