/* ============================================================
   Suporte API Systems — Public CSS
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* ── Fonts & base ─────────────────────────────────────────── */
body { font-family: 'Poppins', sans-serif; }

/* ── Card hover animation ─────────────────────────────────── */
.card-hover {
  animation: fadeUp .45s ease both;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px -8px rgba(37, 99, 235, .14);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Line clamp ───────────────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Video list scroll ─────────────────────────────────────── */
.video-list-scroll {
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
}
.video-list-scroll::-webkit-scrollbar { width: 4px; }
.video-list-scroll::-webkit-scrollbar-track { background: transparent; }
.video-list-scroll::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }

/* ── Active video item ─────────────────────────────────────── */
.video-item {
  position: relative;
  transition: background .2s ease;
}
.video-item.active {
  background: rgba(37, 99, 235, .08);
  border-left: 3px solid #2563eb;
}
.video-item:not(.active) {
  border-left: 3px solid transparent;
}
.video-item:hover {
  background: rgba(255,255,255,.05);
  cursor: pointer;
}

/* ── Pulse animation ───────────────────────────────────────── */
@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
.animate-pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }