html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.8s ease-out both;
}

@keyframes scroll-x-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-scroll-x-loop {
  animation: scroll-x-loop 20s linear infinite;
}

  @media (max-width: 639px) {
    .viewers-offset {
      left: calc(30px);
    }
  }

  @media (min-width: 640px) {
    .viewers-offset {
      left: calc(-15px);
    }
  }
  
  
@media (min-width: 1024px) {
  #sticky-summary {
    right: 2rem;
    top: 8rem;
  }
}

.tooltip-content {
  @apply absolute left-1/2 -translate-x-1/2 top-full mt-2 w-72 bg-zinc-800 text-sm text-gray-300 px-4 py-2 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-150 z-20 pointer-events-none;
}

.page{ display:none; }
.page.active{ display:block; }
.no-scrollbar::-webkit-scrollbar{ display:none; }
.metric-col{ display:flex; flex-direction:column; align-items:center; position:relative; }
.current-line{ position:absolute; left:50%; transform:translateX(-50%); height:4px; width:40px; background:#ef4444; opacity:.7; }
.metric-bar{ width:1.5rem; border-top-left-radius:.5rem; border-top-right-radius:.5rem; box-shadow:0 10px 25px rgba(0,0,0,.35); transition:height .7s ease-in-out; background:linear-gradient(to top,#7c3aed,#c084fc); }
.metric-label{ margin-top:.5rem; display:inline-block; width:2.5rem; text-align:center; font-size:.825rem; color:#d1d5db; }
.metric-name{ font-size:.8rem; color:#9ca3af; margin-top:.25rem; }
  
  .tab-chip{
  @apply inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm
         bg-zinc-800/70 border border-zinc-700 text-gray-200
         hover:bg-zinc-700/70 hover:border-zinc-500
         transition shadow-sm;
  position: relative;
}
.tab-chip::after{
  content:"";
  position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: linear-gradient(90deg,#8b5cf6,transparent);
  opacity:0; transform: translateY(4px);
  transition: all .25s ease;
}
.tab-chip:hover::after{ opacity:.6; transform: translateY(0); }

.tab-chip[aria-selected="true"]{
  @apply bg-gradient-to-br from-purple-600 to-purple-500 border-purple-500 text-white shadow-purple-500/20 shadow;
}
.tab-chip[aria-selected="true"]::after{
  background: linear-gradient(90deg,#fff,#c4b5fd);
  opacity:1; transform: translateY(0);
}

.nav-btn{
  @apply w-10 h-10 grid place-items-center rounded-xl
         bg-zinc-800/80 border border-zinc-700 text-white
         hover:bg-purple-600 hover:border-purple-500
         transition shadow;
}
.nav-btn:disabled{ @apply opacity-50 pointer-events-none; }

.tooltip{
  @apply absolute -bottom-8 left-1/2 -translate-x-1/2 text-xs
         bg-zinc-800 text-gray-200 px-2 py-1 rounded-md border border-zinc-700
         opacity-0 pointer-events-none transition;
}
.group:hover .tooltip{ @apply opacity-100; }

.dot{
  @apply relative w-3 h-3 rounded-full bg-zinc-700/80 border border-zinc-600;
  box-shadow: inset 0 0 6px rgba(0,0,0,.5);
}
.dot.active{
  background: radial-gradient(closest-side, #c4b5fd, #8b5cf6);
  border-color: #a78bfa;
  box-shadow:
    0 0 12px rgba(167,139,250,.55),
    0 0 32px rgba(139,92,246,.35);
}

.tabs-wrap{ scroll-padding-inline: 12px; }