/* Animated visuals lifted from the approved design canvas. */
.vis-scale { container-type: inline-size; width: 100%; overflow: hidden; border-radius: inherit; }
.vis-inner { transform-origin: top left; transform: scale(calc(100cqw / (var(--dw) * 1px))); }
@keyframes bd-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes bd-pop { from { opacity: 0; transform: translateY(36px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes bd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes bd-drift-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(5%, 3%, 0) scale(1.1); } }
@keyframes bd-drift-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-5%, 4%, 0) scale(1.08); } }
@keyframes bd-shot { 0%, 8% { transform: translateY(0); } 46%, 54% { transform: translateY(calc(-100% + var(--frame))); } 92%, 100% { transform: translateY(0); } }
@keyframes bd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bd-words { 0%, 20% { transform: translateY(0); } 25%, 45% { transform: translateY(-1.1em); } 50%, 70% { transform: translateY(-2.2em); } 75%, 95% { transform: translateY(-3.3em); } 100% { transform: translateY(-4.4em); } }
@keyframes bd-ping { 0% { box-shadow: 0 0 0 0 rgba(47,166,106,.55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(47,166,106,0); } }
@keyframes bd-shine { 0%, 55% { left: -60%; } 100% { left: 140%; } }
@keyframes bd-spin { to { transform: rotate(360deg); } }
@keyframes bd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes bd-toast { 0%, 6% { opacity: 0; transform: translateY(14px) scale(.96); } 14%, 72% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes bd-chip { 0%, 24% { background: var(--ink); color: var(--ground); border-color: var(--ink); } 25%, 100% { background: transparent; color: var(--ink); border-color: var(--line); } }
@keyframes bd-typeloop { 0% { width: 0; } 40%, 88% { width: var(--w); } 100% { width: 0; } }
@keyframes bd-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes bd-rank-up { 0%, 40% { transform: translateY(0); } 50%, 88% { transform: translateY(-68px); } 96%, 100% { transform: translateY(0); } }
@keyframes bd-rank-down { 0%, 40% { transform: translateY(0); } 50%, 88% { transform: translateY(34px); } 96%, 100% { transform: translateY(0); } }
@keyframes bd-device { 0%, 22% { width: 196px; border-radius: 8px; } 33%, 55% { width: 118px; border-radius: 10px; } 66%, 88% { width: 64px; border-radius: 12px; } 100% { width: 196px; border-radius: 8px; } }
@keyframes bd-stack { 0%, 5% { opacity: 0; transform: translateY(14px); } 13%, 76% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes bd-save { 0%, 44% { background: var(--ink); } 50%, 86% { background: #2fa66a; } 94%, 100% { background: var(--ink); } }
@keyframes bd-build { 0%, 3% { opacity: 0; transform: translateY(10px); } 12%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes bd-fly { 0%, 20% { opacity: 0; transform: translate(0, 0) scale(.4); } 28% { opacity: 1; transform: translate(0, 0) scale(1); } 60% { opacity: 1; transform: translate(110px, -150px) scale(.9); } 88% { opacity: 1; transform: translate(var(--fx), var(--fy)) scale(.5); } 92%, 100% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.5); } }
@keyframes bd-bump { 0%, 88% { transform: scale(1); } 93% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes bd-count { 0%, 29% { transform: translateY(0); } 29.5%, 62.5% { transform: translateY(-20px); } 63%, 95.5% { transform: translateY(-40px); } 96%, 100% { transform: translateY(0); } }
@keyframes bd-slot { 0%, 32% { background: var(--panel); color: var(--faint); } 36%, 60% { background: var(--ink); color: var(--ground); } 64%, 92% { background: #2fa66a; color: #ffffff; } 96%, 100% { background: var(--panel); color: var(--faint); } }
@keyframes bd-cursor { 0% { opacity: 0; transform: translate(80px, 60px); } 8% { opacity: 1; } 30% { transform: translate(0, 0) scale(1); } 34% { transform: translate(0, 0) scale(.8); } 38% { transform: translate(0, 0) scale(1); } 56% { opacity: 1; } 62%, 100% { opacity: 0; transform: translate(0, 0); } }
@keyframes bd-confirm { 0%, 60% { opacity: 0; transform: translateY(12px) scale(.96); } 66%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes bd-press { 0%, 44% { transform: scale(1); } 47% { transform: scale(.93); } 50%, 100% { transform: scale(1); } }
@keyframes bd-newrow { 0%, 52% { opacity: 0; transform: translateY(-6px); } 58%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes bd-progress { 0% { transform: scaleX(0); opacity: 1; } 85%, 94% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes bd-s1 { 0%, 3% { background: transparent; color: var(--ink); border-color: var(--line); } 4%, 94% { background: var(--ink); color: var(--ground); border-color: var(--ink); } 99%, 100% { background: transparent; color: var(--ink); border-color: var(--line); } }
@keyframes bd-s2 { 0%, 24% { background: transparent; color: var(--ink); border-color: var(--line); } 25%, 94% { background: var(--ink); color: var(--ground); border-color: var(--ink); } 99%, 100% { background: transparent; color: var(--ink); border-color: var(--line); } }
@keyframes bd-s3 { 0%, 46% { background: transparent; color: var(--ink); border-color: var(--line); } 47%, 94% { background: var(--ink); color: var(--ground); border-color: var(--ink); } 99%, 100% { background: transparent; color: var(--ink); border-color: var(--line); } }
@keyframes bd-s4 { 0%, 67% { background: transparent; color: var(--ink); border-color: var(--line); } 68%, 94% { background: var(--ink); color: var(--ground); border-color: var(--ink); } 99%, 100% { background: transparent; color: var(--ink); border-color: var(--line); } }
.bd-rise { animation: bd-rise .9s cubic-bezier(.2,.7,.2,1) both; }
.bd-pop { animation: bd-pop 1.1s cubic-bezier(.2,.7,.2,1) both; }
.bd-float { animation: bd-float 8s ease-in-out infinite; }
.bd-drift-a { animation: bd-drift-a 18s ease-in-out infinite; }
.bd-drift-b { animation: bd-drift-b 22s ease-in-out infinite; }
.bd-shot { animation: bd-shot 26s cubic-bezier(.45,0,.55,1) infinite; }
.bd-marquee { display: flex; width: max-content; animation: bd-marquee 36s linear infinite; }
.bd-rot { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: top; margin-top: -0.05em; margin-bottom: -0.05em; }
.bd-rot-track { display: flex; flex-direction: column; animation: bd-words 11s cubic-bezier(.75,0,.2,1) infinite; }
.bd-rot-track > span { display: block; height: 1.1em; line-height: 1.1em; white-space: nowrap; }
.bd-ping { animation: bd-ping 2.2s ease-out infinite; }
.bd-shine { position: relative; overflow: hidden; }
.bd-shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); animation: bd-shine 4s ease-in-out infinite; pointer-events: none; }
.bd-spin { animation: bd-spin 9s linear infinite; }
.bd-bob { animation: bd-bob 4s ease-in-out infinite; }
.bd-toast { animation: bd-toast 8s ease-in-out infinite; }
.bd-chip { animation: bd-chip 8s steps(1, end) infinite; }
.bd-type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; animation: bd-typeloop 7s steps(18) infinite; }
.bd-caret { display: inline-block; animation: bd-caret 1s steps(1) infinite; }
.bd-rank-up { animation: bd-rank-up 7s cubic-bezier(.6,0,.2,1) infinite; }
.bd-rank-down { animation: bd-rank-down 7s cubic-bezier(.6,0,.2,1) infinite; }
.bd-device { animation: bd-device 9s cubic-bezier(.6,0,.2,1) infinite; }
.bd-stack { animation: bd-stack 6s ease-in-out infinite both; }
.bd-save { animation: bd-save 7s ease-in-out infinite; }
.bd-build { animation: bd-build 7s cubic-bezier(.2,.7,.2,1) infinite both; }
.bd-fly { animation: bd-fly 3s ease-in-out infinite; }
.bd-bump { animation: bd-bump 3s ease-in-out infinite; }
.bd-count { animation: bd-count 9s linear infinite; }
.bd-slot { animation: bd-slot 6s ease-in-out infinite; }
.bd-cursor { animation: bd-cursor 6s cubic-bezier(.5,0,.2,1) infinite; }
.bd-confirm { animation: bd-confirm 6s ease-in-out infinite; }
.bd-press { animation: bd-press 6s ease-in-out infinite; }
.bd-newrow { animation: bd-newrow 6s ease-in-out infinite; }
.bd-progress { transform-origin: left center; animation: bd-progress 10s cubic-bezier(.4,0,.6,1) infinite; }
.bd-s1 { animation: bd-s1 10s linear infinite; }
.bd-s2 { animation: bd-s2 10s linear infinite; }
.bd-s3 { animation: bd-s3 10s linear infinite; }
.bd-s4 { animation: bd-s4 10s linear infinite; }