/* Vendor onboarding animation — Moment 01
   Phone flow (email → welcome → assistant) + Trustmi Assistant frame revealed message by message. */
.vo{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}
.vo-block{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}

/* Slider: phone flow and agent conversation side by side, switched with left/right arrows */
.vo-stage{display:flex;align-items:center;gap:20px;width:100%}
.vo-viewport{flex:1;min-width:0;overflow:hidden}
.vo-track{display:flex;align-items:center;transition:transform .42s cubic-bezier(.65,0,.35,1)}
.vo-slide{flex:0 0 100%;min-width:0;justify-content:center}
.vo-arrow{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #E8EBF2;color:#1B2736;cursor:pointer;box-shadow:0 2px 8px rgba(10,2,6,.08);transition:background .2s,border-color .2s,opacity .2s,transform .2s}
.vo-arrow:hover:not(:disabled){background:#F5F7FB;border-color:#D5DAE6}
.vo-arrow:disabled{opacity:.3;cursor:default;box-shadow:none}
.vo-arrow:focus-visible{outline:2px solid #2c4283;outline-offset:2px}
.vo-prev svg{transform:rotate(180deg)}
.vo-arrow.nudge{animation:voNudge 1.6s ease-in-out 2}
@keyframes voNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px);border-color:#2c4283}}
.vo-dots{display:flex;gap:8px}
.vo-dot{width:8px;height:8px;padding:0;border-radius:999px;border:0;background:#D5DAE6;cursor:pointer;transition:width .3s,background .3s}
.vo-dot.on{width:24px;background:#1B2736}
.vo-dot:focus-visible{outline:2px solid #2c4283;outline-offset:3px}
@media (max-width:640px){.vo-stage{gap:8px}.vo-arrow{width:36px;height:36px}}

/* Phone */
.vo-phone{position:relative;height:min(640px,80vh);aspect-ratio:416/860;max-width:100%}
.vo-phone .vo-screen{position:absolute;inset:0;display:flex;justify-content:center;opacity:0;z-index:1;transition:opacity .4s ease;will-change:opacity}
.vo-phone .vo-screen.on{opacity:1}
.vo-phone .vo-screen.top{z-index:2}
.vo-phone .vo-screen img{width:100%;height:100%;max-width:none;object-fit:contain;user-select:none;pointer-events:none}

/* Cursor */
.vo-cursor{position:absolute;left:0;top:0;width:22px;height:22px;pointer-events:none;z-index:20;transition:transform .9s cubic-bezier(.45,.05,.25,1),opacity .3s;will-change:transform}
.vo-cursor svg{display:block;margin:-2px 0 0 -4px;transform-origin:4px 2px;filter:drop-shadow(0 2px 3px rgba(18,26,58,.35));transition:transform .12s}
.vo-cursor .vo-ripple{position:absolute;left:-20px;top:-20px;width:40px;height:40px;box-sizing:border-box;border-radius:50%;background:rgba(44,66,131,.22);border:2px solid rgba(44,66,131,.55);transform:scale(0);opacity:0;transition:transform .15s ease,opacity .15s ease}
.vo-cursor.down .vo-ripple{transform:scale(.6);opacity:1}
.vo-cursor.down svg{transform:scale(.86)}
.vo-cursor.click .vo-ripple{animation:voRipple .6s ease-out}
.vo-cursor.click svg{transform:scale(.86)}
@keyframes voRipple{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.9);opacity:0}}

/* Assistant frame */
.vo-fwrap{position:relative}
.vo-fscale{position:absolute;left:0;top:0;width:611px;transform-origin:top left}
.vo-frame{width:611px;background:#fff;border-radius:12px;overflow:hidden;position:relative;box-sizing:border-box;border:1px solid #E7E9EF}
.vo-scroller{overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:thin}
.vo-slice{width:611px;background-image:var(--vo-img);background-repeat:no-repeat;background-size:611px auto;animation:voIn .35s cubic-bezier(.2,.7,.2,1) both}
.vo-slice.head{position:sticky;top:0;z-index:5;animation:none}
@keyframes voIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vo-typing{display:flex;padding:10px 17px 6px 56px}
.vo-typing.right{justify-content:flex-end}
.vo-typing div{display:inline-flex;gap:4px;background:#ecf5f6;border-radius:12px;padding:14px 16px}
.vo-typing.right div{background:#dde9ee}
.vo-typing i{width:6px;height:6px;border-radius:50%;background:#8a90a8;animation:voBlink 1s infinite}
.vo-typing i:nth-child(2){animation-delay:.15s}.vo-typing i:nth-child(3){animation-delay:.3s}
@keyframes voBlink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.vo-press{position:absolute;border-radius:8px;background:rgba(255,255,255,.28);pointer-events:none;animation:voFlash .45s ease-out forwards}
@keyframes voFlash{from{opacity:1}to{opacity:0}}

/* controls row: dots + pause/play + restart */
.vo-bar{display:flex;align-items:center;gap:16px}
.vo-ctl{display:flex;gap:6px;padding-left:16px;border-left:1px solid #E8EBF2}
.vo-ctl button{width:32px;height:32px;padding:0;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #E8EBF2;color:#1B2736;cursor:pointer;box-shadow:0 1px 4px rgba(10,2,6,.06);transition:background .2s,border-color .2s}
.vo-ctl button:hover{background:#F5F7FB;border-color:#D5DAE6}
.vo-ctl button:focus-visible{outline:2px solid #2c4283;outline-offset:2px}
.vo-ctl button[aria-pressed="true"]{border-color:#2c4283}
.vo.is-paused .vo-typing i{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.vo-cursor{transition:none}.vo-slice{animation:none}.vo-track{transition:none}.vo-arrow.nudge{animation:none}}

/* phone cursor moves 1.5x faster than the agent-frame one */
.vo-phone .vo-cursor{transition:transform .6s cubic-bezier(.45,.05,.25,1),opacity .2s}

/* Real hotspot over an on-image button — invisible until hovered/focused, with a
   gentle pulsing ring inviting the click (same language as the collab-approve hotspots). */
.vo-hit{position:absolute;border:0;padding:0;background:transparent;cursor:pointer;border-radius:8px;z-index:21}
.vo-hit::after{content:"";position:absolute;inset:-5px;border-radius:11px;border:2px solid #2D8DE7;opacity:0;animation:voHitPulse 2.2s ease-out infinite;pointer-events:none}
.vo-hit:hover::after,.vo-hit:focus-visible::after{animation:none;opacity:1}
.vo-hit:focus-visible{outline:2px solid #2D8DE7;outline-offset:2px}
@keyframes voHitPulse{0%{opacity:.9;transform:scale(1)}70%{opacity:0;transform:scale(1.12)}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.vo-hit::after{animation:none;opacity:.8}}

/* while paused, the Play button invites the click */
.vo-ctl [data-a="pause"]{position:relative}
.vo.is-paused .vo-ctl [data-a="pause"]::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #2D8DE7;opacity:0;animation:voPlayPulse 2.2s ease-out infinite;pointer-events:none}
@keyframes voPlayPulse{0%{opacity:.9;transform:scale(1)}70%{opacity:0;transform:scale(1.25)}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.vo.is-paused .vo-ctl [data-a="pause"]::after{animation:none;opacity:.8}}