/* Link Bank SVG stories. The shared rule-vis observer pauses offscreen motion.
   Tabler Filled glyphs keep a uniform scale; only plain carriers may reshape. */
.lb-motion { --lb-cycle: 6s; height: 184px; flex: none; }
.lb-motion svg * { vector-effect: non-scaling-stroke; }
.lb-motion > svg { display: block; width: 100%; height: 100%; max-width: 420px; margin-inline: auto; overflow: visible; }
.lbv-paper { fill: var(--color-linkbank-art-paper); stroke: var(--color-linkbank-art-line); stroke-opacity: .45; stroke-width: 1; filter: drop-shadow(0 3px 5px var(--color-linkbank-art-shadow)); }
.lbv-paper-flat { fill: var(--color-linkbank-art-paper); }
.lbv-soft { fill: var(--color-linkbank-art-soft); }
.lbv-tint { fill: color-mix(in srgb, var(--color-linkbank-accent) 13%, var(--color-linkbank-art-paper)); }
.lbv-line { fill: var(--color-linkbank-art-line); }
.lbv-accent { fill: var(--color-linkbank-accent); }
.lbv-on-accent { fill: var(--color-linkbank-on-accent); }
.lbv-ink-fill { fill: var(--color-linkbank-art-muted); }
.lbv-phone { fill: var(--color-linkbank-art-soft); stroke: var(--color-linkbank-art-line); stroke-opacity: .5; stroke-width: 1; filter: drop-shadow(0 4px 7px var(--color-linkbank-art-shadow)); }
.lbv-icon { fill: currentColor; stroke: none; }
.lbv-blue { color: var(--color-linkbank-accent); }
.lbv-ink { color: var(--color-linkbank-art-muted); }
.lbv-white { color: var(--color-linkbank-on-accent); }

/* Choreography, same model as the storage case: one clear action per scene,
   a short move that starts fast, a long hold to read the result, an accent on
   landing, then a fade instead of rewinding. 1% of the cycle = 60ms.
   Moves: in-out cubic. Arrivals and pops: out-quint. Never ease-in. */
.lbv-anim { animation-duration: var(--lb-cycle); animation-iteration-count: infinite; animation-fill-mode: both; animation-play-state: paused; animation-timing-function: cubic-bezier(.65,0,.35,1); transform-origin: center; transform-box: fill-box; }
.lb-motion.is-playing .lbv-anim { animation-play-state: running; }
/* The phone itself stays still: no wobble, no sliding. */
.lbv-phone-impact, .lbv-jobs-impact { animation-name: none; }

/* Interview: the quote is marked in the transcript, then carried into the note. */
.lbv-excerpt { animation-name: lbv-excerpt; transform-origin: left center; }
@keyframes lbv-excerpt {
  0%, 4% { opacity: 0; transform: scaleX(.2); animation-timing-function: cubic-bezier(.23,1,.32,1); }
  14%, 20% { opacity: 1; transform: none; }
  36% { opacity: 1; transform: translate(154px,-2px) scale(.6); animation-timing-function: cubic-bezier(.23,1,.32,1); }
  42%, 84% { opacity: 1; transform: translate(154px,-2px) scale(.57); }
  92%, 100% { opacity: 0; transform: translate(154px,-2px) scale(.57); }
}

/* After the quote lands, the note fills in: two lines written right after it. */
.lbv-note-line-0, .lbv-note-line-1 { transform-origin: left center; animation-timing-function: cubic-bezier(.23,1,.32,1); }
.lbv-note-line-0 { animation-name: lbv-note-line-0; }
.lbv-note-line-1 { animation-name: lbv-note-line-1; }
@keyframes lbv-note-line-0 { 0%, 30% { opacity: 0; transform: translateY(3px) scaleX(0); } 44%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes lbv-note-line-1 { 0%, 34% { opacity: 0; transform: translateY(3px) scaleX(0); } 48%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }

/* Simplicity: three bureaucratic steps collapse into one button while the
   phone is already gliding to the centre. Nothing waits for anything: each
   step aims where the phone will be when it lands (phone progress 0.71, 0.90,
   0.98 at the three arrivals). */
.lbv-step-0 { animation-name: lbv-step-0; }
.lbv-step-1 { animation-name: lbv-step-1; }
.lbv-step-2 { animation-name: lbv-step-2; }
@keyframes lbv-step-0 { 0%, 10% { opacity: 1; transform: none; } 22% { opacity: 1; } 26%, 84% { opacity: 0; transform: translate(101.7px,82.5px) scale(.3); } 85% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.23,1,.32,1); } 93%, 100% { opacity: 1; transform: none; } }
@keyframes lbv-step-1 { 0%, 13% { opacity: 1; transform: none; } 25% { opacity: 1; } 29%, 84% { opacity: 0; transform: translate(87.8px,37.5px) scale(.3); } 87% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.23,1,.32,1); } 95%, 100% { opacity: 1; transform: none; } }
@keyframes lbv-step-2 { 0%, 16% { opacity: 1; transform: none; } 28% { opacity: 1; } 32%, 84% { opacity: 0; transform: translate(81.9px,-7.5px) scale(.3); } 89% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.23,1,.32,1); } 97%, 100% { opacity: 1; transform: none; } }
.lbv-phone-set { animation-name: lbv-phone-set; }
@keyframes lbv-phone-set { 0%, 12% { transform: none; } 36%, 80% { transform: translateX(-73.5px); } 96%, 100% { transform: none; } }
.lbv-one-action { animation-name: lbv-absorb; }
@keyframes lbv-absorb { 0%, 31% { transform: none; } 34% { transform: scale(1.07); animation-timing-function: cubic-bezier(.23,1,.32,1); } 42%, 100% { transform: none; } }
.lbv-simple-check { animation-name: lbv-pop; }
@keyframes lbv-pop {
  0%, 34% { opacity: 0; transform: scale(.6); animation-timing-function: cubic-bezier(.23,1,.32,1); }
  41% { opacity: 1; transform: scale(1.08); }
  46%, 76% { opacity: 1; transform: none; }
  82%, 100% { opacity: 0; transform: none; }
}

/* Cashback: the reward scans the purchases with short touches, finds no
   clear match and drifts back. Dots light up as it arrives, not after. */
.lbv-reward { animation-name: lbv-reward; }
@keyframes lbv-reward {
  0%, 4% { transform: none; }
  14%, 17% { transform: translate(-33px,-11px) scale(.78); }
  26%, 29% { transform: translate(-33px,14px) scale(.78); }
  38%, 42% { transform: translate(-33px,39px) scale(.78); }
  45% { transform: translate(-33px,39px) scale(.78) rotate(-7deg); }
  48% { transform: translate(-33px,39px) scale(.78) rotate(6deg); }
  51% { transform: translate(-33px,39px) scale(.78) rotate(0deg); }
  72%, 100% { transform: none; }
}
.lbv-match-0, .lbv-match-1, .lbv-match-2 { animation-timing-function: cubic-bezier(.23,1,.32,1); }
.lbv-match-0 { animation-name: lbv-match-0; }
.lbv-match-1 { animation-name: lbv-match-1; }
.lbv-match-2 { animation-name: lbv-match-2; }
@keyframes lbv-match-0 { 0%, 11% { opacity: .3; transform: none; } 14% { opacity: 1; transform: scale(1.5); } 20% { opacity: 1; transform: none; } 27%, 100% { opacity: .3; transform: none; } }
@keyframes lbv-match-1 { 0%, 23% { opacity: .3; transform: none; } 26% { opacity: 1; transform: scale(1.5); } 32% { opacity: 1; transform: none; } 39%, 100% { opacity: .3; transform: none; } }
@keyframes lbv-match-2 { 0%, 35% { opacity: .3; transform: none; } 38% { opacity: 1; transform: scale(1.5); } 46% { opacity: 1; transform: none; } 56%, 100% { opacity: .3; transform: none; } }

/* Support: the request is passed from one operator to the next while the
   player waits. Each operator leans in just before the request arrives and
   lets go as it leaves; the clock ticks at every handoff. */
.lbv-ticket { animation-name: lbv-ticket; }
@keyframes lbv-ticket {
  0%, 6% { opacity: 1; transform: none; }
  18%, 22% { opacity: 1; transform: translate(124.5px,-39.5px) scale(.8); }
  32%, 36% { opacity: 1; transform: translate(124.5px,6.5px) scale(.8); }
  46%, 64% { opacity: 1; transform: translate(124.5px,52.5px) scale(.8); }
  72% { opacity: 0; transform: translate(124.5px,52.5px) scale(.8); }
  73% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.23,1,.32,1); }
  83%, 100% { opacity: 1; transform: none; }
}
.lbv-desk-0, .lbv-desk-1, .lbv-desk-2 { animation-timing-function: cubic-bezier(.23,1,.32,1); }
.lbv-desk-0 { animation-name: lbv-desk-0; }
.lbv-desk-1 { animation-name: lbv-desk-1; }
.lbv-desk-2 { animation-name: lbv-desk-2; }
@keyframes lbv-desk-0 { 0%, 12% { transform: none; } 17%, 23% { transform: translateX(-4px); } 30%, 100% { transform: none; } }
@keyframes lbv-desk-1 { 0%, 26% { transform: none; } 31%, 37% { transform: translateX(-4px); } 44%, 100% { transform: none; } }
@keyframes lbv-desk-2 { 0%, 40% { transform: none; } 45%, 64% { transform: translateX(-4px); } 74%, 100% { transform: none; } }
.lbv-wait { animation-name: lbv-wait; animation-timing-function: cubic-bezier(.23,1,.32,1); }
@keyframes lbv-wait { 0%, 22% { transform: none; } 25% { transform: scale(1.12); } 30%, 36% { transform: none; } 39% { transform: scale(1.12); } 44%, 100% { transform: none; } }

/* Terms: the top sheet lifts and reveals the fee; the one long reading pause. */
.lbv-contract-cover { animation-name: lbv-contract-cover; }
@keyframes lbv-contract-cover {
  0%, 8% { transform: none; }
  11% { transform: translateY(2px); animation-timing-function: cubic-bezier(.23,1,.32,1); }
  24%, 74% { transform: translate(-7px,-34px) rotate(-3deg); }
  86%, 100% { transform: none; }
}

/* Personas: each role gets its own priority, one after another. */
.lbv-priority-0, .lbv-priority-1, .lbv-priority-2, .lbv-priority-3, .lbv-priority-4 { transform-origin: left center; animation-timing-function: cubic-bezier(.23,1,.32,1); }
.lbv-person-role-0, .lbv-person-role-1, .lbv-person-role-2, .lbv-person-role-3, .lbv-person-role-4 { animation-timing-function: cubic-bezier(.23,1,.32,1); }
.lbv-priority-0 { animation-name: lbv-priority-0; } .lbv-person-role-0 { animation-name: lbv-role-0; }
.lbv-priority-1 { animation-name: lbv-priority-1; } .lbv-person-role-1 { animation-name: lbv-role-1; }
.lbv-priority-2 { animation-name: lbv-priority-2; } .lbv-person-role-2 { animation-name: lbv-role-2; }
.lbv-priority-3 { animation-name: lbv-priority-3; } .lbv-person-role-3 { animation-name: lbv-role-3; }
.lbv-priority-4 { animation-name: lbv-priority-4; } .lbv-person-role-4 { animation-name: lbv-role-4; }
@keyframes lbv-priority-0 { 0%, 8% { transform: scaleX(0); } 16%, 84% { transform: none; opacity: 1; } 92%, 100% { transform: none; opacity: 0; } }
@keyframes lbv-priority-1 { 0%, 14% { transform: scaleX(0); } 22%, 84% { transform: none; opacity: 1; } 92%, 100% { transform: none; opacity: 0; } }
@keyframes lbv-priority-2 { 0%, 20% { transform: scaleX(0); } 28%, 84% { transform: none; opacity: 1; } 92%, 100% { transform: none; opacity: 0; } }
@keyframes lbv-priority-3 { 0%, 26% { transform: scaleX(0); } 34%, 84% { transform: none; opacity: 1; } 92%, 100% { transform: none; opacity: 0; } }
@keyframes lbv-priority-4 { 0%, 32% { transform: scaleX(0); } 40%, 84% { transform: none; opacity: 1; } 92%, 100% { transform: none; opacity: 0; } }
@keyframes lbv-role-0 { 0%, 6% { transform: none; } 10% { transform: translateY(-4px); } 18%, 100% { transform: none; } }
@keyframes lbv-role-1 { 0%, 12% { transform: none; } 16% { transform: translateY(-4px); } 24%, 100% { transform: none; } }
@keyframes lbv-role-2 { 0%, 18% { transform: none; } 22% { transform: translateY(-4px); } 30%, 100% { transform: none; } }
@keyframes lbv-role-3 { 0%, 24% { transform: none; } 28% { transform: translateY(-4px); } 36%, 100% { transform: none; } }
@keyframes lbv-role-4 { 0%, 30% { transform: none; } 34% { transform: translateY(-4px); } 42%, 100% { transform: none; } }

/* Jobs: each everyday task lands in the app as its own row. */
.lbv-task-0 { animation-name: lbv-task-0; }
.lbv-task-1 { animation-name: lbv-task-1; }
.lbv-task-2 { animation-name: lbv-task-2; }
.lbv-task-3 { animation-name: lbv-task-3; }
@keyframes lbv-task-0 { 0%, 8% { opacity: 1; transform: none; } 18% { opacity: 1; } 21%, 88% { opacity: 0; transform: translate(89.5px,17px) scale(.35); } 89% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.23,1,.32,1); } 97%, 100% { opacity: 1; transform: none; } }
@keyframes lbv-task-1 { 0%, 14% { opacity: 1; transform: none; } 24% { opacity: 1; } 27%, 88% { opacity: 0; transform: translate(90.5px,-33px) scale(.35); } 90% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.23,1,.32,1); } 98%, 100% { opacity: 1; transform: none; } }
@keyframes lbv-task-2 { 0%, 20% { opacity: 1; transform: none; } 30% { opacity: 1; } 33%, 88% { opacity: 0; transform: translate(-128.5px,53px) scale(.35); } 91% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.23,1,.32,1); } 99%, 100% { opacity: 1; transform: none; } }
@keyframes lbv-task-3 { 0%, 26% { opacity: 1; transform: none; } 36% { opacity: 1; } 39%, 88% { opacity: 0; transform: translate(-129.5px,3px) scale(.35); } 89% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.23,1,.32,1); } 97%, 100% { opacity: 1; transform: none; } }
.lbv-task-row-0, .lbv-task-row-1, .lbv-task-row-2, .lbv-task-row-3 { transform-origin: left center; animation-timing-function: cubic-bezier(.23,1,.32,1); }
.lbv-task-row-0 { animation-name: lbv-row-0; }
.lbv-task-row-1 { animation-name: lbv-row-1; }
.lbv-task-row-2 { animation-name: lbv-row-2; }
.lbv-task-row-3 { animation-name: lbv-row-3; }
@keyframes lbv-row-0 { 0%, 18% { opacity: 0; transform: scaleX(.4); } 25%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes lbv-row-1 { 0%, 24% { opacity: 0; transform: scaleX(.4); } 31%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes lbv-row-2 { 0%, 30% { opacity: 0; transform: scaleX(.4); } 37%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }
@keyframes lbv-row-3 { 0%, 36% { opacity: 0; transform: scaleX(.4); } 43%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }

/* Result: shared-element transition. The central finding grows into the
   reworked home screen (crossfade while both scale to the same box: card 54x73
   -> screen 74x97), the side findings follow a beat later and tuck behind it,
   peeking out as the layers the screen is built from. At the end the screen
   folds back into the card and the layers slide out. */
.lbv-evidence-1 { animation-name: lbv-evidence-1; }
@keyframes lbv-evidence-1 {
  0%, 8% { opacity: 1; transform: none; }
  16% { opacity: 1; }
  26%, 78% { opacity: 0; transform: translateY(-4px) scale(1.37,1.33); }
  90% { opacity: 1; }
  94%, 100% { opacity: 1; transform: none; }
}
.lbv-resolution { animation-name: lbv-resolution; }
@keyframes lbv-resolution {
  0%, 8% { opacity: 0; transform: translateY(4px) scale(.73,.75); }
  20% { opacity: 1; }
  30%, 72% { opacity: 1; transform: none; }
  86% { opacity: 0; }
  92%, 100% { opacity: 0; transform: translateY(4px) scale(.73,.75); }
}
.lbv-evidence-0 { animation-name: lbv-evidence-0; }
.lbv-evidence-2 { animation-name: lbv-evidence-2; }
@keyframes lbv-evidence-0 { 0%, 12% { transform: none; } 34%, 74% { transform: translate(50px,-8px) rotate(4deg) scale(.92); } 96%, 100% { transform: none; } }
@keyframes lbv-evidence-2 { 0%, 14% { transform: none; } 36%, 76% { transform: translate(-50px,-8px) rotate(-4deg) scale(.92); } 98%, 100% { transform: none; } }
.lbv-resolution-mark { animation-name: lbv-pop-late; animation-timing-function: cubic-bezier(.23,1,.32,1); }
@keyframes lbv-pop-late { 0%, 30% { opacity: 0; transform: scale(.6); } 37% { opacity: 1; transform: scale(1.1); } 42%, 66% { opacity: 1; transform: none; } 72%, 100% { opacity: 0; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .lb-motion .lbv-anim { animation: none !important; }
  .lbv-excerpt { transform: translate(154px,-2px) scale(.57); }
  .lbv-contract-cover { transform: translate(-7px,-34px) rotate(-3deg); }
  .lbv-resolution, .lbv-resolution-mark, .lbv-simple-check { opacity: 1; }
  .lbv-evidence-1 { opacity: 0; }
  .lbv-evidence-0 { transform: translate(50px,-8px) rotate(4deg) scale(.92); }
  .lbv-evidence-2 { transform: translate(-50px,-8px) rotate(-4deg) scale(.92); }
}