/* The Vision Tour on /vision (Jordan, 2026-10-09; replaces the Vision Loop film).
   The map is drawn on one 1600 by 1210 stage that vision-tour.js scales to the
   frame's width (--s). The cover, the invitation, the slogan and the intro sit
   over the frame at real size, sized in container units so they match the
   design at full width and stay readable on a phone. The stage is a painting
   on paper, so it keeps its own light colours in the dark theme. */

.vt {
  --paper: #faf8f5; --ink: #22364e; --body: #33465d; --muted: #62748c; --rust: #a9552f; --line: #e6e1d9;
  container-type: inline-size;
  margin-top: 1.5rem;
  color: var(--ink);
  font-family: var(--glg-font-body);
}
.vt-frame {
  position: relative; overflow: hidden;
  aspect-ratio: 1600 / 1210;
  border-radius: var(--glg-radius-card);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
.vt-stage {
  position: absolute; left: 0; top: 0; width: 1600px; height: 1210px;
  transform: scale(var(--s, 0.5)); transform-origin: 0 0;
}
.vt-stage img { max-width: none; }

/* ── the scenes ── */
.vt-town-title {
  position: absolute; left: 300px; top: 22px; width: 1000px; text-align: center;
  font: 700 50px/1.1 var(--glg-font-display); transition: opacity 0.4s;
}
.vt-sky {
  position: absolute; left: 0; top: 0; width: 1600px; height: 550px; opacity: 0;
  transition: height 1s ease-in-out, opacity 1.2s ease-in-out;
  background:
    radial-gradient(ellipse 22% 9% at 18% 22%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 26% 8% at 62% 14%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 18% 7% at 86% 30%, rgba(255,255,255,.65), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #cfe0ec 0%, #dde9f0 38%, #ebf1f1 70%, rgba(250,248,245,0) 100%);
}
.vt-glow {
  position: absolute; left: 0; top: 492px; width: 1600px; height: 70px; transition: top 1s ease-in-out;
  background: radial-gradient(ellipse 52% 50% at 50% 50%, rgba(157,187,151,.45), rgba(157,187,151,0) 72%);
}
.vt-ground {
  position: absolute; left: 60px; top: 537px; width: 1480px; height: 0; transition: top 1s ease-in-out;
  border-top: 2px solid rgba(79,109,76,.28); border-radius: 2px;
}
.vt-scene, .vt-tree {
  position: absolute; transition: opacity 0.4s, left 1s ease-in-out, top 1s ease-in-out, width 1s ease-in-out, height 1s ease-in-out;
}
.vt-scene .vt-paint { display: block; width: 100%; height: 100%; }
/* A stage change crossfades: the old painting fades out on top while the new one fades in beneath it */
.vt-scene .vt-paint.vt-old { position: absolute; left: 0; top: 0; pointer-events: none; animation: vt-xout 1.4s ease-in-out both; }
.vt-scene .vt-paint.vt-new { animation: vt-xin 1.4s ease-in-out both; }
@keyframes vt-xout { to { opacity: 0; } }
@keyframes vt-xin { from { opacity: 0; } }
.vt-town { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 84%, transparent 100%); }
.vt-town .vt-paint, .vt-street {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.vt-street { position: absolute; left: 0; top: 0; width: 100%; height: 100%; animation: vt-sweep 2s ease-in-out both; }
.vt-gov .vt-paint { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 84%, transparent 100%); }
.vt-places .vt-paint { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 100%); }
.vt-meadow { position: absolute; filter: saturate(.62); transition: left 1s ease-in-out, top 1s ease-in-out, width 1s ease-in-out, height 1s ease-in-out; }
.vt-meadow > img { position: absolute; transform-origin: 50% 100%; animation: vt-sprout 1.3s cubic-bezier(.25,.8,.3,1) both; }
.vt-meadow > .vt-lawn { left: 0; top: 0; width: 100%; height: 100%; animation: vt-sweep 2s ease-in-out both; }
.vt-meadow[hidden], .vt-street[hidden] { display: none; }

/* ── the loop ── */
.vt-loop { position: absolute; left: 0; top: 0; width: 1600px; height: 1210px; transform-origin: 800px 715px; transition: transform 1s ease-in-out; }
.vt-arcs, .vt-fills { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; overflow: visible; }
.vt-arcs path { fill: none; stroke: #d3d9e0; stroke-width: 4; stroke-linecap: round; }
.vt-fills path { fill: none; stroke: var(--rust); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.vt-dot {
  position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; opacity: 0;
  background: var(--rust); box-shadow: 0 0 0 9px rgba(169,85,47,.22);
  offset-rotate: 0deg; offset-distance: 0%;
}
.vt-conn { position: absolute; width: 0; border-left: 2px solid var(--rust); opacity: .7; }
.vt-conn[hidden] { display: none; }
.vt-badge {
  position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; box-sizing: border-box;
  border: 3px solid #c9d1db; background: #fff; color: #8a97a8;
  display: flex; align-items: center; justify-content: center;
  font: 700 21px/1 var(--glg-font-display);
}
.vt-badge.live { animation: vt-pulse 1.6s ease-in-out infinite; }
.vt-node {
  position: absolute; top: 640px; width: 260px; height: 150px; box-sizing: border-box; border-radius: 26px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font: 600 38px/1.1 var(--glg-font-display); color: var(--ink);
  transition: filter .4s, box-shadow .45s;
}
.vt-node.lit { box-shadow: 0 0 0 8px rgba(228,140,101,.30), 0 0 46px 12px rgba(228,140,101,.55); }
.vt-node-gov { left: 70px; border: 3px solid var(--rust); background: #f2b590; }
.vt-node-glg { left: 470px; background: #2b4b71; }
.vt-node-glg img { width: 210px; height: 75px; }
.vt-node-foundation { left: 870px; border: 3px solid #3a6891; background: #a8c6d8; }
.vt-node-foundation img { width: 204px; height: 98px; }
.vt-node-places { left: 1270px; border: 3px solid #4f6d4c; background: #9dbb97; }

/* ── hearts, peace hands and smileys ── */
.vt-balloons { position: absolute; width: 130px; height: 90px; }
.vt-balloons[hidden] { display: none; }
.vt-balloons img { position: absolute; width: 46px; height: 46px; animation: vt-bob 2.2s ease-in-out infinite; }
.vt-hearts { left: 136px; top: 150px; }
.vt-peace { left: 1336px; top: 140px; }
.vt-balloons.hold-r { animation: vt-hold-r 3.2s cubic-bezier(.3,.6,.25,1) forwards; }
.vt-balloons.hold-l { animation: vt-hold-l 3.2s cubic-bezier(.3,.6,.25,1) forwards; }
.vt-balloons.merge-r { animation: vt-merge-r 2.2s ease-in-out forwards; }
.vt-balloons.merge-l { animation: vt-merge-l 2.2s ease-in-out forwards; }
.vt-smileys { position: absolute; left: 0; top: 0; }
.vt-smiley { position: absolute; width: 0; height: 0; transition: left 1s ease-in-out, top 1s ease-in-out; }
.vt-smiley > span { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; }
.vt-smiley img { display: block; animation: vt-wind 5s ease-in-out infinite; }
.vt-smiley > .fly { animation: vt-smile-fly 4.1s cubic-bezier(.45,0,.35,1) 1.3s both; }
.vt-smiley > .settled { transform: translate(var(--dx), var(--dy)); }
.vt-smiley > .extra { animation: vt-emerge 3.2s cubic-bezier(.25,.6,.3,1) both; }

/* ── the cards on the stage ── */
.vt-card {
  position: absolute; box-sizing: border-box; background: #fff; border: 1px solid var(--line);
  border-radius: 18px; box-shadow: 0 2px 4px rgba(34,54,78,.06), 0 18px 40px -12px rgba(34,54,78,.28);
  animation: vt-card-in .45s ease-out both;
}
.vt-card[hidden] { display: none; }
.vt-step-card { top: 915px; width: 640px; padding: 24px 28px 26px; }
.vt-step-card[data-card="1"] { left: 440px; width: 720px; }
.vt-step-card[data-card="2"] { left: 50px; width: 720px; }
.vt-step-card[data-card="3"] { left: 80px; }
.vt-step-card[data-card="4"] { left: 440px; width: 720px; }
.vt-step-card[data-card="5"], .vt-step-card[data-card="6"] { left: 880px; }
.vt-route { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font: 600 15px/1.2 var(--glg-font-display); letter-spacing: .08em; text-transform: uppercase; color: #6b5a50; }
.vt-n { width: 34px; height: 34px; border-radius: 50%; background: var(--rust); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; font: 700 18px/1 var(--glg-font-display); letter-spacing: 0; }
.vt-step-card h3 { margin: 0 0 8px; font: 700 30px/1.15 var(--glg-font-display); color: var(--ink); }
.vt-step-card p:last-child { margin: 0; font-size: 20px; line-height: 1.5; color: var(--body); }
.vt-summary[hidden] { display: none; }
.vt-sum { top: 100px; width: 500px; height: 186px; padding: 20px 24px 22px; border-radius: 16px; box-shadow: 0 16px 34px -14px rgba(34,54,78,.3); }
.vt-sum-0 { left: 25px; border-top: 6px solid #f2b590; }
.vt-sum-1 { left: 550px; border-top: 6px solid #f6cf74; animation-delay: .25s; }
.vt-sum-2 { left: 1075px; border-top: 6px solid #9dbb97; animation-delay: .5s; }
.vt-sum-h { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 700 26px/1.2 var(--glg-font-display); color: var(--ink); }
.vt-sum-h img { width: 40px; height: 40px; }
.vt-sum p:last-child { margin: 0; font-size: 20px; line-height: 1.45; color: var(--body); }

/* ── the panels over the frame, at real size (1cqw is 14.4 px at the design's full width) ── */
.vt-over { position: absolute; inset: 0; }
.vt-over[hidden] { display: none; }
.vt-veil { position: absolute; inset: 0; background: rgba(250,248,245,.55); }
.vt-invite .vt-veil { background: rgba(250,248,245,.22); }
.vt-panel {
  position: absolute; box-sizing: border-box; background: #fff; color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(34,54,78,.06), 0 30px 70px -22px rgba(34,54,78,.38);
  animation: vt-card-in .45s ease-out both;
}
.vt-cover-card { left: 12.5%; top: 24.8%; width: 75%; padding: 4cqw 5.6cqw 4.4cqw; border-radius: 1.75cqw; text-align: center; }
.vt-invite-card {
  left: 9.4%; top: 12.4%; width: 81.2%; height: 74.4%; padding: 5.2cqw 6.9cqw; border-radius: 1.9cqw;
  background: rgba(255,255,255,.95); border-color: rgba(230,225,217,.9);
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 1.9cqw;
}
.vt-eyebrow { margin: 0; font: 600 max(12px, 1.25cqw)/1.3 var(--glg-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--rust); }
.vt-cover-card .vt-eyebrow { margin-bottom: .9cqw; }
.vt-h { margin: 0 0 1.1cqw; font: 700 max(24px, 3.75cqw)/1.06 var(--glg-font-display); letter-spacing: -.02em; color: var(--ink); }
.vt-h-big { margin: 0; font-size: max(28px, 4.5cqw); line-height: 1.04; }
.vt-body { margin: 0 auto 2.25cqw; max-width: 56cqw; font-size: max(15px, 1.625cqw); line-height: 1.5; color: var(--body); }
.vt-invite .vt-body { margin: 0; font-size: max(15px, 1.75cqw); }
.vt-actions { display: flex; flex-wrap: wrap; gap: 1.1cqw; justify-content: center; }
.vt-invite .vt-actions { margin-top: .9cqw; }
.vt-logos { display: flex; align-items: center; justify-content: center; gap: 1.6cqw; font: 700 max(20px, 2.75cqw)/1 var(--glg-font-display); color: #e48c65; }
.vt-logos > img, .vt-bpf-tile { width: max(110px, 16.25cqw); height: auto; aspect-ratio: 2 / 1; border-radius: 1.4cqw; }
.vt-bpf-tile { display: flex; align-items: center; justify-content: center; background: #c7dcff; }
.vt-bpf-tile img { width: 80%; height: auto; }

.vt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: max(44px, 4.6cqw); padding: 0 max(16px, 2.4cqw); border-radius: 1cqw;
  border: 2px solid var(--ink); background: #fff; color: var(--ink);
  font: 600 max(15px, 1.6cqw)/1.1 var(--glg-font-display); text-decoration: none; cursor: pointer;
}
.vt-btn.vt-primary { border-color: var(--rust); background: var(--rust); color: #fff; font-weight: 700; }
.vt-btn.vt-primary:hover { background: #914829; border-color: #914829; }
.vt-btn.vt-link { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 5px; }
.vt-btn:focus-visible, .vt-heart:focus-visible, .vt-jump:focus-visible { outline: 3px solid #2b4b71; outline-offset: 2px; }
.vt-btn[disabled] { opacity: .4; cursor: default; }

/* the slogan, between the summary and the invitation */
.vt-slogan { background: #2b4b71; color: #fff; z-index: 2; animation: vt-fade-in .6s ease-out both; text-align: center; }
.vt-slogan-logo { position: absolute; left: 50%; top: 9.9%; width: 19.9cqw; height: auto; margin-left: -9.95cqw; }
.vt-slogan-lines { position: absolute; left: 0; right: 0; top: 38%; margin: 0; font: 700 max(26px, 5.8cqw)/1.12 var(--glg-font-display); letter-spacing: -.02em; }
.vt-slogan-lines span { display: block; }
.vt-eq { position: absolute; left: 0; right: 0; top: 66.6%; margin: 0; display: flex; justify-content: center; align-items: center; gap: 2.4cqw; font: 700 max(24px, 5cqw)/1 var(--glg-font-display); color: #f2b590; }
.vt-eq img { width: 7.8cqw; height: 7.8cqw; }
.vt-eq .vt-big { width: 9.2cqw; height: 9.2cqw; }
.vt-rise { animation: vt-rise .7s ease-out both; }
.vt-pop { animation: vt-pop .55s cubic-bezier(.3,.7,.3,1) both; }

/* the intro: the heart that starts it all */
.vt-intro { z-index: 3; background: var(--paper); overflow: hidden; }
.vt-intro.out { animation: vt-intro-out .65s ease-in forwards; }
.vt-intro-art { position: absolute; left: 23.6%; top: 0; width: 76.4%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.vt-intro-fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(250,248,245,1) 0%, rgba(250,248,245,1) 48%, rgba(250,248,245,.85) 60%, rgba(250,248,245,.2) 74%, rgba(250,248,245,0) 84%); }
.vt-intro-copy { position: absolute; left: 7.8%; top: 15.8%; width: 56cqw; display: flex; flex-direction: column; gap: 1.7cqw; }
.vt-intro-copy > * { animation: vt-rise .7s ease-out both; }
.vt-intro-h { margin: 0; font: 700 max(26px, 4.6cqw)/1.04 var(--glg-font-display); letter-spacing: -.02em; white-space: nowrap; color: var(--ink); animation-delay: .08s; }
.vt-intro-copy .vt-body { margin: 0; max-width: 39cqw; font-size: max(15px, 1.6cqw); animation-delay: .16s; }
.vt-intro-go { display: flex; align-items: center; gap: 1.95cqw; margin-top: 2.4cqw; animation-delay: .24s; }
.vt-heart { position: relative; flex: none; width: max(84px, 11.7cqw); aspect-ratio: 168 / 152; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 24px; }
.vt-heart-in { position: absolute; inset: 0; display: block; }
.vt-heart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vt-heart-fill { position: absolute; inset: 0; display: block; clip-path: inset(100% 0 0 0); }
.vt-heart.idle .vt-heart-in { animation: vt-beat 1.6s ease-in-out infinite; }
.vt-heart.fill .vt-heart-fill, .vt-heart.gone .vt-heart-fill { animation: vt-fill-up .8s cubic-bezier(.4,0,.2,1) forwards; }
.vt-heart.gone .vt-heart-in { opacity: 0; transition: opacity .15s; }
.vt-tap { margin: 0 0 .7cqw; font: 600 max(16px, 1.8cqw)/1.25 var(--glg-font-display); color: var(--ink); }
.vt-hint { margin: 0; font-size: max(13px, 1.25cqw); color: var(--muted); }

/* ── the bar under the frame ── */
.vt-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
  margin-top: .75rem; padding: .85rem 1.25rem; border: 1px solid var(--glg-border); border-radius: var(--glg-radius-card);
  background: var(--glg-surface);
}
/* At the end the way to go again lives on the invitation, so the bar steps away (kept in flow, so nothing jumps). */
.vt[data-end] .vt-bar { visibility: hidden; }
.vt-jumps, .vt-nav { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.vt-progress { min-width: 7rem; font: 600 1rem/1.2 var(--glg-font-display); color: var(--glg-muted); }
.vt-jump {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid #c9d1db; background: #fff; color: #62748c;
  font: 700 1rem/1 var(--glg-font-display); cursor: pointer;
}
.vt-jump.seen { border-color: var(--rust); color: var(--rust); }
.vt-jump.here { border-color: var(--rust); background: var(--rust); color: #fff; }
.vt-bar .vt-btn { min-height: 3.25rem; padding: 0 1.5rem; border-radius: .75rem; font-size: 1.1rem; }
.vt-bar .vt-btn:not(.vt-primary) { border-color: var(--glg-ink); background: var(--glg-surface); color: var(--glg-ink); }
.vt-bar .vt-back { border-color: #c9d1db; }
.vt-next { min-width: 9.4rem; }
.vt-now { display: none; }

.vt-steps { margin-top: 1.25rem; }
.vt-steps summary { cursor: pointer; font: 600 1.05rem/1.4 var(--glg-font-display); color: var(--glg-ember); }
.vt-steps ol { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.vt-steps li { display: flex; gap: .85rem; align-items: flex-start; }
.vt-steps .step-n { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--glg-ember); color: var(--glg-on-action); display: inline-flex; align-items: center; justify-content: center; font: 700 .95rem/1 var(--glg-font-display); }
.vt-steps h3 { margin: 0 0 .25rem; font: 700 1.1rem/1.3 var(--glg-font-display); color: var(--glg-ink); }
.vt-steps p { margin: 0; color: var(--glg-body); }

/* ── a phone: the map stays whole; the step's words show below it at reading size ── */
@container (max-width: 760px) {
  .vt-stage .vt-step-card, .vt-stage .vt-summary { display: none; }
  .vt-now:not(:empty) {
    display: block; margin-top: .75rem; padding: 1rem 1.1rem; border: 1px solid var(--glg-border); border-radius: var(--glg-radius-card);
    background: #fff; color: var(--ink);
  }
  .vt-now h3 { margin: .4rem 0 .35rem; font: 700 1.2rem/1.25 var(--glg-font-display); color: var(--ink); }
  .vt-now p { margin: 0; color: var(--body); }
  .vt-now .vt-route { font-size: .8rem; }
  .vt-now .vt-n { width: 1.75rem; height: 1.75rem; font-size: .9rem; }
  .vt-now .vt-sum-h { font-size: 1.05rem; margin-top: .75rem; }
  .vt-now .vt-sum-h img { width: 1.75rem; height: 1.75rem; }
  .vt[data-over] .vt-frame { aspect-ratio: auto; min-height: 34rem; }
  .vt-cover-card, .vt-invite-card { left: 4%; top: 4%; width: 92%; height: auto; max-height: 92%; overflow: auto; padding: 1.25rem; border-radius: 1rem; gap: .75rem; }
  .vt-h { margin-bottom: .6rem; }
  .vt-body, .vt-intro-copy .vt-body { max-width: none; margin-bottom: 1rem; }
  .vt-actions .vt-btn { flex: 1 1 auto; }
  .vt-intro-art { left: 0; width: 100%; opacity: .35; }
  .vt-intro-fade { background: linear-gradient(180deg, rgba(250,248,245,.92), rgba(250,248,245,.75)); }
  .vt-intro-copy { left: 5%; top: 6%; width: 90%; gap: .75rem; }
  .vt-intro-h { white-space: normal; }
  .vt-slogan-logo { top: 7%; width: 7rem; margin-left: -3.5rem; }
  .vt-slogan-lines { top: 33%; }
  .vt-eq { top: 72%; }
  .vt-eq img { width: 3.2rem; height: 3.2rem; }
  .vt-eq .vt-big { width: 3.8rem; height: 3.8rem; }
  .vt-bar { padding: .75rem; }
  .vt-jumps { gap: .35rem; }
  .vt-jump { width: 2.75rem; height: 2.75rem; }
  .vt-progress { flex-basis: 100%; }
}

@keyframes vt-sweep { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vt-sprout { 0% { transform: translateY(18%) scaleY(0); opacity: 0; } 35% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes vt-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(169,85,47,.45); } 50% { box-shadow: 0 0 0 12px rgba(169,85,47,0); } }
@keyframes vt-bob { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-7px) rotate(5deg); } }
@keyframes vt-wind { 0%, 100% { transform: translate(0,0) rotate(-5deg); } 30% { transform: translate(9px,-7px) rotate(4deg); } 65% { transform: translate(-6px,-12px) rotate(-2deg); } }
@keyframes vt-hold-r { 0% { transform: translate(0,24px) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(420px,-60px) scale(1); opacity: 1; } }
@keyframes vt-hold-l { 0% { transform: translate(0,24px) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-420px,-50px) scale(1); opacity: 1; } }
@keyframes vt-merge-r { 0% { transform: translate(420px,-60px) scale(1); opacity: 1; } 55% { transform: translate(600px,-84px) scale(1); opacity: 1; } 68% { transform: translate(600px,-84px) scale(1.12); opacity: 1; } 100% { transform: translate(600px,-84px) scale(.2); opacity: 0; } }
@keyframes vt-merge-l { 0% { transform: translate(-420px,-50px) scale(1); opacity: 1; } 55% { transform: translate(-600px,-74px) scale(1); opacity: 1; } 68% { transform: translate(-600px,-74px) scale(1.12); opacity: 1; } 100% { transform: translate(-600px,-74px) scale(.2); opacity: 0; } }
@keyframes vt-smile-fly { 0% { transform: translate(var(--sx),var(--sy)) scale(0); opacity: 0; } 12% { transform: translate(var(--sx),var(--sy)) scale(1.25); opacity: 1; } 20% { transform: translate(var(--sx),var(--sy)) scale(1); } 100% { transform: translate(var(--dx),var(--dy)) scale(1); opacity: 1; } }
@keyframes vt-emerge { 0% { transform: translate(var(--ex),var(--ey)) scale(.35); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(var(--dx),var(--dy)) scale(1); opacity: 1; } }
@keyframes vt-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes vt-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vt-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes vt-pop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes vt-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes vt-fill-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vt-intro-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.04); } }

@media (prefers-reduced-motion: reduce) {
  .vt *, .vt *::before, .vt *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}