@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/effects.css");
@import url("tokens/base.css");

@keyframes szReveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes szProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes szRise { from { opacity: 0; transform: translateY(40px) scale(0.985); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  [data-reveal] { animation: szReveal 460ms cubic-bezier(0.16,1,0.3,1) both; animation-timeline: view(); animation-range: entry 2% cover 20%; }
  [data-scrollmedia] { animation: szRise linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
  [data-progress] { animation: szProgress linear both; animation-timeline: scroll(root); }
}
@keyframes szChat { 0%,4% { opacity: 0; transform: translateY(10px) scale(0.98); } 10%,92% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes szScrub { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }
@keyframes szPulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes szFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes szRow { 0%,3% { opacity: 0; transform: translateY(12px); } 9%,94% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes szLine { 0%,4% { transform: scaleX(0); } 16%,100% { transform: scaleX(1); } }
@keyframes szNodeDark { 0%,10% { border-color: rgba(255,255,255,0.14); } 18%,32% { border-color: var(--brand); } 42%,100% { border-color: rgba(255,255,255,0.14); } }
@keyframes szMeter { 0%,6% { width: 4%; } 60%,100% { width: 82%; } }
@keyframes szBar { 0%,8% { transform: scaleY(0.08); } 55%,100% { transform: scaleY(1); } }
@keyframes szTick { 0%,42% { opacity: 0; transform: scale(0.6); } 52%,100% { opacity: 1; transform: scale(1); } }
@keyframes szTyping { 0%,100% { transform: translateY(0); opacity: 0.45; } 40% { transform: translateY(-3px); opacity: 1; } }
@keyframes szCount { 0%,20% { opacity: 0; transform: translateY(6px); } 30%,100% { opacity: 1; transform: none; } }
@keyframes szRoll {
  0%, 17.5% { transform: translateY(0%); }
  25%, 42.5% { transform: translateY(-20%); }
  50%, 67.5% { transform: translateY(-40%); }
  75%, 92.5% { transform: translateY(-60%); }
  100% { transform: translateY(-80%); }
}
@keyframes szWave { 0%,100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@keyframes szSwap { 0%,28% { opacity: 1; } 36%,64% { opacity: 0.18; } 72%,100% { opacity: 1; } }