/* =============================================================
   agents-motion.css
   Visual states used by agents-motion.js.
   ============================================================= */

/* ----- Typewriter caret ----- */
.tw-caret::after{
  content:'▍';
  display:inline-block;
  color:var(--green-hi, #dbfd31);
  animation: tw-blink 0.9s steps(1) infinite;
  margin-left:1px;
  font-weight:400;
}
@keyframes tw-blink{ 50%{opacity:0} }

/* ----- Maya chat messages fade/slide in ----- */
.maya-right .maya-say.is-pre{
  opacity:0;
  transform:translateY(8px);
}
.maya-right .maya-say{
  transition:opacity .4s ease, transform .4s ease;
}
.maya-right .maya-say.is-in{
  opacity:1;
  transform:translateY(0);
}

/* ----- Hero LIVE chip: breathing dot ----- */
.maya-card .chip.is-live::before{
  content:'';
  display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background:var(--green-hi, #dbfd31);
  margin-right:6px;vertical-align:middle;
  animation: chip-pulse 2s ease-in-out infinite;
  box-shadow:0 0 0 0 rgba(219,253,49,.6);
}
@keyframes chip-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(219,253,49,.55); opacity:1 }
  50%    { box-shadow:0 0 0 6px rgba(219,253,49,0);  opacity:.6 }
}

/* ----- Toolbelt: tool fire animation ----- */
.tool-cell{
  position:relative;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.tool-cell.is-fire{
  background: #E8FFB0;
  border-color: var(--green-hi, #dbfd31);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px -4px rgba(219,253,49,.6), inset 0 0 0 1px rgba(0,0,0,.06);
  animation: tool-fire 1.2s ease-out;
}
@keyframes tool-fire{
  0%   { background:#DBFD31; box-shadow:0 0 0 0 rgba(219,253,49,.9) }
  30%  { background:#E8FFB0 }
  100% { background:inherit; box-shadow:0 0 0 0 rgba(219,253,49,0) }
}
/* Subtle heartbeat on non-firing cells so the grid feels alive */
@media (prefers-reduced-motion: no-preference){
  .tool-cell{ animation: tool-breathe 6s ease-in-out infinite; animation-delay: calc(var(--i,0) * 120ms); }
}
@keyframes tool-breathe{
  0%,100%{ opacity:1 }
  50%    { opacity:.86 }
}

/* ----- Live Ops feed rows ----- */
.ops-track{ display:flex; flex-direction:column; gap:6px; }
.ops-row{
  display:grid;
  grid-template-columns: 82px 1fr auto 70px;
  gap:12px;
  align-items:center;
  padding:8px 12px;
  background:#0e0e0f;
  color:#FBFBFC;
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  font-family: var(--f-mono, ui-monospace, SFMono-Regular, monospace);
  font-size:11px;
  overflow:hidden;
  transition:opacity .3s ease, transform .3s ease, background .6s ease;
}
.ops-row.is-new{
  animation: ops-in .6s ease-out;
  background:#1a1a1c;
}
@keyframes ops-in{
  from{ opacity:0; transform:translateY(-8px); background:#2a2a2c }
  to  { opacity:1; transform:translateY(0);    background:#0e0e0f }
}
.ops-row .k{
  font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(251,251,252,.55); font-weight:600;
}
.ops-row .v{ color:#FBFBFC; }
.ops-row .tag{
  font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--green-hi, #dbfd31);
  background:rgba(219,253,49,.1);
  padding:2px 6px; border-radius:3px;
}
.ops-row .ts{
  color: rgba(251,251,252,.4);
  font-size:10px; text-align:right;
  font-variant-numeric: tabular-nums;
}

/* ----- Provisioning terminal ----- */
.prov-term{
  background:#0e0e0f;
  color:#FBFBFC;
  border-radius:12px;
  padding:20px 22px;
  font-family:var(--f-mono, ui-monospace, SFMono-Regular, monospace);
  font-size:12px;
  line-height:1.7;
  min-height:240px;
  border:1px solid rgba(255,255,255,.08);
}
.prov-term .l{ white-space:pre; min-height:1.7em; }
.prov-term .tok-dim{ color:rgba(251,251,252,.5) }
.prov-term .tok-str{ color:#A4E3B0 }
.prov-term .tok-ok { color: var(--green-hi, #dbfd31); font-weight:600 }
.prov-term .tok-warn{ color:#FFC857 }

.prov-outputs{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:18px;
}
.prov-out{
  background:#FBFBFC;
  border:1px solid var(--line, #E8E8EB);
  border-radius:10px;
  padding:14px;
  transition: opacity .5s ease, transform .5s ease;
}
.prov-out.is-pre{ opacity:0; transform:translateY(10px); }
.prov-out.is-in { opacity:1; transform:translateY(0); }
.prov-out .k{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--mute, #6A6A71); font-weight:600;
  font-family: var(--f-mono, ui-monospace, SFMono-Regular, monospace);
}
.prov-out .v{
  margin-top:6px;
  font-size:13px; color: var(--ink, #0E0E0F);
  font-family: var(--f-mono, ui-monospace, SFMono-Regular, monospace);
}
.prov-out .h{
  margin-top:2px;
  font-size:11px; color: var(--mute, #6A6A71);
}

/* ----- Use-case flow animations ----- */
.uc-flow-arrow{ position:relative; }
.uc-flow-arrow .uc-dot{
  position:absolute;
  left:50%; top:50%;
  width:8px; height:8px; border-radius:50%;
  background: var(--green-hi, #dbfd31);
  box-shadow: 0 0 12px 2px rgba(219,253,49,.8);
  opacity:0;
  transform:translate(-50%, -50%);
  pointer-events:none;
}
.uc-flow-arrow.is-travel .uc-dot{
  animation: uc-travel .9s ease-in-out;
}
@keyframes uc-travel{
  0%  { opacity:0; top:0%;   }
  15% { opacity:1;           }
  85% { opacity:1;           }
  100%{ opacity:0; top:100%; }
}

.uc-node, .uc-node-agent, .uc-sub{
  transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.uc-node.is-active, .uc-node-agent.is-active{
  box-shadow: 0 0 0 2px rgba(219,253,49,.55), 0 6px 24px -6px rgba(219,253,49,.45);
  transform: translateY(-1px);
}
.uc-sub.is-active{
  background:#F4FFC2;
}
.uc-rail.is-glow{
  box-shadow: 0 0 0 2px rgba(219,253,49,.5);
}

/* Dark card variant compatibility */
.uc-card.dark .uc-sub.is-active{ background:rgba(219,253,49,.14); }

/* ----- Counters: tabular alignment ----- */
[data-count]{ font-variant-numeric: tabular-nums; }

/* =============================================================
   GENERIC & HOME-PAGE STATES
   ============================================================= */

/* Generic live chip dot */
.is-live-chip{ position:relative; }
.is-live-chip .d,
.is-live-chip::before{
  animation: chip-pulse 2s ease-in-out infinite;
}
/* reuse chip-pulse from above */

/* Generic stagger helpers */
.is-pre-stagger{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.is-in-stagger{ opacity:1; transform:translateY(0); }

/* Flow steps (home) */
.flow-step .num{
  transition: background .5s ease, color .5s ease, border-color .5s ease,
              box-shadow .5s ease, transform .5s ease;
}
.flow-step.active .num{
  transform: scale(1.06);
  box-shadow: 0 8px 24px -8px rgba(219,253,49,.6), 0 0 0 6px rgba(219,253,49,.18);
}
.flow-step .tag{
  transition: background .5s ease, color .5s ease, opacity .4s ease;
  opacity:.55;
}
.flow-step.active .tag{ opacity:1; }

/* World map city blips */
.world .city .blip{
  transition: box-shadow .4s ease, transform .4s ease;
}
.world .city .blip.is-ping{
  animation: city-ping 1.4s ease-out;
}
@keyframes city-ping{
  0%   { box-shadow: 0 0 0 0 rgba(219,253,49,.85), 0 0 0 0 rgba(219,253,49,.7); transform:scale(1); }
  60%  { box-shadow: 0 0 0 18px rgba(219,253,49,0),  0 0 0 34px rgba(219,253,49,0); transform:scale(1.25); }
  100% { box-shadow: 0 0 0 4px rgba(219,253,49,.18), 0 0 30px rgba(219,253,49,.4); transform:scale(1); }
}

/* Transaction rows */
.tx-row.is-pre-row{ opacity:0; transform:translateX(10px); transition:opacity .5s ease, transform .5s ease; }
.tx-row.is-in-row{ opacity:1; transform:translateX(0); }

/* Currency grid */
.curr-grid .c{ transition:opacity .5s ease, transform .5s ease; }
.curr-grid .c.is-pre-curr{ opacity:0; transform:translateY(8px) scale(.96); }
.curr-grid .c.is-in-curr{ opacity:1; transform:translateY(0) scale(1); }

/* Agent card messages */
.ag-conv > .is-pre-msg{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.ag-conv > .is-in-msg { opacity:1; transform:translateY(0); }

/* Pillars and use-case cards stagger */
.is-pre-card{ opacity:0; transform:translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.is-in-card { opacity:1; transform:translateY(0); }

/* Counters: tabular */
.hero-trust .num, .stats-grid .num{ font-variant-numeric: tabular-nums; }

/* Flow dashed line animated flow */
.flow-grid::after{
  background-size: 200% 100%;
  animation: flow-dash 3s linear infinite;
}
@keyframes flow-dash{
  0%   { background-position: 0 0; }
  100% { background-position: 24px 0; }
}

/* =============================================================
   HERO DEVICE MOCKUP
   ============================================================= */

/* Sidebar item brief highlight to signal background activity */
.dev-side .item{ transition: background .35s ease, color .35s ease, transform .35s ease; }
.dev-side .item.is-side-flash{
  background: #F4FFC2;
  color: var(--ink, #0E0E0F);
  transform: translateX(2px);
}
.dev-side .item.is-side-flash .ic{
  background: var(--green-hi, #dbfd31);
  color: var(--ink, #0E0E0F);
}

/* "Send payout" button attention pulse */
.dev-row1 .btn.is-attn{
  animation: btn-attn 2.4s ease-in-out 2;
}
@keyframes btn-attn{
  0%,100%{ box-shadow: 0 0 0 0 rgba(29,185,84,0); }
  40%    { box-shadow: 0 0 0 8px rgba(29,185,84,.18); }
  70%    { box-shadow: 0 0 0 14px rgba(29,185,84,0); }
}

/* Chart value: tabular so digits don't jitter while counting up */
.dev-chart .v, .dev-stat .v{ font-variant-numeric: tabular-nums; }

/* =============================================================
   CODE CARD — line-by-line reveal
   ============================================================= */
.code-body .code-line{
  display: block;
  transition: opacity .35s ease, transform .35s ease;
}
.code-body .code-line.is-pre-line{
  opacity: 0;
  transform: translateY(3px);
}
.code-body .code-line.is-in-line{
  opacity: 1;
  transform: translateY(0);
}

/* Code tab active transition */
.code-tab{ transition: background .3s ease, color .3s ease, border-color .3s ease; }

/* =============================================================
   PRODUCT-PAGE HERO VISUALS
   ============================================================= */

/* LIVE chip on pp-vis-label (dark bg) — prefix green dot */
.pp-vis-label.is-live-chip::before{
  content:'';
  display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background: var(--green-hi, #dbfd31);
  margin-right:6px; vertical-align:middle;
  animation: chip-pulse 2s ease-in-out infinite;
  box-shadow:0 0 0 0 rgba(219,253,49,.6);
}
/* When label sits on green bg (dark hero uses green), swap */
.pp-hero.dark .pp-vis-label.is-live-chip::before{ background:var(--ink) }

/* Direct .pp-vis children cascade */
.pp-vis .pp-vis-pre{
  opacity:0; transform:translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.pp-vis .pp-vis-in{ opacity:1; transform:translateY(0); }

/* Row-level stagger inside pp-vis list containers */
.pp-vis .pp-row-pre{
  opacity:0; transform:translateY(6px);
  transition: opacity .45s ease, transform .45s ease, background-color .5s ease, border-color .5s ease;
}
.pp-vis .pp-row-in{ opacity:1; transform:translateY(0); }

/* Transfers — active rail card pulse */
.tr-rail{
  transition: background-color .45s ease, border-color .45s ease, transform .45s ease, box-shadow .45s ease;
}
.tr-rail.is-rail-active{
  border-color: var(--green-hi, #dbfd31) !important;
  box-shadow: 0 0 0 2px rgba(219,253,49,.25), 0 10px 32px -12px rgba(219,253,49,.35);
  transform: translateY(-2px);
}
.tr-rail.is-rail-active .sp{ color: var(--green-hi, #dbfd31) }

/* Transfers — live feed rows stream in */
.tr-live{ display:flex; flex-direction:column; gap:4px; }
.tr-live .tr-live-row{
  opacity:0; transform:translateY(-6px);
  transition: opacity .4s ease, transform .4s ease;
  padding:2px 0;
}
.tr-live .tr-live-row.tr-live-in{ opacity:1; transform:translateY(0); }
.tr-live .tr-live-row.tr-live-out{ opacity:0; transform:translateY(4px); }

/* Cards page — gentle float */
@keyframes pp-card-float{
  0%,100%{ transform: translateY(0) }
  50%    { transform: translateY(-4px) }
}

/* Conversions page — rate tick flash */
.fx-card .rt{
  transition: color .3s ease, background-color .3s ease;
  font-variant-numeric: tabular-nums;
  display:inline-block;
}
.fx-card .rt.is-rt-tick{
  color: var(--green-deep, #1d753a);
  animation: rt-pop .3s ease-out;
}
@keyframes rt-pop{
  0%  { transform: scale(1) }
  50% { transform: scale(1.05) }
  100%{ transform: scale(1) }
}

/* Stat-row numbers tabular */
.pp-hero .stat-row .v{ font-variant-numeric: tabular-nums; }

/* Reduced motion kill */
@media (prefers-reduced-motion: reduce){
  .pp-vis .pp-vis-pre, .pp-vis .pp-row-pre{ opacity:1; transform:none }
  .pp-vis-label.is-live-chip::before{ animation:none }
  .tr-rail.is-rail-active{ transform:none; box-shadow:none }
  .tr-live .tr-live-row{ opacity:1; transform:none }
  .fx-card .rt.is-rt-tick{ animation:none }
}
/* ----- Reduced motion: kill all movement ----- */
@media (prefers-reduced-motion: reduce){
  .tw-caret::after{ animation:none; opacity:0 }
  .maya-card .chip.is-live::before{ animation:none }
  .tool-cell.is-fire, .tool-cell{ animation:none }
  .ops-row.is-new{ animation:none; background:#0e0e0f }
  .uc-flow-arrow.is-travel .uc-dot{ animation:none; opacity:0 }
  .uc-node.is-active, .uc-node-agent.is-active{ box-shadow:none; transform:none }
  .uc-sub.is-active{ background:transparent }
  .uc-rail.is-glow{ box-shadow:none }
  .is-live-chip::before, .is-live-chip .d{ animation:none }
  .is-pre-stagger, .is-pre-row, .is-pre-curr, .is-pre-msg, .is-pre-card{
    opacity:1; transform:none;
  }
  .flow-step.active .num{ transform:none; box-shadow:none }
  .world .city .blip.is-ping{ animation:none }
  .flow-grid::after{ animation:none }
  .dev-side .item.is-side-flash{ background:transparent; transform:none }
  .dev-row1 .btn.is-attn{ animation:none }
  .code-body .code-line.is-pre-line{ opacity:1; transform:none }
}