/* Vasbyt marketing — animated demos built on REAL app keyframes.
   demos.js stacks genuine app screenshots (assets/marketing/frames/, captured
   by tools/capture-demo-frames.cjs at 390×844) and crossfades them; the only
   synthetic elements are the annotation chrome layered on top: caption pills,
   a highlight ring, the AI spotlight dim, and a heart pop. Cumulative phase
   classes (.playing + .ph-1 … .ph-n) drive everything. DEFAULT (no classes) =
   the FINAL frame + closing caption, so no-JS, never-started, and
   reduced-motion all show a fully legible end state.
   Annotation geometry is % of the 390×844 frame (rects printed by the capture
   script); type sizes use --u (1 "app px" at the 390 reference) via container
   queries so pills scale from ~290px chapter shots up. */

.vb-demo {
    position: relative; display: block; width: 100%; height: 100%;
    overflow: hidden; background: #f5f7fb;
    container-type: inline-size;
    pointer-events: none; user-select: none; -webkit-user-select: none;
}
/* no-JS / pre-init fallback: the page ships the final keyframe as a plain <img> */
.vb-demo > img { display: block; width: 100%; height: 100%; object-fit: cover; }

.vbd-player { --u: 0.2564cqw; /* 1px at the 390px reference width */ position: absolute; inset: 0; }

/* loop restart: kill transitions for one frame so the reset never animates backwards */
.vb-demo.vbd-reset *, .vb-demo.vbd-reset *::before, .vb-demo.vbd-reset *::after {
    transition: none !important; animation: none !important;
}

/* ═══ Keyframe stack: crossfade + slow Ken-Burns drift while playing ═══ */
.vbd-frames { position: absolute; inset: 0; transform-origin: 50% 32%; }
.vb-demo.playing .vbd-frames { animation: vbdKen 18s ease-in-out infinite alternate; }
@keyframes vbdKen { from { transform: scale(1); } to { transform: scale(1.03); } }
html.reduce-motion .vb-demo .vbd-frames { animation: none !important; }

.vbd-frame {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity .5s ease;
}
.vbd-frame.active { opacity: 1; }

/* ═══ Caption pills: bottom-center, crossfade per phase ═══ */
.vbd-cap { position: absolute; left: 0; right: 0; bottom: calc(98 * var(--u)); height: calc(32 * var(--u)); z-index: 4; pointer-events: none; }
.vbd-cap span {
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    white-space: nowrap; padding: calc(8 * var(--u)) calc(14 * var(--u));
    border-radius: 999px; background: rgba(15, 23, 42, .88); color: #fff;
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    font-size: calc(11.5 * var(--u)); font-weight: 600; letter-spacing: .01em; line-height: 1.4;
    box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(15, 23, 42, .28);
    opacity: 0; transition: opacity .35s ease;
}
.vbd-cap span:last-child { opacity: 1; } /* final state: closing caption */
.vb-demo.playing .vbd-cap span:last-child { opacity: 0; }
.vb-demo.playing .vbd-cap .c1 { opacity: 1; }

/* ═══ Highlight ring (log): hugs the real input / button / timer pixels ═══ */
.vbd-ring {
    position: absolute; z-index: 3; opacity: 0;
    left: 16.4%; top: 26.4%; width: 23.1%; height: 7.3%; /* default = first target, so the fade-in never animates position */
    border: calc(2.5 * var(--u)) solid #2F6FD0; border-radius: calc(12 * var(--u));
    box-shadow: 0 0 0 calc(3 * var(--u)) rgba(47, 111, 208, .16),
                0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(47, 111, 208, .22);
    transition: all .55s cubic-bezier(.22, 1, .36, 1);
}
/* baseline + ph-1: weight input (90 gets typed into it) */
.vb-demo[data-demo=log].playing .vbd-ring { opacity: 1; left: 16.4%; top: 26.4%; width: 23.1%; height: 7.3%; }
/* ph-2: reps input */
.vb-demo[data-demo=log].ph-2 .vbd-ring { left: 43.7%; top: 26.4%; width: 21.1%; height: 7.3%; }
/* ph-3: the Log button */
.vb-demo[data-demo=log].ph-3 .vbd-ring { left: 75.8%; top: 27.3%; width: 17.6%; height: 7%; border-radius: 999px; }
/* ph-4: "Moderate · RIR 2" on the real effort sheet */
.vb-demo[data-demo=log].ph-4 .vbd-ring { left: 2.8%; top: 67.2%; width: 94.4%; height: 8.2%; border-radius: calc(14 * var(--u)); border-color: #3b82f6; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(59, 130, 246, .16), 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(59, 130, 246, .22); }
/* ph-5: the rest timer ring that started automatically */
.vb-demo[data-demo=log].ph-5 .vbd-ring { left: 6.7%; top: 12.7%; width: 14.2%; height: 8.4%; border-radius: 999px; border-color: #16a34a; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(22, 163, 74, .16), 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(22, 163, 74, .25); }
/* log captions: c1 → Tap Log (ph-3) → Rate the effort (ph-4) → Rest starts automatically (ph-5) */
.vb-demo[data-demo=log].ph-3 .vbd-cap .c1 { opacity: 0; }
.vb-demo[data-demo=log].ph-3 .vbd-cap .c2 { opacity: 1; }
.vb-demo[data-demo=log].ph-4 .vbd-cap .c2 { opacity: 0; }
.vb-demo[data-demo=log].ph-4 .vbd-cap .c3 { opacity: 1; }
.vb-demo[data-demo=log].ph-5 .vbd-cap .c3 { opacity: 0; }
.vb-demo[data-demo=log].ph-5 .vbd-cap .c4 { opacity: 1; }

/* ═══ AI spotlight: dimming overlay with a transparent window that walks the
       real AI Goal card — chips → DECISION → WHY → CUE ═══ */
.vbd-spot {
    position: absolute; z-index: 2; opacity: 0; border-radius: calc(10 * var(--u));
    left: 9.8%; top: 38.5%; width: 80.4%; height: 5.4%; /* default = first window, so the fade-in never animates position */
    box-shadow: 0 0 0 100vmax rgba(10, 16, 30, .44);
    transition: all .6s cubic-bezier(.22, 1, .36, 1);
}
.vb-demo[data-demo=ai].ph-1 .vbd-spot { opacity: 1; left: 9.8%; top: 38.5%; width: 80.4%; height: 5.4%; }
.vb-demo[data-demo=ai].ph-2 .vbd-spot { left: 9.8%; top: 43.2%; width: 80.4%; height: 6.3%; }
.vb-demo[data-demo=ai].ph-3 .vbd-spot { left: 9.8%; top: 48.6%; width: 80.4%; height: 9.3%; }
.vb-demo[data-demo=ai].ph-4 .vbd-spot { left: 9.8%; top: 57%; width: 80.4%; height: 7.1%; }
.vb-demo[data-demo=ai].ph-5 .vbd-spot { opacity: 0; } /* spotlight off; frame 2 (Set 2 card) crossfades in */
/* ai captions: c1 → c2 at WHY (ph-3) → c3 when the Set-2 card lands (ph-5) */
.vb-demo[data-demo=ai].ph-3 .vbd-cap .c1 { opacity: 0; }
.vb-demo[data-demo=ai].ph-3 .vbd-cap .c2 { opacity: 1; }
.vb-demo[data-demo=ai].ph-5 .vbd-cap .c2 { opacity: 0; }
.vb-demo[data-demo=ai].ph-5 .vbd-cap .c3 { opacity: 1; }

/* ═══ Progress: pure keyframe crossfades (Strength → per-exercise trend → Volume → Coach) ═══ */
/* c1 on frame 0 (Strength tab overview) → c2 on frame 1 (trend chart) → c3 on frame 2 (Volume) → c4 on frame 3 (Coach) */
.vb-demo[data-demo=progress].ph-1 .vbd-cap .c1 { opacity: 0; }
.vb-demo[data-demo=progress].ph-1 .vbd-cap .c2 { opacity: 1; }
.vb-demo[data-demo=progress].ph-2 .vbd-cap .c2 { opacity: 0; }
.vb-demo[data-demo=progress].ph-2 .vbd-cap .c3 { opacity: 1; }
.vb-demo[data-demo=progress].ph-3 .vbd-cap .c3 { opacity: 0; }
.vb-demo[data-demo=progress].ph-3 .vbd-cap .c4 { opacity: 1; }

/* ═══ Social: heart pop over the real ❤ at the moment the like-count frame
       swaps (1 → 2), then the groups view closes the loop ═══ */
.vbd-pop {
    position: absolute; z-index: 3; left: 15.4%; top: 40.5%;
    width: calc(36 * var(--u)); height: calc(36 * var(--u));
    margin: calc(-18 * var(--u)) 0 0 calc(-18 * var(--u));
    color: #e11d48; opacity: 0;
}
.vbd-pop svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(225, 29, 72, .45)); }
.vb-demo[data-demo=social].ph-1 .vbd-pop { animation: vbdPop 1.1s cubic-bezier(.34, 1.56, .64, 1) both; }
.vb-demo[data-demo=social].ph-2 .vbd-pop { animation: none; opacity: 0; }
@keyframes vbdPop {
    0% { opacity: 0; transform: scale(.35); }
    28% { opacity: 1; transform: scale(1.3); }
    55% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.05); }
}
/* social captions: c1 → c2 when the like lands (ph-1) → c3 on the groups frame (ph-2) */
.vb-demo[data-demo=social].ph-1 .vbd-cap .c1 { opacity: 0; }
.vb-demo[data-demo=social].ph-1 .vbd-cap .c2 { opacity: 1; }
.vb-demo[data-demo=social].ph-2 .vbd-cap .c2 { opacity: 0; }
.vb-demo[data-demo=social].ph-2 .vbd-cap .c3 { opacity: 1; }

/* ═══ Program builder: ring walks from "Lead me" button → notes textarea → builder tab ═══ */
.vbd-ring {
    /* Default position for program demo baseline: the "Lead me" button */
}
/* ph-1: "Lead me through it" button */
.vb-demo[data-demo=program].playing .vbd-ring { opacity: 1; left: 6.15%; top: 35.67%; width: 87.69%; height: 12.05%; border-radius: calc(14 * var(--u)); }
/* ph-2: notes textarea (request typed) */
.vb-demo[data-demo=program].ph-2 .vbd-ring { left: 4.62%; top: 19.91%; width: 90.77%; height: 13.03%; border-radius: calc(12 * var(--u)); border-color: #6366f1; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(99, 102, 241, .15), 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(99, 102, 241, .22); }
/* ph-3: generating screen — ring fades off */
.vb-demo[data-demo=program].ph-3 .vbd-ring { opacity: 0; }
/* ph-4: builder sheet — ring on Push Day tab */
.vb-demo[data-demo=program].ph-4 .vbd-ring { opacity: 1; left: 4.1%; top: 11.49%; width: 23.98%; height: 3.79%; border-radius: 999px; border-color: #2F6FD0; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(47, 111, 208, .16), 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(47, 111, 208, .22); }
/* program captions: c1 → c2 when notes typed (ph-2) → c3 on builder sheet (ph-4) */
.vb-demo[data-demo=program].ph-2 .vbd-cap .c1 { opacity: 0; }
.vb-demo[data-demo=program].ph-2 .vbd-cap .c2 { opacity: 1; }
.vb-demo[data-demo=program].ph-3 .vbd-cap .c2 { opacity: 0; }
.vb-demo[data-demo=program].ph-4 .vbd-cap .c2 { opacity: 0; }
.vb-demo[data-demo=program].ph-4 .vbd-cap .c3 { opacity: 1; }