/* TallyBridge — HeroUI design tokens */
:root {
  --primary: #006FEE;
  --content1: #ffffff;
  --background: #f7f8fa;
  --foreground: #11181C;
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 14px;
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
}
html.dark {
  --content1: #18181b;
  --background: #000000;
  --foreground: #ECEDEE;
}
html, body { background: var(--background); color: var(--foreground); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { min-height: 100dvh; }
* { -webkit-tap-highlight-color: transparent; }
::selection { background: #cce3fd; }

@keyframes tbPop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes tbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tbPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes tbShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.tb-pop { animation: tbPop .22s cubic-bezier(.2,.8,.2,1); }
.tb-fade { animation: tbFade .2s ease; }
.tb-pulse { animation: tbPulse 1.6s ease-in-out infinite; }
.tb-press:active { transform: scale(.97); }
.tb-skel { background: linear-gradient(90deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.09) 37%, rgba(0,0,0,.05) 63%); background-size: 800px 100%; animation: tbShimmer 1.4s infinite linear; border-radius: 10px; }
html.dark .tb-skel { background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.1) 37%, rgba(255,255,255,.05) 63%); background-size: 800px 100%; }
.tb-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.tb-scroll::-webkit-scrollbar-thumb { background: rgba(120,120,130,.3); border-radius: 8px; }
.tb-grad { background: radial-gradient(1200px 400px at 10% -10%, rgba(0,111,238,.12), transparent 60%), radial-gradient(800px 300px at 100% 0%, rgba(120,40,200,.10), transparent 60%); }
pre.tb-code { white-space: pre-wrap; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

/* ---------- premium motion layer ---------- */
@keyframes tbFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tbBlob { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(40px,-30px) scale(1.12); } 66% { transform: translate(-30px,25px) scale(.92); } }
@keyframes tbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes tbSpin { to { transform: rotate(360deg); } }
@keyframes tbRing { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes tbDash { to { stroke-dashoffset: -24; } }
@keyframes tbDraw { from { stroke-dashoffset: var(--len, 1200); } to { stroke-dashoffset: 0; } }
@keyframes tbGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tbGradient { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes tbTicker { 0% { opacity: 0; transform: translateY(10px); } 12%,88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes tbShine { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(220%) skewX(-20deg); } }

.tb-fade-up { animation: tbFadeUp .6s cubic-bezier(.2,.8,.2,1) both; }
.tb-d1 { animation-delay: .06s; } .tb-d2 { animation-delay: .12s; } .tb-d3 { animation-delay: .18s; } .tb-d4 { animation-delay: .24s; }
.tb-d5 { animation-delay: .30s; } .tb-d6 { animation-delay: .36s; } .tb-d7 { animation-delay: .42s; } .tb-d8 { animation-delay: .48s; }
.tb-float { animation: tbFloat 5s ease-in-out infinite; }
.tb-blob { position: absolute; border-radius: 9999px; filter: blur(60px); opacity: .55; animation: tbBlob 18s ease-in-out infinite; pointer-events: none; }
.tb-ring { position: absolute; inset: 0; border-radius: 9999px; border: 2px solid currentColor; animation: tbRing 2s cubic-bezier(.2,.6,.4,1) infinite; }
.tb-flow { stroke-dasharray: 2 10; animation: tbDash .8s linear infinite; }
.tb-draw { stroke-dasharray: var(--len, 1200); animation: tbDraw 1.6s cubic-bezier(.4,0,.2,1) both; }
.tb-grow { transform-origin: bottom; animation: tbGrow .9s cubic-bezier(.2,.8,.2,1) both; }
.tb-hero { background: linear-gradient(120deg, #006FEE, #4f46e5, #7828C8, #006FEE); background-size: 300% 300%; animation: tbGradient 14s ease infinite; }
.tb-lift { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.tb-lift:hover { transform: translateY(-3px); box-shadow: 0 0 30px rgb(0 0 0 / .04), 0 22px 44px rgb(0 0 0 / .10), 0 0 1px rgb(0 0 0 / .3); }
.tb-shine { position: relative; overflow: hidden; }
.tb-shine::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: tbShine 3.2s ease-in-out infinite; }
.tb-glass { background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
html.dark .tb-glass { background: rgba(24,24,27,.72); }
.tb-grid-bg { background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 32px 32px; }
.tb-ticker > * { animation: tbTicker 3.2s ease both; }

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