/* ─── Radar — custom styles (everything Tailwind can't express cleanly) ─── */

:root {
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── Load animations ─────────────────────────────────────────── */
@keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes riseIn  { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes rowIn   { from { opacity: 0; transform: translateY(8px) }  to { opacity: 1; transform: none } }
@keyframes chipIn  { from { opacity: 0; transform: translateY(4px) scale(.96) } to { opacity: 1; transform: none } }
@keyframes ping    { 0% { transform: scale(1); opacity: .8 } 100% { transform: scale(2.8); opacity: 0 } }
@keyframes blink   { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes shimmer { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } }

.fade-in { animation: fadeIn .7s var(--ease) both; }
.rise-in { animation: riseIn .8s var(--ease) .1s both; }

.row {
  animation: rowIn .55s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms + 120ms);
}
.chip {
  animation: chipIn .45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms + 200ms);
}
.tab-enter { animation: fadeIn .35s var(--ease) both; }

/* ── Live indicator ──────────────────────────────────────────── */
.live-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 9999px;
  background: #22c55e;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, .25);
  animation: blink 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.live-dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 9999px;
  background: #22c55e;
  animation: ping 2.4s var(--ease) infinite;
}
.live-dot.is-down {
  background: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, .25);
  animation: none;
}
.live-dot.is-down::after { display: none; }

/* ── Tabs ────────────────────────────────────────────────────── */
.tab {
  padding: 18px 64px 18px 60px;
  color: #1c1f24;
  background: transparent;
  border-right: 1px solid #e6e8ec;
  position: relative;
  transition: background-color .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.tab:hover { background: rgba(255, 255, 255, .55); }
.tab.active {
  background: #fff;
  font-weight: 500;
}
/* hide the border-bottom of the nav under the active tab so it merges into the panel */
.tab.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: #fff;
}
.tab:first-child.active { border-top-left-radius: 22px; }

/* ── Scroll area ─────────────────────────────────────────────── */
.scroll-area { scrollbar-width: thin; scrollbar-color: #d6d9de transparent; }
.scroll-area::-webkit-scrollbar { width: 8px; }
.scroll-area::-webkit-scrollbar-thumb { background: #d6d9de; border-radius: 8px; border: 2px solid #fff; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }

/* ── Video rows ──────────────────────────────────────────────── */
.row { transition: background-color .2s var(--ease); }
.row:hover { background: #fafbfc; }

.thumb {
  width: 92px; height: 92px;
  border-radius: 8px;
  background: #f1f2f4;
  overflow: hidden;
  flex-shrink: 0;
}
.thumb img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s var(--ease);
}
.thumb img.loaded { opacity: 1; }

.metric-col + .metric-col { border-left: 1px solid #e6e8ec; }

.video-link { transition: color .15s var(--ease); }
.video-link:hover { color: #2563eb; }

/* ── Dropdown menu ───────────────────────────────────────────── */
.menu { animation: riseIn .22s var(--ease) both; transform-origin: top right; }
.menu li { transition: background-color .15s var(--ease); }
.menu li:hover { background: #f5f6f8; }
#project-dd.open .chevron { transform: rotate(180deg); }

/* ── Skeleton loader ─────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #f1f2f4 0px, #f8f9fa 120px, #f1f2f4 240px);
  background-size: 800px 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: 6px;
}

/* ── Growth sparkline (under the thumbnail) ──────────────────── */
.spark { display: block; overflow: visible; }
.spark-line {
  stroke: #e11d48;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: sparkDraw .9s var(--ease) .35s forwards;
}
.spark-area { fill: rgba(225, 29, 72, .07); opacity: 0; animation: fadeIn .6s var(--ease) .9s forwards; }
.spark-base { stroke: #edeff2; stroke-width: 1; }
.spark-pt   { fill: #fff; stroke: #e11d48; stroke-width: 1; opacity: 0; animation: fadeIn .4s var(--ease) 1.05s forwards; }
.spark-dot  { fill: #e11d48; opacity: 0; animation: fadeIn .4s var(--ease) 1.15s forwards; }
@keyframes sparkDraw { to { stroke-dashoffset: 0 } }