/* talkdonna.ai — the six-beat story in motion, with assets/story.js.
   Nothing under .story--live applies until story.js has confirmed it can run,
   so with no script the page is the finished story. Only transform, opacity and
   stroke-dashoffset move. One easing: cubic-bezier(.22,.61,.36,1). */

.stage{position:relative}
.kp{white-space:nowrap}
.kp.on{color:var(--sage-ink)}
.story__zone{position:absolute;left:0;top:0;width:1px;height:1px;visibility:hidden;pointer-events:none}
.story__replay{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;padding:0;padding-inline-end:4px;
  background:none;border:0;cursor:pointer;color:var(--muted);
  font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.story__replay:hover{color:var(--ink)}

/* ---------- the thread: one line the request travels, beat to beat ---------- */
.thread{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2;opacity:.62}
.thread path{fill:none;stroke:var(--sage);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tok{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--sage-ink);
  opacity:0;pointer-events:none;z-index:3;will-change:transform,opacity}

/* ---------- staged art: hidden until its beat plays ---------- */
.story--live .s{opacity:0;transform:translateY(8px)}
.story--live .f{opacity:0}
.story--live .s.on{opacity:1;transform:none;
  transition:opacity .44s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 90ms),transform .44s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 90ms)}
.story--live .f.on{opacity:1;transition:opacity .4s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 110ms)}
.story.snap *,.story.snap *::before,.story.snap *::after{transition:none !important}

/* the beat that is playing carries a quiet sage edge */
.story--live .beat{position:relative}
.story--live .beat::after{content:"";position:absolute;inset:-1px;border:1px solid var(--sage);border-radius:14px;
  opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.22,.61,.36,1)}
.story--live .beat.now::after{opacity:.5}

/* 01 — the sentence resolves word by word */
.story--live .beat__said .w{opacity:0}
.story--live .beat__said.on .w{opacity:1;transition:opacity .3s cubic-bezier(.22,.61,.36,1) calc(var(--i) * 95ms)}

/* 02 — the chip lands carrying the spoken words, then turns over into the brief line */
.story--live .context-facts>span{position:relative}
.chip__to{display:inline-block}
.chip__from{position:absolute;inset-inline:12px 10px;top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sage-ink);opacity:0;pointer-events:none}
.story--live .chip__to{transition:opacity .32s cubic-bezier(.22,.61,.36,1) .14s,transform .32s cubic-bezier(.22,.61,.36,1) .14s}
.story--live .chip__from{transition:opacity .18s cubic-bezier(.22,.61,.36,1),transform .18s cubic-bezier(.22,.61,.36,1)}
.story--live .chip__from{transform:translateY(-5px)}
.story--live .raw>.chip__from{opacity:1;transform:none;transition:none}
.story--live .raw>.chip__to{opacity:0;transform:translateY(5px);transition:none}

/* 03 — each agent row works on its own clock, then states its word */
.story--live .voice-worker{position:relative;overflow:hidden}
.story--live .voice-worker::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:1px;
  background:var(--sage);transform:scaleX(0);transform-origin:0 50%}
[dir="rtl"] .story--live .voice-worker::after{transform-origin:100% 50%}
.story--live .voice-worker.work::after{transform:none;transition:transform var(--d,1s) cubic-bezier(.4,.1,.4,1)}
.story--live .voice-worker.done::after{opacity:0;transition:opacity .3s}
.story--live .voice-worker>span:last-child{opacity:0}
.story--live .voice-worker.done>span:last-child{opacity:1;transition:opacity .3s cubic-bezier(.22,.61,.36,1)}
.story--live .voice-worker .dot{opacity:.34}
.story--live .voice-worker.work .dot{opacity:1;animation:breathe .9s ease-in-out infinite}
.story--live .voice-worker.done .dot{opacity:1;animation:none}

/* 05 — Focus: the HERE marker steps down the rail, the ink ladder follows */
.fx__mk{display:none}
.story--live .fx__mk{display:block;position:absolute;left:23.5px;top:0;width:12px;height:12px;border-radius:50%;
  background:var(--sage);box-shadow:0 0 0 4px var(--ground);z-index:1;
  transition:transform .56s cubic-bezier(.22,.61,.36,1)}
.story--live .fx__sec>*{transition:opacity .5s cubic-bezier(.22,.61,.36,1)}
.story--live .fx__sec--here::before{left:-20.5px;top:32px;width:8px;height:8px;background:#6b675f;animation:none}
.story--live .fx__meta+.fx__sec--here::before{top:22px}
.story--live .fx__sec::after{content:"";position:absolute;left:-17.5px;top:24px;bottom:-12px;width:2px;background:var(--sage);
  z-index:-1;opacity:0;transition:opacity .5s cubic-bezier(.22,.61,.36,1)}
.story--live .fx__sec--here::after{opacity:1}
.story--live .fx__sec--been>.fx__here,.story--live .fx__sec--ahead>.fx__here{opacity:0}
.story--live .fx__tr--cut{position:relative;color:rgba(250,242,224,.82);text-decoration:none}
.story--live .fx__tr--cut>span{transition:opacity .4s cubic-bezier(.22,.61,.36,1)}
.story--live .fx__tr--cut::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(250,242,224,.6);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.story--live .cut .fx__tr--cut>span{opacity:.46}
.story--live .cut .fx__tr--cut::after{transform:none}
.story--live .fx__sec:not(.cut)>.fx__edit{opacity:0}
.story--live .cut>.fx__edit{transition-delay:.42s}

/* 06 — the one card on the one Lock Screen: a tap lands on Talk, then on hang up;
   what a state change brings in fades up, as a Live Activity redraws */
@keyframes la-tap{from{transform:scale(.72);opacity:.9}to{transform:scale(1.18);opacity:0}}
@keyframes la-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.story--live .tap::after{content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid rgba(255,255,255,.8);
  pointer-events:none;animation:la-tap .44s cubic-bezier(.22,.61,.36,1) both}
.story--live .ls .la__hear,.story--live .ls .la__rc,.story--live .ls .la__q,.story--live .ls .la__ctl,
.story--live .ls .la__talk,.story--live .ls .la__timer,.story--live .ls .la__meter{animation:la-in .36s cubic-bezier(.22,.61,.36,1) both}

/* stacked, the phone is already on screen while its exchange is still below the fold */
@media (max-width:760px){.story--live .fx__col.f{opacity:1}}

/* loops rest when their beat is off screen or the tab is hidden */
.story.is-hidden *,.story .beat.is-off *,.story.is-hidden *::before,.story .beat.is-off *::before{animation-play-state:paused !important}