/* VogChat intro animation (intro.js) — same 4 scenes as the iPhone app */
.vi { --vi-wall: #efeae2; --vi-in: #ffffff; --vi-out: #d9fdd3; --vi-text: #111b21; --vi-meta: #667781; --vi-card: #ffffff; --vi-sunk: #f0f2f5; --vi-bar: #f6f5f3; --vi-line: rgba(17,27,33,.1); --vi-green: #00a884; --vi-green-d: #008069; --vi-danger: #e5484d; position: relative; width: 100%; }
[data-theme="dark"] .vi { --vi-wall: #0b141a; --vi-in: #202c33; --vi-out: #005c4b; --vi-text: #e9edef; --vi-meta: #8696a0; --vi-card: #111b21; --vi-sunk: #202c33; --vi-bar: #1f2c34; --vi-line: rgba(255,255,255,.08); --vi-green-d: #00a884; --vi-danger: #ff6369; }

.vi-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vi-track::-webkit-scrollbar { display: none; }
.vi-slide { flex: 0 0 100%; scroll-snap-align: center; padding: 0 22px; box-sizing: border-box; text-align: center; }
.vi-stage { position: relative; height: 270px; border-radius: 28px; overflow: hidden; border: 1px solid var(--vi-line); background: var(--vi-wall) url("assets/doodle-light.svg?v=2") 0 0 / 280px 280px; display: flex; align-items: center; justify-content: center; color: var(--vi-text); }
[data-theme="dark"] .vi-stage, [data-theme="dark"] .vi-chat { background-image: url("assets/doodle-dark.svg?v=2"); }
.vi-title { font-size: 26px; font-weight: 800; letter-spacing: -.4px; margin: 22px 0 0; color: var(--text, #111b21); line-height: 1.15; }
.vi-text { font-size: 16px; line-height: 1.4; margin: 8px auto 0; color: var(--text-2, #54656f); max-width: 360px; min-height: 44px; }
.vi-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.vi-dots button { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: var(--vi-line); cursor: pointer; transition: width .3s, background .3s; }
.vi-dots button.on { width: 22px; background: var(--vi-green); }
[data-theme="dark"] .vi-dots button:not(.on) { background: rgba(255,255,255,.18); }

/* scene change by timer / dots */
.vi-slide.on.jump .vi-stage, .vi-slide.on.jump .vi-title, .vi-slide.on.jump .vi-text { animation: vi-in .45s cubic-bezier(.2,.8,.2,1) both; }
.vi-slide.on.jump .vi-title { animation-delay: .05s; }
.vi-slide.on.jump .vi-text { animation-delay: .1s; }
@keyframes vi-in { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }

/* shared bits */
.vi-b { display: block; max-width: 86%; padding: 7px 11px; border-radius: 14px; font-size: 14.5px; line-height: 1.3; text-align: left; box-shadow: 0 1px .5px rgba(11,20,26,.13); color: var(--vi-text); }
.vi-b.out { background: var(--vi-out); margin-left: auto; border-top-right-radius: 4px; }
.vi-b.in { background: var(--vi-in); margin-right: auto; border-top-left-radius: 4px; }
@keyframes vi-pop { from { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes vi-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 1 — open a room */
.vi-fab { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; background: var(--vi-green); color: #fff; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.vi-fab svg { stroke-width: 2.6; }
.vi-rip { position: absolute; inset: 0; border-radius: 50%; background: var(--vi-green); opacity: 0; }
.vi-card { background: var(--vi-card); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.12); opacity: 0; }
.vi-card small { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--vi-meta); }
.vi-tiles { display: flex; gap: 4px; perspective: 300px; }
.vi-tiles b { width: 26px; height: 34px; border-radius: 7px; background: var(--vi-sunk); color: var(--vi-green-d); display: grid; place-items: center; font: 700 17px/1 var(--font, sans-serif); opacity: 0; transform: rotateX(90deg); }
.vi-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: rgba(0,168,132,.12); color: var(--vi-green-d); font-size: 12px; font-weight: 700; opacity: 0; }
.on .vi-fab { animation: vi-tap .52s .35s ease-out both; }
.on .vi-rip { animation: vi-ripple .6s .4s ease-out both; }
.on .vi-card { animation: vi-pop .5s .9s cubic-bezier(.2,.9,.3,1.2) both; }
.on .vi-tiles b { animation: vi-flip .45s calc(1.1s + var(--i) * 80ms) cubic-bezier(.2,.9,.3,1.25) both; }
.on .vi-badge { animation: vi-pop .45s 2.2s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes vi-tap { 25% { transform: scale(.82); } 60% { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes vi-ripple { from { opacity: .35; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }
@keyframes vi-flip { from { opacity: 0; transform: rotateX(90deg); } to { opacity: 1; transform: rotateX(0); } }

/* 2 — tell your friend; they type the code and password */
.vi-s2 { width: 100%; padding: 0 20px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; }
.vi-say { align-self: flex-end; font-size: 13.5px; line-height: 1.45; opacity: 0; }
.vi-say small { color: var(--vi-meta); font-size: 11px; }
.vi-say b { letter-spacing: .5px; }
.vi-form { position: relative; align-self: flex-start; width: 220px; background: var(--vi-card); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 6px 16px rgba(0,0,0,.12); opacity: 0; }
.vi-field { display: flex; flex-direction: column; text-align: left; background: var(--vi-sunk); border-radius: 9px; padding: 5px 10px; }
.vi-field small { font-size: 10px; font-weight: 700; color: var(--vi-meta); text-transform: uppercase; letter-spacing: .5px; }
.vi-field b { min-height: 18px; font: 700 14px/18px var(--mono, ui-monospace, monospace); letter-spacing: 1.5px; color: var(--vi-text); }
.vi-join { height: 32px; border-radius: 16px; background: var(--vi-green); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.vi-form .vi-done { position: absolute; left: 50%; top: 50%; margin: -29px 0 0 -29px; width: 58px; height: 58px; border-radius: 50%; background: var(--vi-green); color: #fff; display: grid; place-items: center; opacity: 0; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.vi-form .vi-done svg { stroke-width: 3; }
.on .vi-say { animation: vi-pop .5s .2s cubic-bezier(.2,.9,.3,1.2) both; }
.on .vi-form { animation: vi-fade-up .45s .7s ease-out both; }
.on .vi-join { animation: vi-tap .5s 2.55s ease-out both; }
.on .vi-form .vi-done { animation: vi-pop .45s 2.95s cubic-bezier(.2,.9,.3,1.25) both; }

/* 3 — only you can read it */
.vi-s3 { width: 100%; padding: 0 18px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vi-row { align-self: stretch; display: flex; flex-direction: column; gap: 3px; opacity: 0; }
.vi-row small { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--vi-meta); }
.vi-lock { width: 24px; height: 24px; border-radius: 50%; background: var(--vi-green); color: #fff; display: grid; place-items: center; opacity: 0; }
.vi-lock svg { stroke-width: 2.6; }
.vi-cipher { align-self: center; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: #1f2c34; color: #7ee2b8; border-radius: 10px; padding: 7px 12px; font: 500 13px/1.3 var(--mono, ui-monospace, monospace); letter-spacing: .3px; }
[data-theme="dark"] .vi-cipher { background: #0b141a; }
.on .vi-row.r1 { animation: vi-fade-up .36s .2s ease-out both; }
.on .vi-lock.l1 { animation: vi-pop .4s .7s cubic-bezier(.2,.9,.3,1.25) both; }
.on .vi-row.r2 { animation: vi-fade-up .36s 1s ease-out both; }
.on .vi-lock.l2 { animation: vi-pop .4s 2.1s cubic-bezier(.2,.9,.3,1.25) both; }
.on .vi-row.r3 { animation: vi-fade-up .38s 2.5s ease-out both; }

/* 4 — leave no trace */
.vi-chat { width: 250px; height: 222px; border-radius: 20px; overflow: hidden; border: 1px solid var(--vi-line); background: var(--vi-wall) url("assets/doodle-light.svg?v=2") 0 0 / 280px 280px; display: flex; flex-direction: column; box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.vi-chat-head { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 44px; background: var(--vi-bar); border-bottom: 1px solid var(--vi-line); }
.vi-chat-head b { flex: 1; text-align: left; font-size: 15px; }
.vi-av { width: 26px; height: 26px; border-radius: 50%; background: #ec4899; color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.vi-exit { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--vi-danger); background: rgba(229,72,77,.12); }
.vi-chat-body { position: relative; flex: 1; padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.vi-chat-body .vi-b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vi-ghost { position: absolute; left: 50%; top: 24px; margin-left: -46px; opacity: 0; }
.on .vi-exit { animation: vi-tap .52s .7s ease-out both; }
.on .m3 { animation: vi-away .52s 1.3s ease-in both; }
.on .m2 { animation: vi-away .52s 1.5s ease-in both; }
.on .m1 { animation: vi-away .52s 1.7s ease-in both; }
.on .vi-ghost { animation: vi-pop .5s 2.4s cubic-bezier(.2,.9,.3,1.25) both, vi-bob 1.8s 2.9s ease-in-out infinite; }
@keyframes vi-away { to { opacity: 0; transform: translateY(-34px) scale(.86); filter: blur(2px); } }
@keyframes vi-bob { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(5px); } }

@media (prefers-reduced-motion: reduce) {
    .vi .on * { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* 5 — open code */
.vi-s5 { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vi-code { position: relative; width: 290px; max-width: calc(100% - 24px); box-sizing: border-box; background: #1f2c34; border-radius: 16px; padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 7px; text-align: left; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.2); opacity: 0; }
.vi-code-bar { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.vi-code-bar i { width: 9px; height: 9px; border-radius: 50%; }
.vi-code-bar span { margin-left: 6px; color: #8696a0; font: 11px var(--mono, ui-monospace, monospace); }
.vi-code code { color: #e9edef; font: 11.5px/1.35 var(--mono, ui-monospace, monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.vi-code em { color: #7ee2b8; font-style: normal; }
.vi-lens { position: absolute; left: 10px; top: 0; color: #7ee2b8; opacity: 0; }
.vi-lens svg { stroke-width: 2.4; }
.vi-open { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: var(--vi-green); color: #fff; font-size: 12px; font-weight: 700; opacity: 0; }
.vi-open svg { stroke-width: 3; }
.on .vi-code { animation: vi-pop .45s .2s cubic-bezier(.2,.9,.3,1.2) both; }
.on .vi-code .cl1 { animation: vi-fade-up .3s .7s ease-out both; }
.on .vi-code .cl2 { animation: vi-fade-up .3s 1.02s ease-out both; }
.on .vi-code .cl3 { animation: vi-fade-up .3s 1.34s ease-out both; }
.on .vi-lens { animation: vi-scan-code 1.1s 1.8s ease-in-out both; }
.on .vi-open { animation: vi-pop .45s 3s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes vi-scan-code { 0% { opacity: 0; transform: translate(0, 36px); } 10% { opacity: 1; } 50% { transform: translate(100px, 58px); } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(200px, 82px); } }